【マウスを乗せるとふわ~っと浮き出る画像】
ブログ記事のサムネイルやギャラリーに
マウスを乗せると、ゆっくり画像が動く。
そんなエフェクト見たことありませんか?
原理は意外と簡単です。
javascriptとか難しそうなプログラムを
使わなくてもスタイルシートだけでOK。
例えばサムネイルの部分のHTMLが
次のような構造になっている場合。
▼HTML
<li class="thumb"> <a href="..."><img src="..."></a> </li>
▼CSS
.thumb img { -webkit-transition: 3s; transition: 3s; } .thumb img:hover { -webkit-transform: rotate(1deg) scale(1.2); transform: rotate(1deg) scale(1.2); }
【解説】
通常時のサムネイルに transition を指定します。
transition はCSS3のプロパティで、対象となる
HTMLタグのスタイルが変化するときに指定した
時間をかけてゆっくり変化させる補助的な役目を
します。
これがCSSを使ったアニメーションに共通する
原理です。
CSS3非対応ブラウザへの互換性のため、
- webkit- 付きのスタイルを併記しておきます。
次に、「マウスが乗ったとき」を表す :hover に
回転を表す rotate(角度deg) と、
拡大を表す scale(倍率) を重ねて指定します。
ここでは回転角を1度、倍率を1.2倍にしました。
変化量はわずかですが、3秒かけてゆっくりと
変化するので、
「あ!何か動いてる・・・」
というのはわかると思います。
あまり激しく動かすと目立ちすぎるので、
さりげなく使うのがポイントです。
自宅でプロのマンツーマンレッスン
CODEMYのマンツーマンレッスンでは、WordPressや
HTML5やCSS3を基礎からしっかり学びたい方のために、
コース学習の中でカリキュラムをご提案致します。
▼無料相談をお気軽にご利用ください。
http://codemy-lesson.office-ing.net/contact
━━━━━━━━━━━━━━━━━━
講師が執筆した本が発売されました
━━━━━━━━━━━━━━━━━━
『WordPressのツボとコツがゼッタイにわかる本』
▼Amazonで概要を見る
http://amzn.to/2nd7Ia5
『ホームページ作成のツボとコツがゼッタイにわかる本』
▼Amazonで概要を見る
http://amzn.to/2bXJkbs
━━━━━━━━━━━━━━━━━━
CODEMYのオンラインレッスン
━━━━━━━━━━━━━━━━━━
【1】自宅でマンツーマンレッスン
http://codemy-lesson.office-ing.net/
知りたいことだけ学べる個人レッスンです。
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
HTML/CSS/JavaScriptの基本が身に付くレッスンです。
↓無料体験はこちら
http://bit.ly/2hw7mIy