JavaScript無しで画像をロールオーバーアニメーションさせるときのコツ
- off / on 画像を絶対配置で重ねる
- :hover は画像をネストする親要素に指定
- :hover で z-index を逆転させる
- opacity で滑らかに切り替えてるように見せる
- PC / タッチデバイス それぞれのコードが必要かも（後述）
要点とコード
共通HTML
1 2 3 4 5 6 7 8 9 | <dl> <dt> <a href=""> <img src="images/nav_01.jpg" alt=""> <img src="images/nav_01_o.jpg" alt=""> </a> </dt> <dd>テキスト</dd> </dl> |
共通SCSS / フェード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | dl { width: 200px; text-align: center; } dt { height: 200px; position: relative; img { position: absolute; left: 0; top: 0; transition: 0.4s; border-radius: 50%; &:first-child { z-index: 9; @include opacity(1); } &:last-child { z-index: 1; @include opacity(0); } } &:hover { img { &:first-child { z-index: 1; @include opacity(0); } &:last-child { z-index: 9; @include opacity(1); } } } } |
一回転
1 2 3 4 5 6 7 8 9 10 11 12 13 | #roll { img { &:first-child {transform: rotate(0deg);} &:last-child {transform: rotate(0deg);} } &:hover { img { &:first-child {transform: rotate(180deg);} &:last-child {transform: rotate(180deg);} } } } |
縦回転
1 2 3 4 5 6 7 8 9 10 11 12 13 | #rotateX { img { &:first-child {transform: rotateX(0deg);} &:last-child {transform: rotateX(180deg);} } &:hover { img { &:first-child {transform: rotateX(180deg);} &:last-child {transform: rotateX(0deg);} } } } |
横回転
1 2 3 4 5 6 7 8 9 10 11 12 13 | #rotateY { img { &:first-child {transform: rotateY(0deg);} &:last-child {transform: rotateY(180deg);} } &:hover { img { &:first-child {transform: rotateY(180deg);} &:last-child {transform: rotateY(0deg);} } } } |
面倒な点
親要素の高さをピクセル固定して画像を絶対配置させるため、高さが成り行きで変化せずレスポンシブ対応が困難。
従ってレスポンシブサイトで使う場合には、PC用 / タッチデバイス用 それぞれのhtmlとcssを書き、メディエクエリかブレークポイントで表示を切り替えるのがベター。
コメントを投稿する