[아임웹 코드] 랜딩페이지에서 기사 혹은 리뷰를 강조할 때 사용할 수 있는 애니메이션

시연 동영상 보기

※ 본 코드는 랜딩페이지에 사용될 수 있도록 섹션에 기본 그리드 해제/좌우 여백 : 180px을 기준으로 사이징된 코드입니다.

<div class="fallenarticlebackground">
<img class="backgroundarticle" src="https://cdn.imweb.me/upload/S2024030547bfb11139291/e02e534f866f0.png">
<div class="fallenarticle">
<img class="article" id="artciel1" src="https://cdn.imweb.me/upload/S2024030547bfb11139291/8504ded89e8f0.png">
<img class="article" id="artciel2" src="https://cdn.imweb.me/upload/S2024030547bfb11139291/4c922b0fe9df7.png">
<img class="article" id="artciel3"src="https://cdn.imweb.me/upload/S2024030547bfb11139291/3c5a72fe3b8d8.png">
<img class="article" id="artciel4"src="https://cdn.imweb.me/upload/S2024030547bfb11139291/0581c28a03039.png">
</div>
</div>


<style>
.fallenarticlebackground{
width:100%;
height: 490px;
position:relative;
}
.backgroundarticle{
position:absolute;
width:100%;
}


.fallenarticle {
position: relative;
width: 90%;
left: 50%;
transform: translateX(-50%);
height: 500px;
}

.article {
position: absolute;
width: 85%;
left: 50%;
transform: translateX(-50%);
display: none; /* 초기에는 보이지 않도록 설정 */
}

#artciel1 {
top: 0px;
}

#artciel2 {
top: 140px;
}

#artciel3 {
top: 220px;
}

#artciel4 {
top: 330px;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
const imagesweb = document.querySelectorAll(".article");

function fadeInweb(indexweb) {
imagesweb[indexweb].style.display = "block";
if (indexweb < imagesweb.length - 1) {
setTimeout(function () {
fadeInweb(indexweb + 1);
}, 1000); // 다음 이미지가 나타나기 전 1초 대기
} else {
setTimeout(function () {
// 모든 이미지가 나타난 후 3초 대기 후 한번에 모두 사라지도록 설정
imagesweb.forEach(function (imageweb) {
imageweb.style.display = "none";
});
setTimeout(function () {
// 3초 대기 후 반복
fadeInweb(0);
}, 0);
}, 2500);
}
}

fadeInweb(0); // 페이지 로드 시 첫 번째 이미지부터 시작
});
</script>