スクロールアニメーションパーツ集

「HTMLとCSS、JavaScriptのコーディングで悩む時間を減らしたい」という思いから、実際に実装したものをテンプレート化しています。

【Webデザイナーの方へ】
・デザインの参考資料として
・コーダーへの具体的な指示書として

【Webコーダーの方へ】
実装済みのコードをベースに使うことで、コーディング時間を大幅に短縮できます。

作業の効率化に、ぜひお役立てください。

ソースコード（HTML,CSS,JavaScript）は以下の確認方法があります。

1. 「プレビューボタン」下の各コードのボタンをクリック。するとGitHubの該当ページが開きます。
　　Webコーダーの方は、こちらの方が参考にしやすいと思います。
2. 「プレビュー」で右クリックしていただけるとご覧いただけます。
　　とりあえず、コードをコピペして実装したい方、HTMLコードを確認したい方はこちらをご利用ください。
3. コードペンは、埋め込み部分のビューを変更してください。

GSAPを使用したものは別ページをご参照ください。
このページでは、GSAP以外のスライドパーツを載せております。

あわせて読みたい

【JavaScript】GSAPパーツ集 「HTMLとCSS、JavaScriptのコーディングで悩む時間を減らしたい」という思いから、実際に実装したものをテンプレート化しています。 【Webデザイナーの方へ】・デザイン...

【CSS,Vanilla JS】何度でも発火するスクロールアニメーション

CSSでアニメーションを設定できるので、細かい動きを設定できます。

JavaScriptはクラスを付与して発火させるために使用しています。

【CSS,Vanilla JS】スクロールの時、順番に文字を表示（背景のバーが伸びる）

【CSS,Vanilla JS】スクロールの時、順番に文字を表示（横から颯爽と登場　繰り返しなし）

【CSS,Vanilla JS】スクロールの時、順番に文字を表示（文字画像が回転しながら登場　繰り返しなし）

追従バナー（スマホ・タブレットの時、スクロール中は非表示にする）

JavaScriptで実機を判別。
スマートフォンかタブレットの時は、追従バナーはスクロール中、非表示になる。

【Vanilla JavaScript】スクロールすると、写真がサーっと出てくる

【Vanilla JavaScript】スクロールすると背景画像が変わる

【Vanilla JavaScript】スクロールすると、周りの要素が消え、スクロールのコンテンツが切り替わる

【Vanilla JavaScript】スクロールすると、周りの要素が消え、スクロールのコンテンツが切り替わる（写真のみ）

ウィンドウサイズが変わっても、余白をある程度一定になるように調整。

【Vanilla JavaScript】スクロールすると動画が再生される（videoに対応）

【videoタグの設定について】autoplayは抜いておく。念の為poster画像はvideoの属性で指定しておく。

【動画mp4の大きさについて】2-5MB以下にする。重すぎると読み込みに時間がかかるので注意。

【vivus.js】SVGを描くように動かす（矢印）