webデザイン

【css】鬼滅の刃劇場版サイトみたいな画像切り替え時のぼかし(blur)エフェクトをつける方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

今回は画像の切り替え時にぼかしエフェクトをかける方法とサンプルをご紹介します。
最近劇場版鬼滅の刃の公式サイトでも切り替えに使用していたり、サイト作成時にクライアントからのリクエストでもblur関係が挙がったりしているのでまだブームは続きそうです。
メインビジュアルなどで使えるますしcssのみでお手軽に実装できます。
※IE11ではぼかしエフェクトは対応していなく、フェードエフェクトのみになります。

劇場版鬼滅の刃の公式サイト

参考サイトは以下になります。
Pure CSS Slider – autoplay, kenburns, prev/next, bullets – no js!

HTMLを以下のように設定します。

<div class="wrap_main_visual">
  <div class="back_img src1"><p>切り替え時にぼかしのエフェクト</p></div>
  <div class="back_img src2"><p>PHOTO2</p></div>
  <div class="back_img src3"><p>PHOTO3</p></div>
</div><!-- wrap_main_visual -->

cssを以下のように設定します。
画像にはそれぞれ待機時間(animation-delay)を設定します。opacityで表示非表示を操作するので、そのときにfilter: blur(30px)でぼかしをつけます。

.wrap_main_visual {
	position: relative;
	max-width: 100%;
	height: 90vh;
	margin: auto;
	overflow: hidden;
}
.wrap_main_visual p{
	position: absolute;
	top: calc(50% - 5vh);
	left: 0;
	background: rgba(0,0,0,0.8);
	width: 30%;
	height: 10vh;
	color: #FFF;
	padding: 1.8%;
	text-align: center;
}
.wrap_main_visual .back_img {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	opacity: 0;
	transition: opacity 2000ms ease, transform 24000ms linear;
	background-size: cover;
	background-position: center center;
}
@keyframes kenbernsTR {
	0%{ transform: scale(1); opacity: 0;filter: blur(30px);}
	8.333333333333334% { transform: scale(1); opacity: 1; filter: blur(0px); }
	33.333333333333336% { transform: scale(1); opacity: 1; filter: blur(0px); }
	41.66666666666667%{ transform: scale(1.3); opacity: 0; z-index: 2; filter: blur(30px); }
	66.66666666666666% { transform: scale(1.3); opacity: 0; z-index: 2;filter: blur(30px);  }
	100% { transform: scale(1); opacity: 0 ;filter: blur(0px); }
}
.wrap_main_visual .src1 {
	background-image: url(img/img01.jpg);
	animation: kenbernsTR 24000ms infinite -2000ms linear;
}
.wrap_main_visual .src2 {
	background-image: url(img/img02.jpg);
	animation: kenbernsTR 24000ms infinite 6000ms linear;
}
.wrap_main_visual .src3 {
	background-image: url(img/img03.jpg);
	animation: kenbernsTR 24000ms infinite 14000ms linear;
}

デモ

filter: blur();についてはIE11で対応していないため以下の jsプラグインなどを使用します。

Image Blur Plugin

uhaha

煉獄さんはイケメン、イケボで性格もイイ。無限列車編の戦闘シーン情報量が多すぎて1回見ただけじゃわからなかった。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*