javascript 170425使えそうなスライド①后ろにぼかした画像配置

Posted 2021-05-04

<div class="slider">
	<div data-slide="1" class="slider__slide slider__slide--active">
		<div class="slider__wrap">
			<div class="slider__back"></div>
		</div>
		<div class="slider__inner">
			<div class="slider__content">
				<h1>Slide <br> One</h1><a class="go-to-next">next</a>
			</div>
		</div>
	</div>
	<div data-slide="2" class="slider__slide">
		<div class="slider__wrap">
			<div class="slider__back"></div>
		</div>
		<div class="slider__inner">
			<div class="slider__content">
				<h1>Slide <br> Two</h1><a class="go-to-next">next</a>
			</div>
		</div>
	</div>
	<div data-slide="3" class="slider__slide">
		<div class="slider__wrap">
			<div class="slider__back"></div>
		</div>
		<div class="slider__inner">
			<div class="slider__content">
				<h1>Slide <br> Three</h1><a class="go-to-next">next</a>
			</div>
		</div>
	</div>
	<div class="slider__indicators"></div>
</div>

$main: #777;
$back: #aaa;
$accent: hsl(220,50%,40%);

$sans: 'Open Sans', sans-serif;
$heebo: 'Heebo', sans-serif;

$base: 3vh;

$time: 1800ms;

$ease-out: cubic-bezier(0.260, 0.005, 0.135, 1.000);
$ease-in-out: cubic-bezier(0.785, 0.135, 0.150, 0.860);

body{
	background: $back;
	font-family: $sans
}

.slider{
	position: relative;
	height: 100vh;
	width: 100vw;
	background: $main;
	overflow: hidden;;

	&__wrap{
		position: absolute;
		width: 100vw;
		height: 100vh;
		transform: translateX(100vw);
		top: 0%;
		left: 0;
		right: auto;
		overflow: hidden;
		transition: transform $time/4 $ease-in-out;
		transform-origin: 0% 50%;
		transition-delay: $time/4;
		opacity: 0;
		&--hacked{
			opacity: 1;
		}
	}

	&__back{
		position: absolute;
		width: 100%;
		height: 100%;
		background-size:  auto 100%;
		background-position: center;
		background-repeat: none;
		transition: filter $time/4 $ease-in-out;
	}

	&__inner{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0%;
		background-size: auto 133.3333%;
		background-position: center;
		background-repeat: none;
		transform: scale(0.75);
		transition: transform $time/4 $ease-in-out, box-shadow $time/4 $ease-in-out, opacity $time/4 step-end;
		opacity: 0;
		box-shadow: 0 $base $base rgba(darken($accent,50%),0);
		padding: $base*5;
		box-sizing: border-box;
	}

	&__content{
		position: relative;
		top: 50%;
		width: auto;
		transform: translateY(-50%);
		color: white;
		font-family: $heebo;
		opacity: 0;
		transition: opacity $time/4;
		h1{
			font-weight: 900;
			font-size: $base*3;
			line-height: 0.85;
			margin-bottom: $base/4;
			pointer-events: none;
			text-shadow: 0 $base/8 $base/4 rgba(darken($accent,50%),0.1);
		}
		a{
			cursor: pointer;
			font-size: $base*0.8;
			letter-spacing: $base*0.1;
			font-weight: 100;
			position: relative;
			&:after{
				content: '';
				display: block;
				width: $base*3;
				background: white;
				height: 1px;
				position: absolute;
				top: 50%;
				left: $base*2;
				transform: translateY(-50%);
				transform-origin: 0% 50%;
				transition: transform $time/2 $ease-in-out;
			}
			&:before{
				content: '';
				border-top: 1px solid white;
				border-right: 1px solid white;
				display: block;
				width: $base/3;
				height: $base/3;
				transform: translateX(0) translateY(-50%) rotate(45deg);
				position: absolute;
				font-family: $heebo;
				font-weight: 100;
				top: 50%;
				left: $base*5;
				transition: transform $time/2 $ease-in-out;
			}
			&:hover{
				&:after{
					transform: scaleX(1.5);
					transition: transform $time*2/3 $ease-in-out;
				}
				&:before{
					transform: translateX(#{$base*2}) translateY(-50%) rotate(45deg);
					transition: transform $time*2/3 $ease-in-out;
				}
			}
		}
	}

	&__slide{
		position: absolute;
		left: 0;
		height: 100vh;
		width: 100vw;
//transform: translatex(-100%);
transition: transform $time/3 $ease-in-out;
transition-delay: $time/3;
pointer-events: none;
z-index: 0;

&--active{
	transform: translatex(0%);
	z-index: 2;
	.slider__wrap{
		transform: translateX(0);
		transform-origin: 100% 50%;
		opacity: 1;
		animation: none;
	}
	.slider__back{
		filter: blur(#{$base*0.5});
		transition: filter $time/2 $ease-in-out;
		transition-delay: $time/2 !important;
	}
	.slider__inner{
		transform: scale(0.80);
		box-shadow: 0 $base/3 $base*2 rgba(darken($accent,50%),0.2);
		pointer-events: auto;
		opacity: 1;
		transition: transform $time/2 $ease-in-out, box-shadow $time/2 $ease-in-out, opacity 1ms step-end;
		transition-delay: $time/2;
	}
	.slider__content{
		opacity: 1;
		transition-delay: $time*3/4;
	}
}

&:not(.slider__slide--active) .slider__wrap{
	@keyframes hack{
		0%{
			transform: translateX(0);
			opacity: 1;
		}
		50%{
			transform: translateX(-100vw);
			opacity: 1;
		}
		51%{
			transform: translateX(-100vw);
			opacity: 0;
		}
		52%{
			transform: translateX(100vw);
			opacity: 0;
		}
		100%{
			transform: translateX(100vw);
			opacity: 1;
		}
	}
	animation-name: hack;
	animation-duration: $time/2;
	animation-delay: $time/4;
	animation-timing-function: $ease-in-out;
}

&:nth-child(1) .slider__back, &:nth-child(1) .slider__inner{
	background-image: url(https://unsplash.it/1600/800/?image=931);
//background: #eee;
}
&:nth-child(2) .slider__back, &:nth-child(2) .slider__inner{
	background-image: url(https://unsplash.it/1600/800/?image=929);
//background: #aaa;
}
&:nth-child(3) .slider__back, &:nth-child(3) .slider__inner{
	background-image: url(https://unsplash.it/1600/800/?image=927);
//background: #888;
}
}


}


.sig{
	position: fixed;
	bottom: 8px;
	right: 8px;
	text-decoration: none;
	font-size: 12px;
	font-weight: 100;
	font-family: sans-serif;
	color: rgba(255,255,255,0.4);
	letter-spacing: 2px;
	z-index: 9999;
}

$(document).ready(function(){
	for (var i=1; i <= $('.slider__slide').length; i++){
		$('.slider__indicators').append('<div class="slider__indicator" data-slide="'+i+'"></div>')
	}
	setTimeout(function(){
		$('.slider__wrap').addClass('slider__wrap--hacked');
	}, 1000);
})

function goToSlide(number){
	$('.slider__slide').removeClass('slider__slide--active');
	$('.slider__slide[data-slide='+number+']').addClass('slider__slide--active');
}

$('.slider__next, .go-to-next').on('click', function(){
	var currentSlide = Number($('.slider__slide--active').data('slide'));
	var totalSlides = $('.slider__slide').length;
	currentSlide++
	if (currentSlide > totalSlides){
		currentSlide = 1;
	}
	goToSlide(currentSlide);
})