| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- input
- localstorage
- For
- 가로스크롤
- css
- NodeList
- classList
- mousemove
- 스크롤
- html
- forEach
- scrollY
- React
- scroll
- JavaScript
- insertAdjacentHTML
- scrollevent
- SQLD
- addEventListener
- 반복문
- ADsP
- pointermove
- Sticky
- 이벤트리스너
- 애니메이션
- Hover
- swiper
- Animation
- swiperjs
- getBoundingClientRect
- Today
- Total
목록분류 전체보기 (60)
ZeroToHunnit Coding
[HTML,CSS] 글자 색 채우기 애니메이션
위와 같이 글자의 색이 좌에서 우로 채워지는 듯한 애니메이션을 짜보았다. 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..
[Javascript] 0에서 특정 숫자까지 자동으로 커지게 하기 CountUp
가끔 홈페이지들을 보면 숫자를 가만놔두지 않고 시선을 끌도록 숫자가 올라가는걸 볼 수 있다. 아주 간단하게 setInterval로 만들어 볼 수 있다. HTML, CSS는 너무 간단해서 생략하고 Javascript만 보자면 let count = 0; setInterval(function () { if (count
[CSS] Position:sticky
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..
[Javascript] 스크롤에 따라 서서히 div 크기 달라지게 하기
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: #..