クロールすると1画面移動するアニメーションを作成したいと思った時に、便利なjQueryライブラリが「scrollfy.js」です。
デモページはこちら▼
scrollfy.jsとは？
JavaScript Developerの@lukehaasさんが作成したスクロールライブラリです。スクロールパララックスアニメーションが実装できるようになるためのライブラリです。
詳しい情報は公式サイトに書かれてあります▼
こんなものが作れるとは、すごすぎる…。
scrollfy.jsの使い方
まずは、CDNでjQueryとscrollfy.jsをインポートします。
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.21/jquery.scrollify.min.js" integrity="sha512-UyX8JsMsNRW1cYl8BoxpcamonpwU2y7mSTsN0Z52plp7oKo1u92Xqfpv6lOlTyH3yiMXK+gU1jw0DVCsPTfKew==" crossorigin="anonymous"></script>これで準備は完了です。
Basic Setup
公式の手順そのままですが、下記のように設定していきます。まずは基本構造です。シンプルにjQueryを組み込んでいます。
<! doctype html>
<html>
<head>
<script>
$(function() {
$.scrollify({
section : ".example-classname",
});
});
</script>
</head>
<body>
<div class="example-classname"></div>
<div class="example-classname"></div>
</body>
</html>Configuration
セクション名やスクロールスピード、タッチの際にスクロールするか（？おそらく）、などを設定できるようになっています。
[rml_read_more]
$.scrollify({
section : "section",
sectionName : "section-name",
interstitialSection : "",
easing: "easeOutExpo",
scrollSpeed: 1100,
offset : 0,
scrollbars: true,
standardScrollElements: "",
setHeights: true,
overflowScroll: true,
updateHash: true,
touchScroll:true,
before:function() {},
after:function() {},
afterResize:function() {},
afterRender:function() {}
});Configuration
sectionName
Scrollifyを使用すると、各セクションのハッシュ値を定義できます。これにより、特定のセクションへのパーマリンクが可能になります。これは、セクションのデータ属性として設定されます。データ属性の名前は「sectionName」で定義されます。
interstitialSection
ヘッダーやフッターなど、フルハイト以外のセクション用のCSSセレクター。
easing
イージング方法を定義します。
offset
各セクションの位置をオフセットするためのピクセル単位の距離。
scrollbars
スクロールバーを表示するかどうかを定義するブール値。
setHeights
Scollifyがセクションに高さを割り当てるかどうかを定義するブール値。デフォルトではTrue。
standardScrollElements
標準のスクロール動作を必要とするセクション内の要素のCSSセレクター。
overflowScroll
Scrollifyがセクション内のオーバーフローしたコンテンツをスクロールできるかどうかを定義するブール値。デフォルトではTrue。
updateHash
セクションをスクロールするときにScrollifyがブラウザの場所のハッシュを更新するかどうかを定義するブール値。デフォルトではTrue。
touchScroll
Scrollifyがタッチスクロールイベントを処理するかどうかを定義するブール値。デフォルトではTrue。
before
セクションがmoveメソッドを介してスクロールされる前に発生するコールバック。引数には、セクションのインデックスとすべてのセクション要素の配列が含まれます。
after
新しいセクションがスクロールされた後に発生するコールバック。引数には、セクションのインデックスとすべてのセクション要素の配列が含まれます。
afterResize
ウィンドウのサイズが変更された後に発生するコールバック。
afterRender
Scrollifyの初期化後に発生するコールバック。
Methods
下記のメソッドを使うことで、スクロールに様々な仕掛けを入れることができます。
$.scrollify.move("#name");moveメソッドを使用して、特定のセクションにスクロールできます。これは、セクションのインデックス、またはハッシュが前に付いたセクションの名前を取ることができます。
$.scrollify.instantMove("#name");InstantMoveメソッドを使用すると、アニメーションなしで特定のセクションにスクロールできます。セクションのインデックス、またはハッシュが前に付いたセクションの名前を解析できます。
$.scrollify.next();次の方法を使用して、現在のパネルの直後に続くパネルにスクロールできます。
$.scrollify.previous();前の方法を使用して、現在のパネルの直前のパネルにスクロールできます。
$.scrollify.instantNext();InstantNextメソッドを使用すると、アニメーションなしで、現在のパネルの直後にあるパネルにスクロールできます。
$.scrollify.instantPrevious();InstantPreviousメソッドを使用して、現在のパネルの直前のパネルにスクロールできます。
Methods Continued
さらに、色々とメソッドが用意されています。
$.scrollify.destroy();destroyメソッドは、すべてのScrollifyイベントを削除し、パネルから設定された高さを削除します。
$.scrollify.update();updateメソッドは、パネルの高さと位置を再計算します。
$.scrollify.current();currentメソッドは、現在のセクションをjQueryオブジェクトとして返します。
$.scrollify.disable();disableメソッドは、ページが通常のようにスクロールするように、スクロールスナップの動作をオフにします。
$.scrollify.enable();enableメソッドは、disableメソッドが使用された後、スクロールスナップ動作を再開します。
$.scrollify.isDisabled();isDisabledメソッドは、Scrollifyが現在無効になっている場合はtrueを返し、そうでない場合はfalseを返します。
$.scrollify.setOptions()setOptionsメソッドを使用して、任意の初期化オプションを変更できます。オプションオブジェクトを解析するだけです。
作成したデモページ
デモページはこちら▼
まとめ
scrollfy.jsライブラリを使うと、文字通りスクロールアニメーションを作ることができます。もしご興味がありましたら、ご参考ください😃
