WEBページをリッチコンテンツにする為にCSSでサクッとできると非常に楽でしょう。
そんな時、簡単ポイントを押さえておくだけで、自力で大体の事はできてしまいます。
もちろん、世の中で出回っているライブラリを豊富に使ってもいいですが、WEBページを出来るだけ軽くしたいとか、無駄な処理を入れたくないような場合は、CSS記述をサクッと行なって、簡易に設置出来てしまった方が、効率もいいです。
マウスオーバーで、リンク画像を少し浮かせる。
<img type="img-1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpnLZDessLMggE1uaPOwlHJl0HsYF4HJGNFxasOeeIqyXXvdFIqnhBZGMgELj_6xKY-pcM_SHSGnjQl1dFZLBEQz6p_6bB5-K3b_c4MkGZwrhnSfXR641iFkzJVeQs7jhC-Xzm2sbBSBtzleaOHzeHbcxQ6BD8NDetsfMK2gEX0jr3m4Se8PWv_AF-/s1600/angry-2030006_640.png" alt="angry-2030006_640" width="287" height="300" class="alignnone size-medium wp-image-10680" />
div.div-1{
position:relative;
height:300px;
}
img.img-1{
position:absolute;
display:block;
border:1px solid black;
cursor:pointer;
top:0;
box-shadow:0;
/*アニメーション記述*/
transition-property: all;
transition-duration:0.3s;
transition-timing-function:ease-in-out;
}
img.img-1:hover{
top:-8px;
box-shadow:4px 4px 10px rgba(0,0,0,0.4);
}
下の画像にマウスのカーソルを乗せてみましょう。
解説
ポイントは、ソース内の「アニメーション記述」です。詳細はCSSのリファレンスページなどを見るとパラメータなど理解できると思います。
transition-propertyは、このアニメーションの対象となるCSS命令（top , box-shadowって書いてもいいが、汎用性を考慮してall）
transition-durationは、アニメーションの実行時間
transition-timing-functionは、アニメの挙動
これを流用すると、フォームの送信ボタンをクリックした時に、ボタンをアニメーションさせたり、マウスオーバーで、画像を回転させたり、サイズを変えたり色を変えたり・・・と、汎用性が高く、簡単に記述できる事がわかります。
注意ポイント
hoverなどのイベントで記述するパターンですが、基本記述の側に「top:0」として、元の値を書くのを忘れない様にしましょう。
経験上、うまく動かない場合は、これの書き忘れが多いでしょう。
0 件のコメント:
コメントを投稿