일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- scroll
- 반복문
- React
- width
- scrollY
- mousemove
- 애니메이션
- 확장성
- classList
- NAV
- Hover
- For
- addEventListener
- insertAdjacentHTML
- forEach
- Animation
- swiperjs
- 스크롤
- getBoundingClientRect
- scrollevent
- html
- input
- NodeList
- swiper
- Sticky
- pointermove
- localstorage
- JavaScript
- css
- 이벤트리스너
- Today
- Total
목록classList (2)
ZeroToHunnit Coding
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/4Hnec/btsEkfeorJG/GXQvQcYobLDMqYlhGwnBv1/img.gif)
아주 간단하게 아코디언 메뉴를 만들 수 있다. 저는 이렇게 아코디언 메뉴와 함께 해당 사진도 옆에서 나오게하는 애니메이션을 만들어 보았다. HTML 1번 사진입니다. 2번 사진입니다. 3번 사진입니다. 4번 사진입니다. 5번 사진입니다. 리스트 1번입니다. 리스트 1번 내용입니다. 리스트 2번입니다. 리스트 1번 내용입니다. 리스트 3번입니다. 리스트 3번 내용입니다. 리스트 4번입니다. 리스트 4번 내용입니다. 리스트 5번입니다. 리스트 5번 내용입니다. aco-list안에 content를 넣어준다. CSS .section{ padding: 0 120px; } .inner{ width: 100%; display: flex; justify-content: space-between; } .photo-box..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/nsfLC/btsDDXYzpxh/cja0GPt874N9yiVNFTbmIk/img.gif)
이렇게 스크롤을 하면 한글자씩 서서히 나타나게 하는 ui를 만들어보았다. HTML 안 녕 하 세 요 헬 로 우 ~ 반 갑 습 니 다 이렇게 한 글자씩 span태그에 따로따로 담아주었다. 마지막 split-letter을 비워둔 이유는 나중에 밝히겠다. CSS .section{ margin-top: 500px; margin-bottom: 500px; height: 200vh; background-color: blue; } .sticky{ position: sticky; width: 100%; height: 100vh; top: 0; left: 0; display: flex; align-items: center; justify-content: center; } .split-letter{ font-size: 4..