Parts 07スクロールアニメーション
-
Parts 07 > Design 09作品名:ビデオ表示の演出

前作「Parts 07 > Design 08 作品名:画像表示の演出」の画像を、ビデオに変更して、横からスライドインするアニメーションを作成しました。
デモをみる
-
Parts 07 > Design 08作品名:画像表示の演出

画像が横からスライドインするアニメーションを作成しました。要素の上端が、画面の下端に到達したタイミングで表示が開始されます。
デモをみる
-
Parts 07 > Design 07作品名:パララックス 画像

スクロールに応じて、画像がゆっくりと動くパララックス効果(視差効果)を実装しました。
デモをみる
-
Parts 07 > Design 06作品名:見出し 02

getBoundingClientRectで要素の位置を取得して、ページのスクロールに応じて、要素に対して透明や不透明、ぼかしなどを適用させました。
デモをみる
-
Parts 07 > Design 05作品名:スクロール&ビデオ

ScrollyVideoというライブラリーを利用して、ページのスクロールに合わせて、ビデオが動くページを作成しました。今回のビデオ素材はシンプルなものですが、今後、他の素材でもつくりたいと思います。
デモをみる
-
Parts 07 > Design 04作品名:見出し

画面下の10%の位置で、見出しの文字が、透明から不透明になり始めます。そして画面上の10%で、完全に不透明になるように指定しました。
デモをみる
-
Parts 07 > Design 03作品名:お悩みの声 02

「お悩みの声」のsectionが画面に入ったら、JavaScriptが発動して、背景色を「指定したスクロール量に応じて」黒に変更するように指定しました。また、テキストは「指定したスクロール量に応じて」ぼかし状態からくっきり見えるように指定しました。
デモをみる
-
Parts 07 > Design 02作品名:お悩みの声 01

「お悩みの声」のsectionが画面に入ったら、JavaScriptが発動して、背景色を「指定した秒数で」黒に変更するように指定しました。また、テキストは「指定した秒数で」ぼかし状態からくっきり見えるように指定しました。
デモをみる
-
Parts 07 > Design 01作品名:フェードイン

スクロールに応じて、コンテンツを動的に表示できるフェードイン。今後、パララックス、スクロールドリブンアニメーションなどの方法にも挑戦していきます。
デモをみる