반응형
250x250
Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |
Tags
- 스크롤
- localstorage
- scrollY
- React
- classList
- forEach
- 애니메이션
- insertAdjacentHTML
- html
- mousemove
- 확장성
- getBoundingClientRect
- NAV
- For
- Sticky
- 반복문
- width
- NodeList
- Animation
- 이벤트리스너
- Hover
- pointermove
- scrollevent
- scroll
- JavaScript
- swiperjs
- css
- input
- swiper
- addEventListener
Archives
- Today
- Total
목록세로스크롤 (1)
ZeroToHunnit Coding
[JAVASCRIPT] SwiperJs, 스크롤하면 세로로 움직이는 사진,글자
우선 SwiperJs는 홈페이지에 흔히 쓰이는 캐러셀을 편하게 만들어줄 수 있는 자바스크립트 라이브러리다. HTML, CSS, JS 짜기 전에 SwiperJS 홈페이지 들어가서 본인이 편한 방식으로 cdn 코드를 불러오면 된다. HTML slide1제목 사진1 slide2제목 사진2 slide3제목 사진3 SwiperJs를 성공적으로 불러왔다면 html의 클래스명을 정해진대로 써야 제대로 작동한다. 우선 section이라는 큰 div안에 본격적으로 swiper를 짠다. 무.조.건 swiper 안에 swiper-wrapper를 넣고 그 안에 swiper-slide를 넣어야한다. swiper-slide가 실질적으로 슬라이드되는 큰 틀이라고 보면 된다. swiper-slide안에 본인이 원하는대로 꾸며준다. ..
JAVASCRIPT
2023. 12. 23. 16:19