これは素敵。ギャラリーなど画像のホバーエフェクトやクリックイベントに利用したいエフェクトサンプル集 – 『animation』
画像にホバーした時や、ロード・クリック時などに適応したいアニメーションエフェクトまとめです。
クリックアニメーション
画像をクリックすることがトリガーとなってアニメーションが始まるサンプルです。
Card Expansion Effect with SVG clipPath
画像をクリックすると、アニメーションが発火して、画像に紐付いたコンテンツが展開して表示されます。
デモは４つ用意されていますが、どれもモーションが美しくなめらかです。
Animated Grid Layout
サムネイルをクリックすると、それに紐疼いたコンテンツが読み込まれ、アニメーションを伴って表示されます。
ホバーエフェクト
image hover 63 effects
63のホバーエフェクト。
Image Tilt Effect
ホバーするとチルトエフェクト(マウスの位置に応じて画像に傾きを与える)を発生させます。
オプションが豊富で、デモで違いをグリグリ動かして試してみることができます。
Hover Effect Ideas
キャプション付き画像の様々なホバースタイルのサンプル集。
それぞれにぴったりなエフェクト名がつけられていて、ソースをダンロードすれば、クラスを該当要素に記述すれば簡単にエフェクトを実装できる。
IMAGE CAPTION HOVER ANIMATION
キャプションを伴ったシンプルで簡単なものだけになりますが、
どこにでも使える凡庸性があり、拡張したりアレンジするのにちょうどいいです。
ihover
いろいろな方がお世話になっているか思いますが、なんといってもコレクションの量が豊富です。
そして、アニメーションクオリティも高く、どれもどこかで使ってみたい気になります。
オーソドックスな矩形のものと、あまり見かけないサークル状のインタラクションがコレクションされています。
該当のクラスを付与するだけでアニメーションを実装できるので、簡単で、デモにも丁寧にソースコードが掲載されているので、安心です。
imagehover.css
キャプションを伴ったシンプルなエフェクトです。
無料版でも十分ですが、種類や個性的なエフェクトが魅力な有料のバージョンも用意されています。
Hover.css
豊富なボタンエフェクトがコレクションされていますが、単純にリンクを表お元したいときなど画像に使ってみるのもいいと思います。
Anicollection
こちらもボタンエフェクトの豊富なコレクションですが、」画像に使ってみるのもいいでしょう。
Caption Hover Effects
フラットな配色やデザインのサムネイルにぴったりな、エフェクト集です。
CSS Image Hover Effects
キャプションを伴った、シンプルで実装しやすいエフェクト集。
新しいfilter系プロパティを使ったエフェクトも用意されています。
おわります。
share
ー
tag
ー
-
previous
ー意外と知らないけど知っておきたい。内包するコンテンツの大きさに応じて要素の幅を可変させるレスポンシブテクニック -『CSS』
-
next
ーlightbox系の決定版かも、jQuery非依存でマルチデバイス対応のオールインワンな「lightgallery.js」 -『plug-in』
