Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【マウスを乗せるとふわ~っと浮き出る画像】

f:id:wp-lesson:20170321094325j:plain

ブログ記事のサムネイルやギャラリーに
マウスを乗せると、ゆっくり画像が動く。
 
そんなエフェクト見たことありませんか?
 
原理は意外と簡単です。
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