• TOP
  • NOTES
  • コンテンツのスクロール表示サンプル集

NOTES

コンテンツのスクロール表示サンプル集

スクロールした際のコンテンツ表示の仕方のアクション例一覧です。


このエントリーをはてなブックマークに追加

HTML・CSS・jQueryを使ったコンテンツのスクロール表示のアクションサンプルです。
コピペですぐにご使用いただけます。
※右側の「詳細へ」リンクをクリックすると各アクションの詳細へ遷移します。
※一度表示されたら表示されたままのため、再度確認したい場合は再読み込みをお願いいたします。

↓スクロールしてください。

  • 左から
    フェードイン
    右から
    フェードイン
    上から
    フェードイン
    下から
    フェードイン
    詳細へ
  • 左から
    スライドイン
    右から
    スライドイン
    上から
    スライドイン
    下から
    スライドイン
    詳細へ
  • X軸を基準に
    回転
    Y軸を基準に
    回転
    時計周りに
    回転
    反時計周りに
    回転
    詳細へ
  • ぼかしが外れて
    くっきりする
    詳細へ

上下左右からフェードイン

スクロールをするとふわっと出現します。
ソースをコピペして、左から出現させたいときは「fadein-left」クラスをつける、といったように対応する方向のクラスをhtmlで指定すると実装できます。
↓スクロールをお願いします。

上下左右からスライドイン

スクロールをするとシュッと出現します。
ソースをコピペして、左から出現させたいときは「fadein-left」クラスをつける、といったように対応する方向のクラスをhtmlで指定すると実装できます。
↓スクロールをお願いします。

X軸・Y軸・時計回り・反時計回りの方向に回転

スクロールをすると回転しながら出現します。
ソースをコピペして、時計回りさせたいときは「rotation-clockwise」クラスをつける、といったように対応する方向のクラスをhtmlで指定すると実装できます。
↓スクロールをお願いします。

ぼかしが外れてくっきり表示

スクロールをするとぼかしがはずれてくっきりとコンテンツが表示されます。
ソースをコピペして、「blur」クラスをつけると実装できます。
↓スクロールをお願いします。