ふわっと表示させるスライドショー的なものを作る
ふわっと表示させるスライドショー的なものを作る
今回は3つのコンテンツを一定の時間ごとに表示していくスライドショーを作りたいと思います。
コード
html
<div class="slide" data-slide="">
<div data-slide-item="" class="slide__item slide__item--first">1</div>
<div data-slide-item="" class="slide__item slide__item--secound">2</div>
<div data-slide-item="" class="slide__item slide__item--third">3</div>
</div>
scss
.slide {
position: relative;
&__item {
width: 100%;
height: 50px;
&--first {
position: absolute;
top: 0;
left: 0;
background: #ff0000;
}
&--secound {
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #ff00ff;
}
&--third {
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #00ff00;
}
}
}
@keyframes opacity-start {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes opacity-end {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
javascript
const slide = document.querySelector('[data-slide]');
const slideItem = document.querySelectorAll('[data-slide-item]');
let current = 0;
const slideImage = function(){
slideItem[current].style.animation = "opacity-start 2s linear";
slideItem[current].style.opacity = "0";
if (current < 2) {
current += 1;
} else {
current = 0;
}
slideItem[current].style.animation = "opacity-end 2s linear";
slideItem[current].style.opacity = "1";
}
setInterval(slideImage, 5000);
Author And Source
この問題について(ふわっと表示させるスライドショー的なものを作る), 我々は、より多くの情報をここで見つけました https://qiita.com/w-tdon/items/69556a2cf14fcaeb2a2e著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .