일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- NodeList
- html
- For
- css
- scroll
- 반복문
- pointermove
- NAV
- classList
- JavaScript
- width
- addEventListener
- Sticky
- 확장성
- getBoundingClientRect
- localstorage
- insertAdjacentHTML
- swiperjs
- 이벤트리스너
- scrollevent
- swiper
- mousemove
- Animation
- forEach
- Hover
- input
- scrollY
- React
- 애니메이션
- 스크롤
- Today
- Total
목록애니메이션 (4)
ZeroToHunnit Coding
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/S11F5/btsDRnJq8yL/GUKQ10Jpxvf7MbvMxzsvOK/img.gif)
요즘 벤치마킹을 하다보면 저렇게 마우스를 올리면 사진이 뜨는 ui를 많이 발견할 수 있다. 그래서 간단하게 만들어보았다. HTML 1번 리스트 2번 리스트 3번 리스트 리스트는 ul li로 만들어주고 이미지를 띄울 공간을 미리 만들어주었다. CSS ul{ padding: 40px; } li{ padding: 80px 0; font-size: 40px; border-bottom: 4px solid #777; cursor: pointer; position: relative; transition: all 0.3s; } li:last-child{ border-bottom: none; } .img-box{ width: 300px; height: 300px; position: absolute; top: 50%; l..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/D2yYj/btsDHqgdNY3/X6jPpnbQOkNFTd5E3d9pE1/img.gif)
원래는 스크롤 이벤트로 이렇게 애니메이션을 만들었다면 이번에는 Intersection Observer로 간단한 애니메이션을 만들어보았다. HTML 안녕하세요? 반갑습니다. 스크롤 이벤트 말고 intersection observer로 조금 편하게 스크롤 애니메이션 줄 수 있어요 대박이죠? CSS .section{ height: 6000px; } .box{ margin-top: 800px; } .box p{ font-size: 60px; font-weight: bold; text-align: center; opacity: 0; transform: scale(0); transition: all 0.6s; } .observe{ opacity: 1 !important; transform: scale(1)!impo..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bM5VSW/btsC83k5xxU/ZGdjiajiiH7InNI02Ofsy1/img.gif)
위와 같이 마우스를 갖다 대면 한 글자씩 위쪽으로 파도타기하면서 없어지고 밑에서 한 글자씩 다시 올라오는 애니메이션을 구현했다. HTML 안 녕 하 세 요? 반 갑 습 니 다. 안 녕 하 세 요? 반 갑 습 니 다. 텍스트 박스를 2개 만들어주고 각 글자들을 span태그에 따로따로 담았다. CSS .box { margin-top: 200px; margin-left: 200px; overflow: hidden; cursor: pointer; position: relative; } .text span, .hover-text span{ display: inline-block; transition: all 0.3s; font-size: 60px; } .hover-text{ position: absolute; t..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bOyeqZ/btsC9mRn6Tv/xrvmcYb24Pc2jYT44HqqWk/img.gif)
이런 신기한 폰트 애니메이션을 만들어보았다. HTML H E L L O W O R L D p태그에 따로따로 담아주었다. CSS @import url('https://fonts.googleapis.com/css2?family=Hepta+Slab:wght@1..900&display=swap'); .font{ font-family: "Hepta Slab"; text-align: center; margin-top: 300px; font-size: 60px; font-variation-settings: "wght"100; white-space: nowrap; float: left; animation: ani infinite cubic-bezier(0.215, 0.610, 0.355, 1) 2s; } .font:n..