728x90
이미지 좌우로 움직이기
이번 슬라이더 이펙트는 slider__inner 클래스 div 을 만들어서
img의 width * 갯수 로하여서 전체 width값을 잡아줍니다.
또한 상위 slider__img 를 이용해 overflow: hidden; 을 주어서 넘치는 영역을 안보이게합니다.
js를 이용하여 sliderInner.style.transition = "all 0.6s" 을 주어서 애니메이션 효과를 넣고
setInterval 이용하여 slider__inner 의 위치를 img의 width 값에 맞게 변경해줍니다.
또한 Gasp 와 jquery 를이용하여 만들어봤으니 자세한 내용은 아래에있는 소스보기를 통하여 봐주시면되겠습니다.
728x90
반응형
'JavaScript > Effect' 카테고리의 다른 글
| 이펙트 응용편 | 마우스 이펙트 첫 번째 (2) | 2022.09.06 |
|---|---|
| 슬라이드 이펙트 세 번째 (1) | 2022.09.02 |
| 슬라이드 이펙트 첫번째 - 이미지 보여주기 (6) | 2022.08.29 |
| 퀴즈 이펙트 여섯 번재 (10) | 2022.08.24 |
| 퀴즈이펙트 다섯 번쨰 (8) | 2022.08.24 |
댓글