webサイト制作の勉強|2018年9月クラス用ブログ

webサイト制作の勉強に関する解説ブログです。

スクロールアニメーション「SCROLL TRIGGER」の実装

ページのスクロールと連動して文字や画像に様々なエフェクトで要素が表示されていくスクロールアニメーション、Javascriptプラグイン「SCROLL TRIGGER」
jQuery不要で動くので動作も軽く、比較的簡単に設定できます。




ScrollTrigger - Scroll based animations with ease

github.com

on-ze.com



デモページ

https://yachin29.com/school/box-scroll/sample.html




さらに、最近よく見かける斜めや曲線の区切り線をSVGで制作し、コンテンツ間の区切り線にしてみましょう。

plusgraph-ca.jp

www.apiajapan.com

www.taguchi.co.jp