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