ちょっと差がつく？コピペも可！CSSで”スライス”ホバーエフェクト（時間差効果付き）
posted : 2018.12.09
こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。
先日codepenを眺めていたら、ちょっとイイ感じ＆比較的手軽に実装できるホバーエフェクトがあったのでご紹介。
ホバー時にスライスされたエリアが互い違いに出現するCSSエフェクト
たまーに海外サイトなんかで見かけるエフェクトです。
スライス分割されたエリアが互い違いの方向から現れるエフェクトなんですが、意外と簡単に実装できるんですね。
言葉だとわかりにくいので早速サンプルで試してみて下さい。
本家のエフェクトは二枚の画像をホバー時にスライスエフェクトで切り替えるというもの。そちらの方がコードも少し長めになります。
ただどちらかというと単純なホバーエフェクト（ホバー状態を表すだけ）で実装するケースが多いと思うので、そんな感じにカスタマイズしました。
ついでに時間差効果も付けて少しキャッチーにしてみました。
コピペも可能！コード詳細（該当部分のみ抜粋）
簡単ですが、該当部分のコードのみ抜き出してみましょう。
基本的にはこの構造でコピペすれば動くはずです。
HTML
CSS
CSSは改めてみるとちょっと長いですが汗
でもやってることは割と単純です。
ざっくりいうと分割する分だけ用意した細長いdiv要素を画像コンテナぴったりに収まるように配置していくだけ。
時間差効果も付けることでそこそこ目を引く演出になったと思います。
多用するにはやや冗長な効果かもしれないですが、キャッチとしてポイントで使うには良いかも。
Sass / Pugでコードをコンパクトに
基本的にCSSはSassで書くことが多い僕ですが、今回はHTMLもPugで書いてみました。
メタ言語で書くことでよりコンパクトに、かつメンテナンスもしやすくなってる（ハズ）なので、コンパイル環境が整っている方はこちらを参考にして頂くと宜しいかと。
Pug
.slicedFx
a(href="#")
img(src="http://bit.ly/2QkPXZn")
- var sliceNum = '5' //分割数
// for文で分割数分だけスライス用DIVを書き出し
- for (var i = 0; i < sliceNum; i++)
.slice
Sass(SCSS)
$sliceNum : 5; //分割数 $sliceWidth : percentage(1 / $sliceNum); $delayTime : 70ms; //時間差 .slicedFx { position : relative; width : 250px; height : 250px; &::after { position : absolute; content : 'JUST HOVERED!'; top : 50%; left : 50%; transform : translate(-50%,-50%); font-size : 0.8em; color : #FFF; pointer-events : none; opacity : 0; transition : .5s opacity; } a , img { display : block; width : 100%; } .slice { position : absolute; top : 0; width : $sliceWidth; height : 100%; background : #303030; opacity : 0; transition : .5s all ease-in; } .slice:nth-of-type(odd) { transform : translateY(2em) } .slice:nth-of-type(even) { transform : translateY(-2em) } // for文で分割数分だけスライス用DIVのスタイルを書き出し // 加えて時間差効果の計算も制御 @for $i from 1 through $sliceNum { .slice:nth-of-type(#{$i}) { left : ($i - 1) * $sliceWidth; transition-delay : ($i - 1) * $delayTime; } } &:hover .slice { transform : translateY(0); } &:hover .slice , &:hover::after{ opacity : .9; } }
分割数を変更したい→Pug / Sassの変数を一か所ずつ書き換える
分割数をサンプルの5から10にしたい場合などは、上記コードの変数「sliceNum」をそれぞれ10にしてやるだけ。
他の部分、つまり書き出すスライス用DIV数（HTML）やスライスの横幅（CSS）などは変数を使用した計算を行った上でコンパイルされます。
時間差をもっとゆっくり（or速く）したい→Sassの変数を一か所書き換える
時間差のコントロールもSass側で変数「delayTime」を書き換えるだけでOK。
時間差が必要なければ値を「0」にしてやるといいです。
Pugで書かれたHTMLはcodepenでよく見かけるんですが、今回試してみて思った以上に書きやすかったです。
複雑なことをしないのであればSassよりも学習コストが低いかも。
その他のバリエーション
最後にちょっとしたバリエーションもご紹介。
ちょろっとコードを変えるだけでも結構印象が変わります。
スライス方向が横
縦横のコードを入れ替えてみました。
スライス効果の表示領域を画像コンテナ内に限定
コンテナである「slicedFx」クラスに overflow:hidden; を指定してみました。
周囲の要素を邪魔しないので、場合によってはこちらの方が好ましい場合もあるかもしれません。
border-radiusもかけるとより領域内でのエフェクト感が増しますね。
領域を円形に、上から下に垂れ幕が下がるような効果
こちらもコンテナである「slicedFx」クラスに overflow:hidden; を指定、border-radiusを50％として正円に。
各スライスの開始位置やアニメーション速度も調整しています。
ここまで来るとかなり印象変わりますね～。
border-radiusでさらに自由に
border-radiusの可能性を感じた記事にならって、領域の形を有機体にしてみました。
うーん有機体。
こんな感じで自由に遊んでみると、かなり印象が変わったり変わらなかったりするので楽しいです。
※ちなみにborder-radius系のサンプルはホバー領域の調整等、細部の調整をしておりません（サンプルですから！）
そんなわけで長くなりましたがどなたかの参考になればこれ幸い。
