일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- For
- getBoundingClientRect
- NAV
- css
- 이벤트리스너
- scrollevent
- insertAdjacentHTML
- JavaScript
- 반복문
- addEventListener
- React
- 확장성
- html
- Sticky
- classList
- NodeList
- Animation
- scroll
- input
- scrollY
- mousemove
- 스크롤
- width
- swiper
- Hover
- forEach
- 애니메이션
- localstorage
- swiperjs
- pointermove
- Today
- Total
목록전체 글 (56)
ZeroToHunnit Coding
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/TZeg3/btsCALerGFp/OlevPuk9ArKXs28ATmSvv1/img.gif)
마우스 커서 자체를 변경해서 새로운 느낌을 줄 수 있지만 다른 요소를 마우스 커서에 따라다니게 하면 더 관심을 살 수 있을 것이다. HTML 그냥 큰 div안에 point-cursur라는 저 따라다니는 것을 만들어 주었다. CSS .point{ width: 100vw; height: 200vh; position: relative; } .point-cursor{ width: 300px; height: 300px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: radial-gradient(#abc574, #674bca); filter: blur(20px); border-radius: 50%; tran..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/GcVfn/btsCxHXURqF/a1NkLAKylEEA19iv5kdvtK/img.gif)
두 input중 위에 것이 input 이벤트리스너, 밑에 것이 change 이벤트리스너를 쓴 것이다. 우선 조건은 6자이상 입력하는 것이다. 보기에 두개의 차이는 input의 경우 값이 입력될 때마다 숫자가 변하는 것을 볼 수 있는데, change는 마우스커서를 다른 곳으로 옮기면 값이 변한다. HTML (input) 아이디를 입력하세요. (change) 아이디를 입력하세요. HTML은 단순하게 form태그 안에 input태그 하나만 넣어주고 밑에 설명만 적어준다. CSS #input, #change{ margin-left: 300px; margin-top: 100px; } .input-box, .change-box{ width: 500px; height: 100px; font-size: 40px; } ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/zWR3N/btsCzFq8ooI/EQ4QZ0jFllMH41XmOEBrp1/img.gif)
스크롤할 때 div가 내려가는 속도가 각각 다르게 할 수 있다. HTML HTML은 간단하게 좌우에 박스만 두었다. CSS .section{ display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 500px; margin-bottom: 500px; } .left, .right{ width: 50%; justify-content: center; display: flex; flex-direction: column; margin: 100px; } .left{ align-items: end; } .right{ align-items: start; } .right{ transform: translateY(100px);..
![](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/nZxqn/btsCwcKmfPL/Zerga4iTrqHFCcMBehE4t1/img.gif)
위와 같이 글자의 색이 좌에서 우로 채워지는 듯한 애니메이션을 짜보았다. HTML 안녕하세요 반갑습니다. 안녕하세요 반갑습니다. 코딩 너무 재밌죠? 코딩 너무 재밌죠? CSS .box{ position: relative; transform: translateX(20%); } .box:first-child{ margin-top: 300px; } .gray{ text-align: center; font-size: 100px; color: #999; font-weight: bold; } .black-box{ position: absolute; top: 0; left: 0; overflow: hidden; width: 0; transition: all 0.3s; animation: w100 3s forwards..
![](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/bSCJ4G/btsCfAYGBfI/yPYFkZK6ZKkHGJBGXnhyFK/img.gif)
position: sticky를 활용한 한쪽 고정, 한쪽만 스크롤하게 하기 이 전에는 스크롤하다가 특정 위치에 도달하면 position: fixed를 담은 class를 추가하는 방법으로 사용했는데, position: sticky를 알게된 후에 더욱 쉽게 가능해졌다. HTML 안녕하세요 저는 스크롤됩니다. 신기하죠? position: sticky로 쉽게 신기한 걸 구현 가능합니다. 나는 고정 sticky-box라는 큰 div박스 안에 left와 right로 나눠 left는 스크롤되게, right는 고정되게 html을 구성했다. CSS .sticky-box{ margin-top: 500px; margin-bottom: 500px; display: flex; height: 400vh; } .left, .rig..
![](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: #..