東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

スクロール時にアニメーションを実装できるScrollTrigger.js

2017.12.22 Posted by

02

こんにちは、ウェブラボ技術メモです。

今回は、画面スクロール時のアニメーション「ScrollTrigger.js」を紹介します。

まずデモページはこちら

■概要

スクロール時にアニメーションさせたい要素が表示範囲に入っているか、いないかを判定しクラスの付け替えをしてくれるプラグインです。

■実装方法

1. まずプラグインをダウンロードします。(ScrollTrigger.min.js)

2. 以下を記述(読み込みの記述とリセット)

3. HTMLでアニメーションさせたい要素に「data-scroll」を記述します。

4. cssでアニメーションを作成し完成!

HTMLにdata-scrollのみ記述した場合、デフォルトでは.invisibleと.visibleクラスが付与されます。

任意のクラスにする場合は以下のように記述します

上記以外にも様々なオプションがあります!詳しくはこちらをみてくださいね!

以上、クリエイターズメモでした。

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278