일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- 스크롤
- width
- scrollY
- NAV
- pointermove
- swiperjs
- Animation
- React
- NodeList
- 확장성
- Hover
- 이벤트리스너
- scroll
- insertAdjacentHTML
- Sticky
- mousemove
- addEventListener
- localstorage
- input
- 반복문
- scrollevent
- forEach
- html
- classList
- css
- 애니메이션
- JavaScript
- getBoundingClientRect
- swiper
- Today
- Total
목록addEventListener (9)
ZeroToHunnit Coding
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/FpuUG/btsDNIGNQqM/mUBDwftqOcPV50t9LWKOC1/img.gif)
위와 같이 스크롤하면 중간에 박스의 크기가 커지고 글자의 크기와 위치가 변형되게 만들어보았다. HTML 제 위치로 찾아갑니다~ CSS body, html{ contain: paint; } .section{ width: 100%; height: 300vh; } .wrap{ position: sticky; top: 0; left: 0; width: 100%; height: 100vh; } .bg{ width: 100%; height: 100%; background-color: aqua; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.3); } .title{ width: 100%; text-align: cent..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cMzKxj/btsDuTis6UH/0WgEEYSpmHKK2LacxBb06k/img.gif)
사진 부분은 고정되어 있지만 컨텐츠에 따라서 사진이 바뀌는 ui를 만들어보았다. HTML 1번 이미지 2번 이미지 3번 이미지 4번 이미지 1번 컨텐츠 2번 컨텐츠 3번 컨텐츠 4번 컨텐츠 우선 이미지 부분과 컨텐트 부분의 큰 div를 만들고 안에 갯수에 맞게 작은 div들을 만들어주었다. CSS body, html{ contain: paint; } .section{ width: 100vw; height: 400vh; margin-top: 500px; margin-bottom: 500px; display: flex; } .sticky{ position: sticky; width: 50vw; height: 100vh; top: 0; left: 0; } .img{ position: absolute; widt..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b5LwyP/btsDkUghnTj/PsiBtEKdwXWo836FEx5eok/img.gif)
각 박스에 도달하면 하단 고정 메뉴안에 해당되는 박스의 메뉴가 활성화되고 큰 섹션을 나가면 모든 활성화가 사라지는 ui를 만들어 보았다. HTML box1 box2 box3 box4 box1 box2 box3 box4 섹션안에 박스 네개와 list가 포함된 menu박스를 만들어주었다. CSS .section{ margin-top: 400px; margin-bottom: 400px; background-color: #999; padding: 200px; } .box{ width: 100%; height: 150vh; margin-top: 200px; background-color: black; color: white; font-size: 60px; } .menu{ position: sticky; botto..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/2StmM/btsDhgqoE3S/tFIukRU67kshwGSk6n4rxk/img.gif)
화질이 안좋아서 잘 안보이지만 선택한 값을 모두 보여주는 걸 구현해보았다. HTML 무엇을 사실건가요? 모자 셔츠 free 사이즈를 선택해주세요. 95 100 105 form 태그 안에 select문 3개를 미리 담아두고 result값을 출력할 곳을 따로 만들어 두었다. CSS form{ margin-left: 200px; margin-top: 200px; } #apparel, #hat-size, #shirts-size{ font-size: 40px; padding: 40px; } #hat-size, #shirts-size{ visibility: hidden; opacity: 0; transition: all 0.3s; position: absolute; } .on{ visibility: visible ..
![](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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/qU3fk/btsCZ20zNwU/kGaSFE5yT9WexnfLNJsEMK/img.gif)
스크롤을 내리면 전체 페이지 중 현재 어디 쯤을 읽고있는지 나타내주는 바를 만들어 보았다. HTML CSS body, html{ height: 6000px; } .bar{ width: 100vw; height: 50px; position: fixed; top: 0; left: 0; background-color: #999; } .percent{ width: 0; height: 100%; background-color: black; transition: all 0.1s; } 전체 높이 6000px로 잡아주고 bar 박스는 위에 고정시켜주었다. JAVASCRIPT let percent = document.querySelector('.percent'); let screenHeight = document.que..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/nkfQw/btsCUX5tdQI/C2ljYaao8V4OdgbwllXlNK/img.gif)
위의 사진처럼 카드에 마우스 커서가 올라가면 커서따라 3d느낌으로 위로 솟는 느낌으로 만들어봤다. HTML CSS .box{ width: 511px; height: 321px; margin-top: 300px; margin-left: 500px; transition: all 0.1s; position: relative; } .photo{ width: 100%; height: 100%; background-image: url(card.png); } 박스에 크기를 정하고 photo는 background로 이미지를 넣어주었다. JAVASCRIPT document.querySelector('.box').addEventListener('mousemove', function(e){ let rotateY = -50/..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/rxRRq/btsCEIbqLsE/f4no8LllGMAwlekkXOWKT0/img.gif)
스크롤을 내리다가 특정 위치가 되면 가로로 스크롤되는 것을 만들었다. HTML 가로 스크롤 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ HTML은 매우 간단하다. 그냥 가로로 스크롤 될 박스 하나만 만들어주면 된다. CSS .section{ margin-top: 1000px; margin-bottom: 1000px; contain: paint; height: 300vh; } .scroll-box{ width: 200vw; height: 100vh; background: linear-gradient(90deg, #abc123,#321cba); position: sticky; top: 0; left: 0; } 이번에도 또한 pos..