Result
昔Flash等で少し流行した、画像が分割されるアニメーションエフェクトです
今ではCSSだけで出来るようになりました
css
.card {/*親要素*/ border-radius: 16px; width: 360px; height: 360px; background: url(https://picsum.photos/400/300); position: relative; overflow: hidden;}.card:before {/*オーバーレイ*/ content: ""; position: absolute; width: 100%; height: 100%; top: 0; background-color: rgba(0, 0, 0, 0.92);}.card .img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex;}.card .img span {/*4つに分割*/ width: 25%; height: 100%; background: url(https://picsum.photos/400/300); transition: 0.5s;}/*1つずつ画像の表示ポジションを設定してアニメーションを遅延させる*/.card .img span:nth-child(1) { background-position: 0; transition-delay: 0;}.card .img span:nth-child(2) { background-position: 33.33%; transition-delay: 0.1s;}.card .img span:nth-child(3) { background-position: 66.66%; transition-delay: 0.2s;}.card .img span:nth-child(4) { background-position: 100%; transition-delay: 0.3s;}.card:hover .img > span { transform: translateY(-100%);}.card:hover .content { transform: translateY(0%); transition: 1s; transition-delay: 0.1s;} |
html
<div class="card"> <div class="img"> <span></span><span></span><span></span><span></span></div> <div class="content"> <h2>hoge</h2> <h2>huga</h2> <h4>piyopiyo</h4> </div></div> |
空要素が気持ち悪い方には申し訳ありません
