• TOP
  • NOTES
  • コンテンツのアニメーションサンプル集

NOTES

コンテンツのアニメーションサンプル集

コンテンツに動きをつけるアクション例一覧です。


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

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

一定でスライドし続ける

一定のスピードでコンテンツがスライドし続けます。
サンプルのように波線の画像を使うと波打つようなアニメーションにすることができます。

ぱたぱたと4段階で開いていく

4段階でコンテンツが開いていきます。
メインビジュアルにこのアニメーションを実装するとさらに魅力的なサイトになると思います。
また、画像も4分割されたものを選ぶとよりぱたぱたと開いていく感じが増します。

円形に広がる

中央から円形にコンテンツが広がります。
よりそのコンテンツを目立たせてくれるアニメーションです。