HTML・CSS・jQueryを使ったコンテンツのスクロール表示のアクションサンプルです。
コピペですぐにご使用いただけます。
※右側の「詳細へ」リンクをクリックすると各アクションの詳細へ遷移します。
※一度表示されたら表示されたままのため、再度確認したい場合は再読み込みをお願いいたします。
↓スクロールしてください。
上下左右からフェードイン
スクロールをするとふわっと出現します。
ソースをコピペして、左から出現させたいときは「fadein-left」クラスをつける、といったように対応する方向のクラスをhtmlで指定すると実装できます。
↓スクロールをお願いします。
上下左右からスライドイン
スクロールをするとシュッと出現します。
ソースをコピペして、左から出現させたいときは「fadein-left」クラスをつける、といったように対応する方向のクラスをhtmlで指定すると実装できます。
↓スクロールをお願いします。
X軸・Y軸・時計回り・反時計回りの方向に回転
スクロールをすると回転しながら出現します。
ソースをコピペして、時計回りさせたいときは「rotation-clockwise」クラスをつける、といったように対応する方向のクラスをhtmlで指定すると実装できます。
↓スクロールをお願いします。
ぼかしが外れてくっきり表示
スクロールをするとぼかしがはずれてくっきりとコンテンツが表示されます。
ソースをコピペして、「blur」クラスをつけると実装できます。
↓スクロールをお願いします。