728x90
🎞 슬라이드 이펙트 - 트랜지션 효과
📌 transition 효과란 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것입니다.
슬라이드 이펙트 - 트렌지션 효과 완성⭐️
HTML
전체적인 틀을 짜주는 것입니다.
<body class="img01">
<header id="header">
<h1>javascript Slider Effect01</h1>
<p>슬라이드 이펙트 - 트랜지션 효과</p>
<ul>
<li class="active"><a href="sliderEffect01.html">1</a></li>
<li><a href="sliderEffect02.html">2</a></li>
<li><a href="sliderEffect03.html">3</a></li>
<li><a href="sliderEffect04.html">4</a></li>
<li><a href="sliderEffect05.html">5</a></li>
<li><a href="sliderEffect06.html">6</a></li>
<li><a href="sliderEffect07.html">7</a></li>
</ul>
</header>
<!-- header -->
<main id="main">
<section id="sliderType01">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider"><img src="../assets/img/effect_bg06.jpg" alt="이미지1"></div>
<div class="slider"><img src="../assets/img/effect_bg012.jpg" alt="이미지2"></div>
<div class="slider"><img src="../assets/img/effect_bg020.jpg" alt="이미지3"></div>
<div class="slider"><img src="../assets/img/effect_bg018.jpg" alt="이미지4"></div>
<div class="slider"><img src="../assets/img/effect_bg05.jpg" alt="이미지5"></div> <!-- 슬라이드에 들어갈 이미지를 넣어줌 -->
</div>
</div>
</section>
</main>
<!-- main -->
<footer id="footer">
<div class="modal__wrap"> <!-- 화면 위에 화면창 만들어주기(부가적인 것 가능) -->
<div class="modal__btn">소스보기</div>
<div class="modal__cont">
<div class="modal__box">
<div class="title">
<span class="dot" aria-label="true"></span>
<div class="tabs">
<div class="active">
<span class="favicon" aria-label="true">
<svg width="16" height="16" viewBox="0 0 18 18" fill="none" aria-hidden="true" focusable="false">
<circle cx="9" cy="9" r="9" fill="#fff"></circle>
<path d="M18 9C18 13.9706 15.4688 3.09375 9 10.125C2.53125 17.1562 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="orange"></path>
<path d="M18 9C18 13.9706 14.9062 0.84375 8.29688 6.1875C1.6875 11.5312 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="yellow"></path>
</svg>
</span>
<em>JAVASCRIPT</em>
<span class="close">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
<path d="M12.5 3.5L3.5 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M12.5 12.5L3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
<div>
<span class="favicon" aria-label="true">
<svg width="16" height="16" viewBox="0 0 18 18" fill="none" aria-hidden="true" focusable="false">
<circle cx="9" cy="9" r="9" fill="#fff"></circle>
<path d="M18 9C18 13.9706 15.4688 3.09375 9 10.125C2.53125 17.1562 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="orange"></path>
<path d="M18 9C18 13.9706 14.9062 0.84375 8.29688 6.1875C1.6875 11.5312 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="yellow"></path>
</svg>
</span>
<em>HTML</em>
<span class="close">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
<path d="M12.5 3.5L3.5 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M12.5 12.5L3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
<div>
<span class="favicon" aria-label="true">
<svg width="16" height="16" viewBox="0 0 18 18" fill="none" aria-hidden="true" focusable="false">
<circle cx="9" cy="9" r="9" fill="#fff"></circle>
<path d="M18 9C18 13.9706 15.4688 3.09375 9 10.125C2.53125 17.1562 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="orange"></path>
<path d="M18 9C18 13.9706 14.9062 0.84375 8.29688 6.1875C1.6875 11.5312 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="yellow"></path>
</svg>
</span>
<em>CSS</em>
<span class="close">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
<path d="M12.5 3.5L3.5 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M12.5 12.5L3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</div>
<span class="plus">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
<path d="M2.5 8H13.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M8 2.5V13.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div> <!-- 새로운 창 구조 정해주기 (밑에는 pre, code태그를 이용해 안에 들어갈 내용을 써주면 됨(생략함)) -->
<!-- 창 닫기 구현 -->
<div class="modal__close">
<span class="close">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
<path d="M12.5 3.5L3.5 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M12.5 12.5L3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</div>
</div>
CSS
부분적인 CSS입니다.
전체적인 CSS를 보시려면 위 CSS보기를 참고해주세요!
/* slider */
.slider__wrap {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.slider__img {
position: relative;
width: 800px;
height: 450px;
}
.slider {
position: absolute;
left: 0;
top: 0;
}
.slider::before {
position:absolute;
left: 5px;
top: 5px;
background: rgba(0, 0, 0, 0.4);
color:#fff;
padding: 5px 10px;
}
.slider:nth-child(1)::before {content: '이미지1';}
.slider:nth-child(2)::before {content: '이미지2';}
.slider:nth-child(3)::before {content: '이미지3';}
.slider:nth-child(4)::before {content: '이미지4';}
.slider:nth-child(5)::before {content: '이미지5';}
.slider:nth-child(1) {z-index: 5;}
.slider:nth-child(2) {z-index: 4;}
.slider:nth-child(3) {z-index: 3;}
.slider:nth-child(4) {z-index: 2;}
.slider:nth-child(5) {z-index: 1;}
@media (max-width: 800px){
.slider__img {
width: 400px;
height: 225px;
}
}
▶ 자바스크립트 활용 (공통)
📌setInterval() : 일정 시간 간격을 두고 함수를 실행하는 것
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img");
const slider = sliderWrap.querySelectorAll(".slider")
let currentIndex = 0; //현재 보이는 이미지
let sliderCount = slider.length; //이미지 갯수
//만들어 놓은 함수 쓰는 것 //1000=1초 //1초마다 형성
setInterval(() => {
let nextIndex = (currentIndex + 1) % sliderCount; //다음 이미지 //currentIndex가 0부터 시작하기 때문에 + 1
//1, 2, 3, 4, 5, 6, 7, 8, 9,...
//나머지 : 1, 2, 3, 4, 0, 1, 2, 3, 4, 0...
//console.log("실행")
//첫번째 이미지 안보이게
//두번째 이미지 보이게
slider[currentIndex].style.opacity = "0" //첫번째 이미지 안 보이게 처리
slider[nextIndex].style.opacity = "1" //두번째 이미지 보이게 처리
currentIndex = nextIndex; //=: 오른쪽 값을 왼쪽으로 대입
//0 1 2 3 4 5 6 7
//0 1 2 3 4 5 6 7
},3000)
'Effect(자바스크립트 활용) > Slider Effect 슬라이드이펙트' 카테고리의 다른 글
| "슬라이더이펙트 06" : 이미지 슬라이드(버튼, 닷메뉴, 무한) (1) | 2022.10.21 |
|---|---|
| "슬라이더이펙트 05" : 이미지 슬라이드(버튼, 닷메뉴) (0) | 2022.10.17 |
| "슬라이더이펙트 04" : 좌우로 움직이기(버튼을 이용하여) (11) | 2022.09.19 |
| "슬라이더이펙트 03" : 좌로 움직이기(연속) (2) | 2022.09.02 |
| "슬라이더이펙트 02" : 좌로 움직이기 (3) | 2022.08.30 |
댓글