일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- localstorage
- NodeList
- 애니메이션
- NAV
- classList
- addEventListener
- JavaScript
- 이벤트리스너
- scrollY
- insertAdjacentHTML
- 반복문
- css
- getBoundingClientRect
- For
- pointermove
- scroll
- input
- mousemove
- width
- forEach
- Sticky
- swiper
- scrollevent
- 스크롤
- swiperjs
- Hover
- 확장성
- html
- React
- Animation
- Today
- Total
목록NodeList (3)
ZeroToHunnit Coding
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/rJJeV/btsEKDyjDVR/I3rbQhekpv7eSpjP1KNEfK/img.gif)
마우스 움직임에 따라 원들이 3d느낌으로 움직이는 ui를 만들어보았다. 저대로 사진만 넣으면 좀 더 실감나게 3d느낌을 낼 수 있지 않을까 싶다. HTML CSS .section{ overflow: hidden; position: relative; width: 100%; height: 100vh; } .circle{ position: absolute; width: 700px; height: 700px; border-radius: 50%; transform-style: preserve-3d; perspective: 500px; } .circle:nth-child(1){ top: 200px; left: -200px; background-color: blue; } .circle:nth-child(2){ top..
![](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/CpGd4/btsCUxU5u5i/kG0Hg9F6ZayagdVnwKAD3k/img.gif)
위와 같이 스크롤 함에 따라 큰 박스가 3개로 나눠지고 뒤집어져서 뒷면이 나오는 기능을 구현해봤다. HTML 카드1 뒷면 카드2 뒷면 카드3 뒷면 스크롤 ㄱㄱ CSS .section{ height: 6000px; } .wrapper{ width: 100%; height: 100vh; position: sticky; top: 0; display: flex; justify-content: center; align-items: center; background-color: black; } .grid{ display: grid; width: 1200px; height: 50vh; grid-template-rows: 1fr; grid-template-columns: 1fr 1fr 1fr; grid-auto-col..