ホームページで写真をぬるっと表示するCSSアニメーション

ホームページで写真を左から右とか上から下とか、とにかくぬるっと表示させたい、紙芝居みたいな感じ？といえばいいのか、いまいち伝わりにくいですが上の例みたいな表示をCSSのみで行う方法を紹介したいと思います。

1. 実装方法
2. CSSの「clip-path:polygon」
3. おまけ
4. まとめ

実装方法

いきなりやり方から。

<img src="○○.jpg" id="nuru-test" />

@keyframes nuru{
0%{clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)}
15%{clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)}
65%{clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)}
80%{clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)}
100%{clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)}
}
#nuru-test{
animation: nuru 8s linear 0s infinite;
}

こんだけで写真がぬるっと表示されるようになりました。今回は右から左にぬるっと出てきて、しばらくすると今度は右から左にぬるっと消えるようにしています。

CSSの「clip-path:polygon」

普通にwidthをアニメーションすると写真がぐちゃッとつぶれた状態からどんどんひきのばされていくと思います。やってないんで想像ですがたぶんそうなります。

なのでここで使うのがCSSの「clip-path:polygon」というものです。

「clip-path:polygon」は写真のどこからどこまでを切り抜いて表示するかを設定できます。上から50％までを切り抜いて表示しちゃおう、とかそういう感じです。

ということでこれとアニメーションを一緒に使えばちょっとずつ切り抜く領域を増やして、結果、見た目的にはぬるっと写真が表示されちゃう、というわけです。

clip-path:polygonの中身について

「clip-path:polygon」は4つの数字をとります。左上のX座標Y座標、右上のX座標Y座標…と言葉にするとややこしい…。

例を見る方が手っ取り早いんでサクッとサンプルを見ていきましょう。

サンプル：ひし形

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

おまけ

「filter:blur」を使ってぼかしたりしてもうちょいかっこつけるとこんな感じに。これを使ってスライダーとか作るとかっこよさそう。

まとめ

写真を左から右にぬるっと表示させるようなCSSを紹介しました。

「clip-path:polygon」とアニメーションを組み合わせることでけっこう簡単に実装できちゃうんですね。

ちなみにこのやり方だと画像にしかできないので、例えばマップやテキストなんかをぬるっと表示させる場合は、やっぱりbeforeやafter要素を使って後ろのマップやテキストを隠しておいてよき塩梅でスライドさせる、っていう原始的なやり方になるんだろうなと思います。

参考にしてくださいね。