【Javascript】luxy.jsの使い方！魅力的な慣性スクロールを簡単実装！
susan すーさんのweblog
Vanilla-tilt.jsの使い方とインストール方法。魅力的なUIエフェクトを実現！
susan
記事内に商品プロモーションを含む場合があります
Webデザインにおいて、ユーザーエクスペリエンスを向上させるためには、魅力的なUIエフェクトを実装することが重要です。
その中でも、動きのある立体感を演出する傾斜効果は人気があります。Vanilla-tilt.jsではこの傾斜効果を簡単に実装することができます。
本記事では、その実現に役立つ「vanilla-tilt.js」の使い方とインストール方法について解説します。
エンジニアにおすすめのパソコンはこちら！
おすすめのプログラミングスクール
DMM WEB CAMP
未経験者のために開発されたカリキュラムで、現役エンジニアによる充実したサポート体制。最短3ヶ月でITエンジニアへ転職を目指すことが可能。
| 入学金 | 0円 |
| 料金 | 169,800円(税込)〜 |
| 学び方 | オンライン(自習形式) |
| 校舎 | ー |
| 保証制度 | 8日間返金保証 早期卒業返金保証 |
| 就職サポート | ○ |
| 運営会社 | 株式会社インフラトップ |
おすすめのプログラミングスクールに関しては【初心者用】フリーランスも目指せる！おすすめのプログラミングスクール16選で詳しく解説していますので、興味ある方はぜひチェックしてみてください。
あわせて読みたい
【初心者用】フリーランスも目指せる！おすすめのプログラミングスクール16選
フリーランスエンジニアにおすすめのエージェント
レバテックフリーランス
業界最大級の案件数を誇るフリーランスITエンジニア向けのサービス。専門アドバイザーによる案件提案と全面的なサポートを提供。
| 案件数 | 50,000件以上 |
| リモート | ○ （半分くらいがリモート対応） |
| 単価 | 45万 〜 195万円 |
| 稼働日数 | 週5日が多め |
| 福利厚生 | ◎ |
| 運営会社 | レバテック株式会社 |
フリーランスエンジニア・プログラマーのおすすめエージェントを知りたい方はフリーランスエンジニア・プログラマー用エージェントでおすすめはどこ？12社を徹底比較で詳しく紹介していますので、興味ある方はぜひチェックしてみてください。
あわせて読みたい
フリーランスエンジニア・プログラマー用エージェントでおすすめはどこ？12社を徹底比較
Contents
Vanilla-tilt.jsとは
Vanilla-tilt.jsは、JavaScriptのライブラリであり、要素に傾斜効果を追加するための便利なツールです。
このライブラリを使用すると、マウスの動きやデバイスの傾きに応じて要素をリアルな立体的な動きで傾けることができます。
傾斜効果は、ユーザーエクスペリエンスを向上させ、ウェブページやアプリケーションのビジュアル面での魅力を高めるのに役立ちます。
Vanilla-tilt.jsの特徴
主な特徴
- 軽量でシンプル
- スマホデバイス、タブレットに対応
- カスタマイズ性が高い
- クロスブラウザ対応
軽量でシンプル
Vanilla-tilt.jsは軽量であり、他の依存ライブラリを必要とせず、シンプルな構造を持っています。
そのため、簡単にプロジェクトに組み込むことができます。
スマホデバイス、タブレットに対応
Vanilla-tilt.jsは、デバイスのジャイロスコープや加速度センサーを使用して傾斜効果を作成することができます。
これにより、モバイルデバイスやタブレットなどのモーションセンサーを備えたデバイスでも利用することができます。
カスタマイズ性が高い
このライブラリでは、傾斜効果の強度や軸の制限、回転方向など、様々なオプションをカスタマイズすることができます。
これにより、デザイナーは自分のプロジェクトのニーズに合わせて効果を微調整することができます。
クロスブラウザ対応
Vanilla-tilt.jsは、主要なブラウザ（Chrome、Firefox、Safari、Edgeなど）で動作するように設計されています。
これにより、多くのユーザーが異なる環境で同様のエフェクトを体験することができます。
Javascriptのおすすめライブラリに関する記事はこちら
Vanilla-tilt.jsを使う前の注意点
Vanilla-tilt.jsを使用する前に、いくつかの注意点に注意することが重要です。
以下に、Vanilla-tilt.jsを使用する前に考慮すべき注意点をいくつか挙げます。
注意点
- パフォーマンスへの影響
- 使用目的の適切な判断
- ブラウザの互換性の確認
- オプションの適切な設定
- ユーザーエクスペリエンスの維持
パフォーマンスへの影響
Vanilla-tilt.jsは要素に動きを追加するため、一部のブラウザやデバイスではパフォーマンスに影響を与える可能性があります。
特に要素の数や複雑さが増えると、パフォーマンスの低下が起こる可能性があります。
実際に使用する前に、目的のプロジェクトにおいてどの程度の影響があるかをテストしておきましょう。
使用目的の適切な判断
Vanilla-tilt.jsは、特定のデザインやアニメーションの要素に魅力的な傾斜効果を追加するためのツールです。
しかし、適切な場面で使用しないと、webサイトやアプリケーションのユーザーエクスペリエンスを損なう可能性があります。
傾斜効果がコンテンツの読みやすさやアクセシビリティに影響を与えないように、使用目的を適切に判断しましょう。
ブラウザの互換性の確認
Vanilla-tilt.jsは、多くの主要なブラウザで動作するように設計されていますが、全てのバージョンや環境での動作を保証するものではありません。
使用するプロジェクトのターゲットとなるブラウザやデバイスでの互換性を確認し、十分にテストを行ってください。
オプションの適切な設定
Vanilla-tilt.jsは、多くのオプションがあります。
傾斜の強度や軸の制限、回転方向などの設定を適切に調整することで、望む見た目や動作にすることができます。
各オプションの効果を理解し、プロジェクトのニーズに合わせて適切に設定しましょう。
ユーザーエクスペリエンスの維持
傾斜効果を使用する際には、ユーザーエクスペリエンスを維持することが重要です。
アニメーションが過剰になりすぎたり、視覚的な混乱を引き起こすような効果を避けるために、適度な使用を心がけましょう。
Javascript学習におすすめの書籍
Vanilla-tilt.jsの使用例
Vanilla-tilt.jsの使用例についていくつか紹介します。
基本的な使い方
See the Pen Untitled by 萩原 英 (@suguru1989) on CodePen.
この例では、赤いグラデーション背景を持つ正方形の要素にVanilla-tilt.jsを適用しています。
Vanilla-tilt.jsの効果を適用させたいHTML要素にオリジナルのdata-tilt属性を付与しています。
パラレックス効果
See the Pen Untitled by 萩原 英 (@suguru1989) on CodePen.
以下のコードを親要素に追加します。
上の例では「.inner」の親要素である「.your-element」にCSSで追加しています。
- transform-style: preserve-3d
- transform: perspective(1000px);
- transform: translateZ(20px);
光沢効果
See the Pen Untitled by 萩原 英 (@suguru1989) on CodePen.
光沢を加えたいHTML要素の属性に以下を追加します。
- data-tilt-glare
- data-tilt-max-glare=”0.8″
data-tilt-max-glareの数値を変更すると光沢の強さを変えることができます。
数値が上がれば上がるほど光沢の度合いが強くなります。
ホバー後に拡大
See the Pen Untitled by 萩原 英 (@suguru1989) on CodePen.
ホバー後に拡大させたいHTML要素の属性に以下を追加します。
- data-tilt-scale=”1.1″
data-tilt-scaleの値を大きくすることでホバー後の要素も大きくなります。
数値が上がれば上がるほど要素が大きくなります。
これらの例を基に、自分のプロジェクトに適した要素を選択し、適切なスタイルやオプションを設定してVanilla-tilt.jsを使い、魅力的な傾斜効果を追加してみてください。
Vanilla-tilt.jsのインストール方法
Vanilla-tilt.jsは、通常、プロジェクトのJavaScriptファイル内で使用されます。
インストール方法は主に3通りあります。
自分に合った方法を選んでください。
3通りの方法
- CDN経由でのインストール方法
- ファイルを追加して使う方法
- パッケージマネージャーを使用したインストール方法
①CDN経由でのインストール方法
Vanilla-tilt.jsはCDN経由で簡単に読み込むことができます。
HTMLファイルの<head>セクションまたは<body>セクション内で、以下のスクリプトタグを使用してライブラリを読み込みます。
1<script src="https://cdn.jsdelivr.net/npm/vanilla-tilt@1.7.0/dist/vanilla-tilt.min.js"></script>このスクリプトタグを使用することで、最新バージョンのvanilla-tilt.jsが読み込まれ、利用できるようになります。
②ファイルを追加して使う方法
次に紹介する方法は、公式サイトから必要なvanilla-tilt.jsのファイルをダウンロードして使用する方法です。
ステップ1: ファイルのダウンロード
まずはVanilla-tilt.js用webサイトにアクセスし、ファイルをダウンロードします。
「vanilla-tilt.min.js」をクリックし、ソースを全てコピーするか、右クリックし「名前をつけて保存」します。
ステップ2: ファイルの取り込み
自分のプロジェクトに先ほど保存したファイルを移動させ、</body>タグの前に取り込みます。
これで準備完了です。
③パッケージマネージャーを使用したインストール方法
最後に紹介する方法はTerminalでパッケージマネージャーを使用したインストール方法です。
ステップ1: npm、Yarnでインストール
もしプロジェクトがパッケージマネージャー（例: npm、Yarn）を使用している場合は、コマンドラインで以下のコマンドを実行して、Vanilla-tilt.jsをインストールします。
1npm install vanilla-tiltまたは
1yarn add vanilla-tiltこれにより、プロジェクトにVanilla-tilt.jsが追加されます。
ステップ2: インポート
Vanilla-tilt.jsをインストールしたら、JavaScriptファイルで使用するために、必要な場所でモジュールをインポートします。
以下は、一般的なESモジュールのインポートの例です。
1import VanillaTilt from 'vanilla-tilt';このようにモジュールをインポートすることで、Vanilla-tilt.jsの機能を使用できるようになります。
Vanilla-tilt.jsの使い方
基本的な使い方
Vanilla-tilt.jsを使用して要素に傾斜効果を追加するためには、以下の手順を実行します。
HTMLで要素を作成
HTMLファイルで傾斜効果を追加したい要素を選択します。
例えば、<div id=”my-element”></div>のような要素を追加しましょう。
1<div class="your-element"></div>data-tilt属性
HTMLファイルで傾斜効果を追加したい要素に、data-tilt属性を追加します。
これで基本的な傾斜効果を利用することができます。
1<div class="your-element" data-tilt></div>オプションの使用
Vanilla-tilt.jsでは、さまざまなオプションを使用して傾斜効果をカスタマイズすることができます。
以下のようにオプションを設定することで、効果の挙動や見た目を調整できます。
1VanillaTilt.init(element, {
2 max: 25, // 最大の傾斜角度（デフォルト: 15）
3 speed: 400, // 回転の速度（デフォルト: 300）
4 glare: true, // 輝きの有効化（デフォルト: false）
5 "max-glare": 0.5, // 輝きの最大強度（デフォルト: 1）
6 easing: "cubic-bezier(.03,.98,.52,.99)", // イージング変化値（デフォルト: cubic-bezier(.03,.98,.52,.99)）
7 scale: 1.2, //拡大値（デフォルト：1）
8 transition: true, //トランジションの有効化（デフォルト：true）
9 reset: true // リセットの有無（デフォルト：true）
10});
オプション例
- max
- 最大の傾斜角度を設定します。デフォルト値は15で、-1から1の範囲の値を指定することができます。値が大きいほど傾斜角度が大きくなります。
- speed
- 傾斜の回転速度を指定します。デフォルト値は300で、数値を指定することができます。値が大きいほど回転速度が速くなります。
- easing
- 傾斜効果のイージング（変化の速度）を指定します。デフォルト値は”cubic-bezier(.03,.98,.52,.99)”で、CSSのトランジションのタイミング関数のように指定できます。
- scale
- オプションで設定した値に基づいて、要素のサイズを変更します。デフォルト値は1で、1より大きな値を指定すると拡大、1より小さな値を指定すると縮小されます。
- transition
- アニメーションのトランジションのタイプを指定します。デフォルト値はtrueで、falseを指定するとアニメーションを無効にします。
- reset
- マウスが要素の外に移動したときに要素をリセットするかどうかを指定します。デフォルト値はtrueで、falseを指定するとリセットが無効になります。
これらのオプションは一部です。
詳しくは公式サイトをご覧ください。
Destroyメソッド
Vanilla-tilt.jsには、要素の傾斜効果を削除するためのdestroy()メソッドが用意されています。
このメソッドを使用すると、要素からVanilla-tilt.jsの効果を取り除くことができます。
1const element = document.querySelector('#my-element');
2const tilt = VanillaTilt.init(element);
3
4// 傾斜効果を削除
5tilt.destroy();
上記の例では、VanillaTilt.init()メソッドを使用して要素に傾斜効果を追加し、tilt変数に初期化されたVanilla-tilt.jsのインスタンスを格納しています。
そして、destroy()メソッドを呼び出すことで、要素から傾斜効果を削除しています。
Javascript学習におすすめの書籍
まとめ
本記事では、vanilla-tilt.jsの使い方とインストール方法について解説しました。
Webデザインにおいて、傾斜効果を実現することでユーザーエクスペリエンスを向上させることができます。
是非、このライブラリを活用してみて魅力的なUIエフェクトを実現してみてください。
エンジニアにおすすめのパソコンはこちら！
コーディングやプログラミングを勉強したい方はこちらの記事がおすすめ
レンタルサーバーをお探しの方はこちらの記事がおすすめ
副業案件をお探しの方はこちらの記事がおすすめ！
ABOUT ME
30代web業界未経験
→オーストラリアにIT留学
→現地インターンを1年半経験
→フリーランスwebデザイナー・エンジニアとして活動
→月収80万円達成！
