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

スクロールでイベントを発生させる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. - protonet/jque...

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. - Q42/delighters

Intersection Observerを使ったvanilla js script

わざわざ、javascriptライブラリを使わなくても、Intersection Observerでいい時代になりました。

How To Make A Scroll-Triggered Animation With Basic JavaScript | CSS-Tricks
Scroll-triggered events are very useful. There are libraries to create them but let's look at how to do it ourselves wit...

まとめ

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

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

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

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

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