JavaScriptで、背景に使える全面フェードスライダーを作成

  • WebDesign

    • トップページのメインで背景に全面スライダーを配置しているサイトがよくあります。今回は、JavaScriptで、背景に使える全面フェードスライダーを作成

    全面サイズで表示されます。3秒毎に画像が入れ替わります。

    全面サイズで表示

    3秒毎に画像が入れ替わり

    コード

    <ul id="fade-slide-conatner">
    <li class="fade-slider" >
        <img src="images/music001.jpg" alt=""></li>
    <li class="fade-slider" >
        <img src="images/music002.jpg" alt=""></li>
    <li class="fade-slider" >
        <img src="images/music003.jpg" alt=""></li>
    <li class="fade-slider" >
        <img src="images/music004.jpg" alt=""></li>
    <li class="fade-slider" >
        <img src="images/music005.jpg" alt=""></li>
    <li class="fade-slider" >
        <img src="images/music007.jpg" alt=""></li>
    <li class="fade-slider" >
        <img src="images/music006.jpg" alt=""></li>
</ul>
    #fade-slide-conatner{
	width:100vw;
	height:100svh;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center center;
	opacity: 0.8;
	background-size: cover;
	background-color: #272727;
	position:relative;
}
#fade-slide-conatner .fade-slider{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position:absolute;
	opacity: 0;
	visibility: hidden;
}
#fade-slide-conatner ul li.fade-slider:first-child{
	opacity: 0;
}
#fade-slide-conatner .fade-slider img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
    const fadeSlide = document.querySelectorAll('#fade-slide-conatner .fade-slider');

window.addEventListener('load', () => {
	for (let i = 0; i < fadeSlide.length; i++) {
		const times = fadeSlide.length;
		if(i === times -1){
			fadeSlide[i].animate(
				{
					visibility: 'visible',
					filter: ['blur(10px)', 'blur(0)'],
					opacity:[0,1],
					zIndex: '30'
				},
				{
					duration: 1000,
					delay:3000 * i,
					easing: 'ease',
					fill: 'forwards',
				}
			);
			fadeSlide[i].animate(
				{
					zIndex: '-1'
				},
				{
					dulation: 0,
					delay:3000 + 3000 * i,
					fill: 'forwards',
				}
			);   
		}else{
			fadeSlide[i].animate(
				{
					visibility: 'visible',
					filter: ['blur(10px)', 'blur(0)'],
					opacity:[0,1]
				},
				{
					duration: 1000,
					delay:3000 * i,
					easing: 'ease',
					fill: 'forwards',
				}
			);
			fadeSlide[i].animate(
				{
					visibility: 'hidden',
				},
				{
					dulation: 0,
					delay:4000 + 3000 * i,
					fill: 'forwards',
				}
			);
		}
	
		setInterval(() => {
			if(i === fadeSlide.length -1){
				fadeSlide[i].animate(
					{
						visibility: 'visible',
						filter: ['blur(10px)', 'blur(0)'],
						opacity:[0,1],
						zIndex: '30'
					},
					{
						duration: 1000,
						delay:3000 * i,
						easing: 'ease',
						fill: 'forwards',
					}
				);
				fadeSlide[i].animate(
					{
						zIndex: '-1'
					},
					{
						dulation: 0,
						delay:3000 + 3000 * i,
						fill: 'forwards',
					}
				);   
			}else{
				fadeSlide[i].animate(
					{
						visibility: 'visible',
						filter: ['blur(10px)', 'blur(0)'],
						opacity:[0,1]
					},
					{
						duration: 1000,
						delay:3000 * i,
						easing: 'ease',
						fill: 'forwards',
					}
				);
				fadeSlide[i].animate(
					{
						visibility: 'hidden',
					},
					{
						dulation: 0,
						delay:4000 + 3000 * i,
						fill: 'forwards',
					}
				);
			}
		}, 3000 * times);
	}
});
    You may also like