デジタルマーケティングやデザイン・開発に関する情報やセルリアに関するトピックを更新。
運営メディアのピックアップコンテンツ、外部サイトへの寄稿記事なども公開しています。

ビジネスを成功へと導くWeb制作・インターネット広告・コンサルティング

Search

サイト内検索

vanilla-tilt.jsでホバー時のパララックスを実装する方法・オプション解説付き

更新:2023年12月19日 カテゴリ: デザイン・開発

みなさんこんにちは!エンジニアの高澤です! 今回はをJavaScriptのプラグインであるvanilla-tilt.jsを使ってパララックス(視差効果)の動きをを実装する方法を解説したいと思います。

vanilla-tilt.jsとは

vanilla-tilt.jsとは、パララックス(視差効果)の動きを実装するためのJavaScriptプラグインのことをいいます。

vanilla-tilt.jsでは、マウスの操作に合わせて要素を動かすパララックスの動きを実装する際に役立ちます。 例えば、画像やボタンなどの要素をマウスで上下左右にホバーさせた時にそれに合わせて立体的に傾斜させて動くアニメーションを実装することが可能です。

公式ページは下記のURLからご確認可能です。 https://micku7zu.github.io/vanilla-tilt.js/

jQueryに依存しない

vanilla-tilt.jsはjQueryに依存しないJavaScriptプラグインになります。 そのため、実装コードを記述する手前でjQueryの本体ファイルを読み込んでおく必要はございません。

「vanilla-tilt.js」の「vanilla」はネイティブなJavaScriptで完結している意味でプラグイン名にについております。

パララックスを実装する方法

それでは早速vanillatilt.jsを使ってパララックスを実装していきたいと思います。

基本的な実装の流れは主に以下になります。

  • 本体ファイルを読み込み
  • HTMLをマークアップする
  • CSSを記述する

手順通りに進めていけば無理なく実装できるように順を追って解説いたします。

vanilla-tilt.jsの本体ファイルを読み込む

まず初めに、vanilla-tilt.jsの機能を利用できるようにするために環境を用意します。

そのためにvanilla-tilt.jsの本体ファイル(vanilla-tilt.js環境を構築する大量のプログラムのファイル)をJavaScriptのscriptタグで読み込みます。

上記のスニペットをHTMLファイル等ページ中の下の方に追記してください。

HTMLをマークアップする

プラグインの本体ファイルの読み込みが完了したら、次はパララックスの動きをつけたい対象となるHTMLをマークアップします。

以下のコードをコピー&ペーストしてください。

ご覧いただくとお分かりかと思いますが、divタグの中に「data-tilt」や「data-tilt-max=”50″」、「data-tilt-speed=”400″」などHTMLに対してvanilla-tilt.js専用の属性を追加しております。

要はこの専用の属性を追加したり、数値を変更したりしてパララックスの動きをカスタマイズすることが可能です。

サンプルコード上のそれぞれの属性について解説は以下の内容になります。

オプション名 説明
data-tilt vanilla-tilt.jsも機能を導入するのに最低限の属性です。 この属性を追加して初めて動きます。
data-tilt-max=”50″ 最大傾斜回転 (度)の数値
data-tilt-speed=”400″ アニメーションの速度
data-tilt-perspective=”500″ 遠近法の度合いを指定します。 低くなるほど傾きが極端になります。

CSSを記述する

vanilla-tilt.jsの本体ファイルの読み込みと、HTMLのマークアップが完了したら、CSSでレイアウトなど見た目の部分を整えていきます。

このように、HTMLをレイアウトするためのCSSを記述することでパララックスとしての機能を引き立てていきます。

正直ここまででvanilla-tilt.jsを使っての実装は完了です。結構簡単だったかと思います!

あとはご自身の好みでHTMLに追加している専用の属性を変更したり、CSSの記述を変更してレイアウトを変えたりしてカスタマイズしていけば特定の要素に対して高度なパララックスの実装ができるかと思います。

ただし、もっとより詳細に細かくカスタマイズする場合、次の内容からはオプションなどについて解説していきますので、より詳細にカスタマイズするためにもぜひ読み進めてみてください。

オプションについて

vanilla-tilt.jsでは以下の内容でオプションが用意されております。

下記のオプションはHTMLの専用の属性の種類一覧になります。

専用属性の「data-tilt-【オプション名】」の形で記述することで各種の動きを実装することができます。

上記オプションを使ったJavaScriptについては、次で説明いたします。

公式ページを参考に各種実装方法

vanilla-tilt.jsの公式ページにちょうど各種オプションを用いた動きの例があったので、公式ページを参考に当記事でも解説してみたいと思います。

最も基本的な作成方法

まず最も基本的な必ず必要になるdivタグにdata-tilt属性のみを追加するパターンです。

See the Pen Untitled by Shota Takazawa (@takazawa) on CodePen.

この属性を追加するだけである程度の基本的な動きを実現できます。

グレア効果

明るさを表現するグレア効果を実装する場合、data-tilt-glare属性とdata-tilt-max-glare=”【数値】”属性を追加します。

数値を変更することでグレア値を微調整できます。

See the Pen Untitled by Shota Takazawa (@takazawa) on CodePen.

ホバー時の傾斜を反転

data-tilt-reverse属性をtrueにすることで、ホバー時の傾斜の動きを反転させることができます。

See the Pen Untitled by Shota Takazawa (@takazawa) on CodePen.

ホバー離脱後の状態維持

data-tilt-reset属性をfalseにすることで、ホバー後に離脱したらそのまま状態を維持します。

See the Pen Untitled by Shota Takazawa (@takazawa) on CodePen.

要素より外側の範囲(ページ全体)のマウスの動きに反応させる

data-tilt-full-page-listening属性を追加することで、要素より外側の範囲(ページ全体)のマウスの動きに反応させることができます。

See the Pen Untitled by Shota Takazawa (@takazawa) on CodePen.

ホバー時のスケール(拡大)

data-tilt-scale属性に数値を設定することで、ホバー時に要素を拡大させることができます。

See the Pen Untitled by Shota Takazawa (@takazawa) on CodePen.

傾斜の開始位置

data-tilt-startX属性に数値、data-tilt-startY属性に数値、data-tilt-reset-to-start属性にtrueを設定すれば傾斜の開始位置を設定できます。

See the Pen Untitled by Shota Takazawa (@takazawa) on CodePen.

X軸を無効にする

data-tilt-axis属性に「y」を設定すれば、縦のみ傾斜させることができ横に動かさせないことができます。

See the Pen Untitled by Shota Takazawa (@takazawa) on CodePen.

Y軸を無効にする

data-tilt-axis属性に「x」を設定すれば、横のみ傾斜させることができ縦に動かさせないことができます。

See the Pen Untitled by Shota Takazawa (@takazawa) on CodePen.

まとめ

vanilla-tilt.jsを使ってパララックスを実装する方法についての解説は以上になります。

vanilla-tilt.jsを使えば簡単に特定の要素をホバーした時のパララックスの動きを実装することができるjsプラグインです。

当記事では実装の手順を丁寧に解説し無理なく実装することができるのと、プラグインにあらかじめ用意されているオプションに関しても解説しているため、実務でそのまま活かすことが可能です。

vanilla-tilt.jsについて仕事でそのまま使えることを意識して構成しているため、よろしければぜひ当記事を繰り返しご活用いただけましたら幸いです。

更新:2023年12月19日 カテゴリ: デザイン・開発

現状のデジタルマーケティングに課題をお感じですか?

デジタルマーケティング施策やWebサイトの機能・デザイン等を見直される際は、ぜひお声がけください。 貴社のご状況やご要望に合わせ、アクセス解析から数値的な根拠を持って課題点の抽出と改善に向けての施策を無料にてご提案させていただきます。

お問い合わせ

CONTACT

目標を共に背負い、伴走するWebコンサルティング

Web Cusulting & Direction

当社の考えるWebコンサルティングは、目標をクライアントと共に共有し達成へと邁進すること。これは「解決策を示すことが役割である」という従来のコンサルティングの考え方と少し異なるかもしれません。あくまで、コンサルタントは経営者や事業責任者に対し、課題に対して解決につながる施策を示すまで仕事、と言う解釈が一般的でしょう。当社は設立してすぐにWebコンサルティング事業をはじめました。若いメンバー中心、驚かれるような実績もほとんどありませんでした。
そんな私たちが、大きな責任を背負った役職者に対し助言を行い、プロジェクトを成功に導かなければなりません。改善策を示すだけでは足りませんし、なかなか信じてももらえません。そのような中でどうしたらチームの一員として貢献できるのか。もがいた末たどり着いた答えは非常にシンプルでした。
助言だけでなく同時に実践も引き受け、先に成果を出してしまうこと。そうすれば、その実績が信頼に変わり、我々の示す改善策がチームに受け入れられやすくなり良いサイクルが作れます。私たちの中で強く根付いた価値観、「伴走するWebコンサルティング」を心の中心に据えて、クライアントの目標に対して真正面から向き合います。

作るだけではない、ビジネスの芯を捉えるWeb制作・開発

Design & Development

Webサイト制作会社、デザイン会社は日本全国に1万社以上存在します。加えて、最近ではWebサイトを無料で簡単に作れるサービスなども生まれてきました。
Web制作を生業とする企業は今一度事業のあり方を考えなければならない帰路に立たされています。当社もその例にもれず、自分たちのできるWeb制作とは何か、真剣に悩んできました。そしてたどり着いたのが、「ビジネスの芯を捉える」Web制作・開発を提供すること。かっこいいデザイン、印象の残るデザイン、確かにそれらは非常に価値があります。誤解を恐れずに言うならば、我々よりも良いデザインを作る会社はたくさんあるでしょう。我々は広告賞の受賞歴もなければ、アートに精通したクリエイティブディレクターが在籍しているわけでもない。言ってしまえば、最先端のクリエイティブを手掛けるにはまだ経験が浅いのは否めません。
だったら何ができるのか?私たちは、”集客で成果を出す”ことに長けています。創業から5年、クライアントのビジネスで結果を出すことだけを考えてきました。我々にとってデザインは手段。得意のユーザー解析、SEO、広告運用と組み合わせて「ビジネスの芯を捉えた」デザインを創造することで事業成長に繋げていきます。

高速PDCAを実現する、総合的な広告運用

Advertising management

「広告運用代行会社」と聞くと、多くの人はGoogleやYahoo!のリスティング広告をクライアントの代わりに運用する会社というイメージを思い浮かべるのではないでしょうか。それはある種間違いではないのですが、もしかすると時代遅れかもしれません。インターネット広告の種類は多種多様、リスティング広告とほとんど同じ意味とし使われていた「運用型広告」は、実際はリスティング広告以外にも効果的な手法が数多く存在します。加えて、Google広告やYahoo!広告はAIによる運用の簡略化やサポートの充実化が進み、代理店を介さずとも未経験者の運用で一定の効果を挙げられるようにもなっています。広告代理店の存在意義を改めて定義し直さなければなりません。
私たちが考える広告運用代行の価値は「成果を出し続けること」と「成果を出すプロセス、ノウハウをクライアントと共有すること」であると考えています。成果を出し続けるために、当社は多数の広告手法に精通する広告運用コンサルタントを育て、それらを最適なバランスで組み合わせて運用する体制を整備しました。
運用の状況をタイムリーにクライアントと共有しご一緒に課題や改善策を共有することで、長期的に見て価値の高い広告パートナーとしてチームに貢献いたします。

目標を共に背負い、伴走するWebコンサルティング

Web Cusulting & Direction

当社の考えるWebコンサルティングは、目標をクライアントと共に共有し達成へと邁進すること。これは「解決策を示すことが役割である」という従来のコンサルティン[続きを表示する]グの考え方と少し異なるかもしれません。あくまで、コンサルタントは経営者や事業責任者に対し、課題に対して解決につながる施策を示すまで仕事、と言う解釈が一般的でしょう。当社は設立してすぐにWebコンサルティング事業をはじめました。若いメンバー中心、驚かれるような実績もほとんどありませんでした。そんな私たちが、大きな責任を背負った役職者に対し助言を行い、プロジェクトを成功に導かなければなりません。改善策を示すだけでは足りませんし、なかなか信じてももらえません。そのような中でどうしたらチームの一員として貢献できるのか。もがいた末たどり着いた答えは非常にシンプルでした。助言だけでなく同時に実践も引き受け、先に成果を出してしまうこと。そうすれば、その実績が信頼に変わり、我々の示す改善策がチームに受け入れられやすくなり良いサイクルが作れます。私たちの中で強く根付いた価値観、「伴走するWebコンサルティング」を心の中心に据えて、クライアントの目標に対して真正面から向き合います。

作るだけでない、ビジネスの芯を捉えるWeb制作・開発

Design & Development

Webサイト制作会社、デザイン会社は日本全国に1万社以上存在します。加えて、最近ではWebサイトを無料で簡単に作れるサービスなども生まれてきました。Web制[続きを表示する]作を生業とする企業は今一度事業のあり方を考えなければならない帰路に立たされています。当社もその例にもれず、自分たちのできるWeb制作とは何か、真剣に悩んできました。そしてたどり着いたのが、「ビジネスの芯を捉える」Web制作・開発を提供すること。かっこいいデザイン、印象の残るデザイン、確かにそれらは非常に価値があります。誤解を恐れずに言うならば、我々よりも良いデザインを作る会社はたくさんあるでしょう。我々は広告賞の受賞歴もなければ、アートに精通したクリエイティブディレクターが在籍しているわけでもない。言ってしまえば、最先端のクリエイティブを手掛けるにはまだ経験が浅いのは否めません。だったら何ができるのか?私たちは、”集客で成果を出す”ことに長けています。創業から5年、クライアントのビジネスで結果を出すことだけを考えてきました。我々にとってデザインは手段。得意のユーザー解析、SEO、広告運用と組み合わせて「ビジネスの芯を捉えた」デザインを創造することで事業成長に繋げていきます。

高速PDCAを実現する、総合的な広告運用

Advertising management

「広告運用代行会社」と聞くと、多くの人はGoogleやYahoo!のリスティング広告をクライアントの代わりに運用する会社というイメージを思い浮かべるのではな[続きを表示する]いでしょうか。それはある種間違いではないのですが、もしかすると時代遅れかもしれません。インターネット広告の種類は多種多様、リスティング広告とほとんど同じ意味とし使われていた「運用型広告」は、実際はリスティング広告以外にも効果的な手法が数多く存在します。加えて、Google広告やYahoo!広告はAIによる運用の簡略化やサポートの充実化が進み、代理店を介さずとも未経験者の運用で一定の効果を挙げられるようにもなっています。広告代理店の存在意義を改めて定義し直さなければなりません。私たちが考える広告運用代行の価値は「成果を出し続けること」と「成果を出すプロセス、ノウハウをクライアントと共有すること」であると考えています。成果を出し続けるために、当社は多数の広告手法に精通する広告運用コンサルタントを育て、それらを最適なバランスで組み合わせて運用する体制を整備しました。運用の状況をタイムリーにクライアントと共有しご一緒に課題や改善策を共有することで、長期的に見て価値の高い広告パートナーとしてチームに貢献いたします。

サイト情報

SITE INFO