일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- Hover
- css
- For
- swiperjs
- width
- 반복문
- addEventListener
- NAV
- localstorage
- NodeList
- html
- swiper
- React
- scrollevent
- scroll
- forEach
- input
- JavaScript
- Sticky
- 애니메이션
- pointermove
- classList
- 이벤트리스너
- scrollY
- insertAdjacentHTML
- 스크롤
- getBoundingClientRect
- 확장성
- mousemove
- Animation
- Today
- Total
목록JAVASCRIPT (35)
ZeroToHunnit Coding
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/nWjDU/btsCyKF3BYu/1CkxlnUsqkqk6Zv61dOs9k/img.gif)
우선 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안에 본인이 원하는대로 꾸며준다. ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cHQc0D/btsCk81SSVR/J7RmWkTnHMm3xqK62OHluK/img.gif)
가끔 홈페이지들을 보면 숫자를 가만놔두지 않고 시선을 끌도록 숫자가 올라가는걸 볼 수 있다. 아주 간단하게 setInterval로 만들어 볼 수 있다. HTML, CSS는 너무 간단해서 생략하고 Javascript만 보자면 let count = 0; setInterval(function () { if (count
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b88JVD/btsCg3d1BvX/WfrQlHt2VPR51fc7qaWyY0/img.png)
Scroll Event(스크롤 이벤트)를 이용한 div 크기 변경 * position: sticky * 일차함수 * Scroll Event Preview Scroll의 위치가 600 ~ 1400 까지는 width: 50vw ~ 100vw로, height: 50vh ~ 100vh 로 서서히 커지게 하고, 4000 ~ 4600에서는 width: 100vw ~ 0로, height: 100vh ~ 0으로 서서히 없어지게 한다. HTML 나 커질거임 HTML은 이렇게 간단하게 설정해줍니다. CSS .bg{ width: 100%; height: 5000px; margin-top: 600px; margin-bottom: 600px; } .bx{ width: 50vw; height: 50vh; background: #..