画像のマスク風スライドエフェクト
最終更新日：2021.10.01 [金] 公開日：2020.04.18 [土] カテゴリー：html・CSS・JS備忘
最近とてもよく見る気がするのですが、この表現方法、エフェクトの名前なんて言うのかわかりません。マスクっぽいのが画像の上をスライドして、画像が見えてくるエフェクトです。やり方どうするのかわからなくて試行錯誤して、なんとなくそれっぽくなった？と言う方法の備忘録です。もっと良い方法があるかもですが、私なりの精一杯の試行錯誤。
まずはDEMO
https://chakoiro.net/demo/slide/
仕組みとしては以下の通りです。
用意するもの
・scrolla.min.js
↑これはスクロールで発火させるためのjsです、詳細はちょっと割愛。
JS
|
1 2 3 4 5 6 7 |
<script src="js/jquery.scrolla.min.js" type="text/javascript"></script> <script> $('.animate').scrolla({ mobile: true, once: true }); </script> |
jquery.scrolla.min.jsを読み込んで、そのあと動くように設定します。オプションなどは、公式サイトを。
取り敢えず今回はanimateというクラス名をつけたものがスクロールで発火するようにしています。
CSS
|
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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
.color { width: 30%; overflow: hidden; position: relative; } .color img { width: 100%; height: auto; position: absolute; left: 0; top: 0; } .color img:first-child { z-index: 3; height: 100% !important; } .color :last-child { z-index: 2; position: relative; } .animate__move { -webkit-animation-name: move; animation-name: move; animation-fill-mode: forwards; animation-timing-function: ease; } @keyframes move { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 30% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 70% { -webkit-transform: translateX(102%); -ms-transform: translateX(102%); transform: translateX(102%); } 100% { -webkit-transform: translateX(102%); -ms-transform: translateX(102%); transform: translateX(102%); } } .animate__move2 { -webkit-animation-name: move2; animation-name: move2; animation-fill-mode: forwards; } @keyframes move2 { 0% { opacity: 0; } 30% { opacity: 0; } 50% { opacity: 1; } 50% { opacity: 1; transform: scale(1); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: scale(1.2); } } |
↑見ての通りなかなかの力技で。
HTML
|
1 2 3 4 5 |
<div class="color"> <img src="./img/color.jpg" class="animate" data-animate="move" data-duration="3s" data-delay="0.5s" width="1024" height="683"><!--これがマスク画像になるものです。背景と同じ色にしておきましょう。--> <img src="./img/ph.jpg" class="animate" data-animate="move2" data-duration="3s" data-delay="0.5s" width="1889" height="1390"><!--本来表示させる画像。--> </div><!--color--> |
class=”animate” data-animate=”move2″ data-duration=”3s” data-delay=”0.5s”
これらはscrolla.min.jsの設定です。
data-animate：動かすアニメーションを指定するクラス
data-duration：アニメーションする長さ
data-delay：発火ポイントに入って動き出すまでの待機時間
なんとなくこれでよく見るマスクがスライドして画像が表示されるっぽいのができます。
もっとスマートな方法があるかもなのですが・・・。
コメントを残す