freefuntimes今回は画像にマスクをかけてスライドが切り替わるたびにカーテンのようにマスクが両サイド開いていくSwiperスライダーを実装していく。やっていることとしては、前回の記事にCSSで擬似要素をもう1つ追加したくらいだ。前回の記事はこちらやっていることとしては、画像に擬似要素で色のついた背景を作り上に重ね、スライドがアクティブになっている時は背景がなくなるように設定し、非アクティブになっている時は背景が重なった状態になるよう設定した。あとは、背景がある時とない時の状態に対してtransitoinで任意の値を指定することで、今回のように、スライドが切り替わるたびにカーテンのように右側から左側に開いていくようなアニメーションを実現することができる。src="style.js"></script></body></html>HTMLの記述は前回の記事と同様のため、解説は省略させていただく。10px;}今回変更・追加している記述は下記にあたる。0;}beforeで左半分のマスクを、afterで右半分のマスクを作成している。あとは前回の記事同様の考え方で、左側のマスクはleftを0に、右側のマスクはrightを0にすることで、スライダーがアクティブになった時にカーテンのように両側が開くようなアニメーションが完成する。},})JavaScriptは前回の記事と同様のため解説は省略する。(2)人気ブログランキングこのサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。