JSとCSS3を使って画像にブラー効果をかける
2016.10.25 Posted by Coding_team
こんにちは、すっかり秋めいてきましたが、気温なのか、花粉なのか、
おかげで鼻水が止まりません。ウェブラボ技術メモです。
さて、今回はCSSやJSを使用して作成されたエフェクトを共有、公開するWebサイト「codrops」で
公開されていたJSとCSS3を使ったホバーエフェクトをご紹介します。
これまでのようにJSを読み込ませるだけだったり、CSSを数行書けばできる！というものでは無いので
コードの紹介は省きますが、デモを作成したのでこちらをご覧ください。
※透明度を下げると動きとぼやけた感じで少し酔ってしまうので、最後の1つだけ透明度をさげたデモにしてあります。
マウスで画像をグリグリと触ってみてもらうとわかると思いますが
マウスの位置に合わせて画像が傾くような効果が現れます。
画像ギャラリーなどに使っても面白いですし
大きく表示するような画像で使ってもインパクトがあって面白いと思います。
デモのように、オプションを変更する事で、また違った印象を与える事もできますので
下記URLを参考に、挑戦してみてはいかがでしょうか。
関連記事こちらの記事も合わせてどうぞ。
