HTMLJS初期化フレームワークを使う場合ドライバーの追加アニメーションの設定ドライバー名CSSプロパティ名ドライバーの閾値アニメーションの値アニメーションのオプションプリセットアニメーションを使う場合デモまとめlax.jsとはスクロールに合わせて様々なアニメーションを付与できるJSライブラリです。スクロールに合わせたスムーズなアニメーション効果が特徴でめちゃくちゃいい感じでにヌルヌル動いてくれます。コード自体は4.4KBほどの軽量スクリプトとなっており、既存のサイトに取り入れるのも簡単。PC・スマホどちらでも動きます。jQueryなど他ライブラリへの依存もなく、VueやReactのプロジェクトでも使えるようです。公式のデモはこちら↓lax.js公式のGitHubはこちら↓alexfoxy/lax.jshttps://github.com/alexfoxy/lax.jslax.jsの使い方ここからはコードサンプルを使った具体的な導入方法について。簡単なデモサイトを使って説明します。lax.jsのデモこのデモのGitHubリポジトリはこちら。※記事で説明に使っているコードとデモのコードは若干異なる場合があります。lax.jsのデモhttps://github.com/inos3910/lax-demo導入方法ライブラリをGitHubリポジトリからダウンロードして使うnpmやYarnでモジュールを開発環境にインストールして使うCDNを読み込ませて使うどの方法でもOKです。lax.jsJSでインポートして準備完了。'lax.js'Githhubからダウンロード・CDNの場合は、<script>タグで読み込んで準備完了。src="https://cdn.jsdelivr.net/npm/lax.js@2.0.3/lib/lax.min.js"></script>この記事ではlax.jsのバージョンはv2.0.3を使います。これでlax.jsを使う準備ができました。続いてlax.jsを使ってスクロールアニメーションを実装する方法について。※ここからは自分でアニメーションの演出まで作りたい方向けです。試したい方はプリセットアニメーションを使う場合」へお進みください。HTML任意のクラス名を付けた要素を用意します。class="js-lax">lax</div>ここではjs-laxというクラス名を付けたdivを用意しておきます。JSJavaScriptのコードでアニメーションの実行内容を書いていきます。});}これを実行するとデモの1番上のセクションの動きになります。https://inos3910.github.io/lax-demo/#section-1laxという文字がスクロールに合わせて左から右へ動いていくような動きです。内容を細かく見ていきます。初期化window.onloadでページの読み込みが完了したタイミングでlax.init()を実行して初期化します。lax.init();}公式に準じてwindow.onloadを使っていますが、addEventListenerで書いてももちろんOKです。lax.init();});これで初期化はOKです。フレームワークを使う場合VueやReactといったフレームワークと合わせて使う場合は、少し注意が必要な様です。Frameworksに書いてあるのでGoogle翻訳してみました。パフォーマンスを向上させるために、lax.jsは、ページの読み込み時にアニメーション化する要素のリストにインデックスを付けます。React、Vue、EmberJSなどのライブラリを使用している場合は、最初のwindow.onloadの後に要素を追加している可能性があります。このため、アニメーション化するDOMにコンポーネントを追加するときはlax.addElementsを呼び出す必要があり、コンポーネントがアンマウントするときはlax.removeElementsを呼び出す必要があります。ここでReactの例を見つけてください。他の例は、Vue.jsとAngularでまもなく利用できるようになります。https://github.com/alexfoxy/lax.js#dom-behavior-and-usage-with-frameworkswindow.onloadのタイミングでは画面上にすべてのコンポーネントが追加されているかどうかわからないので、フレームワークでコンポーネントを追加する時、削除する時に都度関数呼び出して使ってねってことですね。次にドライバーを追加します。ドライバーには、アニメーションに使う値を設定します。ここに設定した値をlax.jsがいい感じにアニメーションに適した値に変換して使えるようにしてくれます。今回は縦スクロールに合わせた動きを付けたいので、縦スクロール量をドライバーに追加します。コードでは下記のようになります。//アニメーションに使いたい値});ドライバーの追加はlax.addDriver関数を使います。第2引数に数値を返す関数を指定します。ここではスクロールに連動したアニメーションを設定したいのでwindow.scrollYを返すようにします。この記事ではスクロールに合わせた動きの紹介をしますが、ドライバーを追加することでそれ以外の動きも対応可能です。マウスカーソル位置の値をアニメーションに使いたい場合は下記のようなドライバを設定します。positionというものに書かれているコードの一部です。mousemoveイベントに合わせて変化するマウスの座標位置をドライバーに設定しています。ドライバーの機能があることで工夫すれば他にもいろいろな動作に合わせたアニメーションが作れそうですね。使われるのはスクロールになるとは思いますが。その他、第3引数でドライバーのオプションが指定できます。trueにするとアニメーションに慣性を付けることができます。デフォルトはfalse。フレームレート(fps)を変更できます。デフォルトは1で、1秒間に60回更新されます。2に設定した場合は1秒間に30回、60に設定した場合は1秒間に1回の更新になります。第3引数を指定すると下記のようになります。//30fpsに});ドライバーのオプションは正直かなり調整が難しいです。そもそもデフォルトでいい感じに設定されているので、よほどアニメーションに関してこだわりがある場合以外はあまり使う機会無さそうです。最後にアニメーションを設定します。基本的な設定の仕方は下記のようになります。);lax.addElements関数を使って設定します。第1引数はアニメーションを設定したいセレクタを設定します(ここでは.js-lax)。第2引数はアニメーションの細かな動きを設定します。}},ここがlax.jsの肝になってくるので各項目を細かく見ていきます。ドライバー名lax.addDriverで追加したドライバーの名前をキーとしたオブジェクトを追加します。ここでは前述で追加したscrollYを追加しています。他のドライバーのアニメーション設定を追加する場合は、下記のように追加します。}},こんな感じで指定したセレクタに複数のドライバーごとのアニメーションを設定できます。CSSプロパティ名アニメーションさせたいCSSプロパティ名をキーにした配列をドライバーのオブジェクトに追加します。下記はscrollYドライバーにopacityプロパティを追加しています。}},複数のCSSプロパティを設定する場合は下記のように追記していきます。}},ここで唐突にtranslateXとかscaleとか出てきますが、CSSプロパティではtransformなんじゃないの?ってなりますよね。これに関しては、lax.jsでサポートされているCSSプロパティであればこういった省略記法が使えるようになっています。下記がlax.jsでサポートされているCSSプロパティの一覧になります。brightness();アニメーションに使う主要なプロパティはだいたい揃ってる感じですね。ここに載っているもの以外でもCSSプロパティであれば指定できます。値が複雑な場合は下記のようにcssFnオプションと組み合わせて使う必要が出てくる場合があります。cssFnオプションについては後述します。※box-shadowのようにプロパティ名にハイフンが入る場合はクォートでくくる。]}ドライバーの閾値CSSプロパティの配列の1つ目に、ドライバーで設定した値をアニメーションとして発火させる開始位置とアニメーションの終了位置の閾値(しきい値)を配列で設定します。}},ドライバーにはscrollYを設定しているので、window.scrollYの値が500pxに到達した位置からアニメーションが始まって、1000pxに到達した位置で終わります。アニメーションのキーフレーム的な使い方になるので、下記のように複数の閾値を設定することもできます。}},その他に、絶対値で指定するのは面倒なのでlax.jsには変わりに自動で値を設定できるタグが用意されています。}},という感じでelInYとelOutYを使えばOKです。演算子を使って計算もできるので、細かな調整も効きます。}},このように決まった値を取得できるタグの一覧は下記になります。lax.addElementsで追加された要素の順番(インデックス)これだけあればほとんど対応できそうですね。演算子と組み合わせて使えるのが便利です。アニメーションの値CSSプロパティの配列の2つ目に、ドライバーの閾値に合わせてアニメーションの値を指定します。]}要素が画面の高さの中央までスクロールされたらtransform:translateX(-300px);の位置から、transform:translateX(300px);に向かってスクロール量に合わせてアニメーションを開始、要素が画面上部から出ていく時にtransform:translateX(300px);の位置でアニメーションを終了します。アニメーションの値にもドライバーの閾値のところで紹介したタグが使えるので、下記のような使い方ができます。skewX(-40deg);の位置でアニメーションを終了します。(デモページの5つ目のセクション)https://inos3910.github.io/lax-demo/#section-5パララックス風にスクロールと逆方向に動きながら左右にぐにゃっと歪むようなアニメーションになりました。アニメーションのオプションいくつかあるのですが、ここではeasingとcssFnについてだけ紹介します。その他の慣性(inertia)の設定とかは難しいのでそのレベルで使いたい方は公式ドキュメントとGitHubでコードの中身を確かめてから使ってみてください。easingCSSやJSのアニメーションライブラリでも設定できますが、アニメーションに緩急を付けることができるオプションです。アニメーションのオプションに下記のように設定します。}});下記はlax.jsで使えるイージングの一覧です。easeInQuadeaseOutQuadeaseInOutQuadeaseInCubiceaseOutCubiceaseInOutCubiceaseInQuarteaseOutQuarteaseInOutQuarteaseInQuinteaseOutQuinteaseInOutQuinteaseOutBounceeaseInBounceeaseOutBackeaseInBack他のアニメーションライブラリなどで広く使われているものと同じなので、他のライブラリで慣れている場合はわかりやすくて使いやすいです。cssFn関数として戻り値にCSSの値を返すようにして使うオプションです。第1引数がドライバーで取得した値(number)、第2引数が指定した要素(DomElement)になります。CSSプロパティの指定のところで少し紹介しましたが、box-shadowみたいなCSSの値が複雑になるものをアニメーションしたい場合に使えます。※box-shadowのようにプロパティ名にハイフンが入る場合はクォートでくくる。]}他によく使いそうなのはbackground-positionやbackground-sizeなどですかね。いったオプションがあると助かります。プリセットアニメーションを使う場合lax.jsにはhtmlのclassに指定するだけでプリセットで使えるアニメーションが用意されています。lax_preset_spin"></div>こんな感じで指定すると、スクロールに合わせて要素が回転しながらフェードインします。プリセットアニメーション用のアプリケーションが公式で公開されているので、ほんとにサクッと使いたい人はこちらを使うのがかなりおすすめです。https://alexfox.dev/lax.js/preset-explorerアプリケーションの使い方はほぼ説明不要だと思いますが、一応簡単に書いておきます。左側メニューでチェックを入れたアニメーションが右側のプレビューに表示されます。code」のところのcopyをクリック。class="hoge"></div>laxというクラス名を追加して、コピーしたコードを貼り付けるだけです。lax_preset_spin"></div>クラス名にlaxを忘れてコピーしたコードだけ貼り付けても動かないのでそこだけ注意です。デモとりあえず試してみました。https://inos3910.github.io/lax-demo/公式ほど上手く動かせないですが、簡単な設定で他のアニメーションライブラリではなかなか実現できない動きを付けることができました。このデモのGitHubリポジトリはこちら。※記事で説明に使っているコードとデモのコードは若干異なる場合があります。Scrollを使ったことがありますが、スマホの調整が難しかった印象です。その点、lax.jsはスマホでもPCでも動きの滑らかさがいい感じですごく気にいりました!ググってもあまり情報なかったんですが、ドキュメント読んで公式のデモ見たらそこまで難しくない感じでした。いったアニメーションを求められた時は簡単に取り入れて使えそうです。プリセットのアニメーションは使えそうなものが多いので時短になって助かります。Scrollについてもまた時間があれば書いてみて比較してみようかなと思います。他にスクロール・パララックス関連のライブラリとしてRellax.jsについて過去に記事を上げてますのでこちらもご参考までに。Rellax.jsを使って簡単パララックスひとまず今回はここまで。