拡大&フェードインのスライダーをcssのみで ― https://kihara.coresv.com/2019/01/30/165/I log.

拡大&フェードインのスライダーをcssのみで

 拡大しながらフェードインするスライダーをcss(scss)で。

 スライダーをcssで作るのはいいけど、タイミングをずらすのが面倒…え、だっていきなりスライド増やしてとか言うでしょ…? 言うでしょ…? と思って、cssではなく変数でどうにかしたかった。

 増やされたら困るくらいきっちり作ったものは、絶対増やされる…。マーフィーの法則が起こるので、できるだけ増えたり減ったりした際の労力を減らしたい。

考え方

 overflow:hiddenをつけたボックスの中に画像を入れたdivを入れる。

内側のdivには同じアニメーションをつけてループさせるが、一つ一つdelayでずらす。

その際、枚数/1枚あたりの秒数を変数としてセットする。そしてキーフレームの%やdelayをつける中身をごにょごにょする。

Pug

 特に必要のないmixin…。

mixin slide(num)
div(class="slide_item slide_"+num)
	img(src="./img/img_"+num+".jpg", alt="")

.slide
	+slide('01')
	+slide('02')
	+slide('03')

scss

$slideNum: 3;
$timer: 8s;
$step1: 100% / $slideNum / 2;
$step2: 100% / $slideNum;
$step3: 100% / $slideNum * 3;

@keyframes anime {
	0% {
		opacity: 0;
		z-index: 10;
	}
	#{$step1} {
		opacity: 1;
	}
	#{$step2} {
		opacity: 1;
	}
	#{$step3} {
		opacity: 0;
		transform: scale(1.2);
		z-index: 9;
	}
	100% {
		opacity: 0;
	}
}

.slide {
	height: 100%;
	overflow: hidden;
	position: relative;
	width: 100%;

	.slide_item {
		-webkit-animation: anime $timer*3 0s infinite;
		animation: anime $timer*3 0s infinite;
		display: none;
		height: 100%;
		opacity: 0;
		position: absolute;
		width: 100%;
		z-index: 10;
	}

	@for $i from 1 to $slideNum {
		.slide_item:nth-of-type(#{$i+1}) {
			-webkit-animation-delay: $timer * $i;
			animation-delay: $timer * $i;
		}
	}
}

ついでのログ

 さっそくサボってたのですが、この2ヵ月でいろいろあった。

 このブログのテーマをこれから改造していきたかったのに、PCの故障/修理/初期化により最初から作り直すことになりました。
 このデザイン、キャプチャとっとこ…。

 次はvueをふんだんに使ったびゃーーーーんって感じのテーマにしたいけど、このエディター画面っぽいテーマもお気に入りなので悩み中です。

 そして、atomエディターからVSCodeに乗り換えました。

 それについてはまた別の記事で。


categories

実装メモ

tags

Update log

公開:2019/1/30@9:43