お問い合わせはコチラから

スクロールでイベントを発生させるjsライブラリ

サイト運営

スクロールに合わせて要素が動く、動きのあるページを作るときにはjavascriptの助けが必要になります。

要素をjavascriptで監視して、画面に表示されたらイベントを発生し、classの追加や削除を行うことで動きのあるページを実現できます。

スクロールで要素の検出をして、DOMの操作を行うのは、画像のLazyloadなどをイメージするとわかりやすいと思います。

Waypoints

waypointsはリリースパッケージにvanilla js版とjquery版が両方含まれています。

検索して出てくる例はほとんどがjquery版なので、実際使うのはjquery版がおススメです。

jQuery版のファイルサイズは、8.82 KBです。inviewと比べてサイズが大きいです。

更新は止まっています

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js" integrity="sha512-CEiA+78TpP9KAIPzqBvxUv8hy41jyI3f2uHi7DGp/Y/Ka973qgSdybNegWFciqh6GrN2UePx2KkflnQUbUhNIA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

WordPressで使う場合のサンプルスクリプト

function call_waypoint_scrips() {
  //waypointスクリプトの呼び出し
  wp_enqueue_script( 'waypoint-js', get_stylesheet_directory_uri() . '/assets/js/jquery.waypoints.min.js', array('jquery-core'), false, true  );
  //実行コードの記入
 $data =<<<EOF
(function($) {	
	
$('セレクタ').waypoint(function(direction){
    var activePoint = $(this.element);
    if (direction === 'down') { //scroll down
        activePoint.addClass('active');
    }
    else{ //scroll up
        activePoint.removeClass('active');
    }
},{offset : '95%'});

})(jQuery);
EOF;
	
  wp_add_inline_script( 'waypoint-js', $data, 'after' ) ;
}
add_action( 'wp_enqueue_scripts', 'call_waypoint_scrips' );

jquery.inview.js

waypointsと同じく人気のあるjQueryライブラリです。

ファイルサイズが1.4KBと軽量です。

反面、機能はwaypointsと比べて少ないです。

検索すると結構使用例が出てくるので使い方で困ることもないと思います。

更新は止まっています

GitHub - protonet/jquery.inview: A jQuery plugin that adds a bindable 'inview' event for detecting when an element is scrolled into view.
A jQuery plugin that adds a bindable 'inview' event for detecting when an element is scrolled into view. - GitHub - protonet/jquery.inview: A jQuery plu...

In-view.js

inview.jsと名前が似ていますが、別物のvanilla jsライブラリになります。

脱Jqueryの人はこちらを使う方がいいのかもしれません。

更新は止まっています

in-view.js
Get notified when a DOM element enters or exits the viewport.

scroll-out

IE11+のモダンブラウザ向け(古いブラウザは未対応)の最新のライブラリです。

ScrollOut
Effects and CSS Vars on Scroll!

sal

モダンブラウザ向け(古いブラウザは未対応)の最新のライブラリです。

Sal - Lightweight scroll animation library
Performance focused, lightweight JavaScript scroll animation library

delighters.js

ソースを見るととてもとても短いです。

モダンブラウザ向け(古いブラウザは未対応)の最新のライブラリだと思いますが、Browser compatibilityが不明なので使用する場合は要注意です。

GitHub - Q42/delighters: Add CSS animations to delight users as they scroll down.
Add CSS animations to delight users as they scroll down. - GitHub - Q42/delighters: Add CSS animations to delight users as they scroll down.

まとめ

個人的な感想では、アニメーションとセットになっている最新のjavascriptライブラリは使用しない方が幸せな気がしています。

業務で使う場合は、安定感のあるwaypointsを使うのが一般的だと思いますが、それでも多機能がゆえにサイズが大きい欠点があります。

そこまで機能はいらないよという場合は、jquery.inview.jsを使うことや対応ブラウザを考慮して他のライブラリを考えてもいいかもしれません。

タイトルとURLをコピーしました