スクロールに合わせて、コンテンツを表示するときのアニメーションサンプルを掲載しています。
Webサイトでよく見かける、スクロールしたらコンテンツがふわっと表示されるあのアニメーション、HTML・CSS・jQueryで簡単に作成できます。
ふわっとした動き以外にも、シュッとスライドインさせたり、回転してコンテンツを表示させたりするアニメーションも紹介しています。
コピペOKなテンプレートも掲載しているので是非ご活用ください。
実装イメージ
今回実装するアニメーションは以下の通りです。
右側の「詳細へ」リンクをクリックすると各アニメーションの詳細へ遷移します。
一度表示されたら表示されたままのため、再度確認したい場合は再読み込みをお願いします。
↓スクロールしてください。
【CSS・jQuery】コンテンツをふわっと表示
スクロールすると、コンテンツがふわっとフェードインで出現します。
上下左右、全ての方向から出現するパターンを掲載しているので、お好みにあわせてご利用ください。
ソースをコピペして、左から出現させたいときは「fadein-left」クラスをつける、といったように対応する方向のクラスをhtmlに指定すると実装できます。
【CSS・jQuery】コンテンツをシュッと表示
スクロールすると、コンテンツがシュッとスライドインで出現します。
上下左右、全ての方向から出現するパターンを掲載しているので、お好みにあわせてご利用ください。
ソースをコピペして、左から出現させたいときは「slidein-left」クラスをつける、といったように対応する方向のクラスをhtmlに指定すると実装できます。
【CSS・jQuery】コンテンツを回転させて表示
スクロールをすると、コンテンツが回転しながら出現します。
X軸・Y軸・時計回り・反時計回りの方向に回転するパターンを掲載しているので、お好みにあわせてご利用ください。
ソースをコピペして、時計回りさせたいときは「rotation-clockwise」クラスをつける、といったように対応する方向のクラスをhtmlに指定すると実装できます。
【CSS・jQuery】コンテンツのぼかしが外れてくっきり表示
スクロールをすると、コンテンツのぼかしがはずれてくっきり表示されます。
ソースをコピペして、「blur」クラスをつけると実装できます。
DXO株式会社では一緒に働く
仲間を募集しています！
DXO株式会社ではWeb開発エンジニア、Webディレクター、Webデザイナーなど様々な職種で一緒に働く仲間を募集しています。
募集要項・福利厚生など、詳しくはDXO株式会社採用サイトをご覧ください。
