일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- insertAdjacentHTML
- forEach
- NodeList
- swiperjs
- classList
- input
- 반복문
- 확장성
- getBoundingClientRect
- For
- addEventListener
- scroll
- React
- scrollevent
- Animation
- 이벤트리스너
- NAV
- Sticky
- css
- width
- html
- pointermove
- scrollY
- 애니메이션
- JavaScript
- Hover
- 스크롤
- mousemove
- swiper
- Today
- Total
목록JavaScript (34)
ZeroToHunnit Coding
![](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/AnE4n/btsCMzyiXv8/EzFvM5cxJ5uXKWDqH46Ei1/img.gif)
이렇게 특정 위치에 도달하면 div의 속성을 바꾸고 특정 위치를 벗어나면 속성을 원래대로 돌리는 애니메이션을 만들었다. HTML 여기는 고정! 왼쪽은 고정, 오른쪽에 여러개의 box를 만들어두었다. CSS .section{ width: 100%; height: 500vh; margin-top: 500px; display: flex; } .left{ position: sticky; top: 0; width: 50%; height: 100vh; } .left p{ text-align: center; font-size: 60px; margin-top: 300px; } .right{ width: 50%; display: flex; } .right-left, .right-right{ width: 50%; } .r..
![](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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bYofHs/btsCN1AdZYS/C9vp5K2Qog0utHIRIQInDK/img.gif)
스크롤하면 메인 title이 서서히 사라지고 메인 visual의 크기가 커지면서 전체 화면을 차지하는 애니메이션을 만들어보았다. 잘 쓰면 꽤나 멋진 홈페이지를 만들 수 있지 않을까 싶다. HTML 무슨 일이 일어날까요?? 짜잔~ HTML은 간단하게 타이틀과 사진만 배치했다. CSS .title-box { position: fixed; top: 300px; left: 30%; z-index: 10; } .title { font-size: 60px; } .section { margin-top: 600px; width: 100%; height: 200vh; margin-bottom: 600px; } .photo-wrap { display: flex; justify-content: center; gap: 60p..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/TZeg3/btsCALerGFp/OlevPuk9ArKXs28ATmSvv1/img.gif)
마우스 커서 자체를 변경해서 새로운 느낌을 줄 수 있지만 다른 요소를 마우스 커서에 따라다니게 하면 더 관심을 살 수 있을 것이다. HTML 그냥 큰 div안에 point-cursur라는 저 따라다니는 것을 만들어 주었다. CSS .point{ width: 100vw; height: 200vh; position: relative; } .point-cursor{ width: 300px; height: 300px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: radial-gradient(#abc574, #674bca); filter: blur(20px); border-radius: 50%; tran..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/GcVfn/btsCxHXURqF/a1NkLAKylEEA19iv5kdvtK/img.gif)
두 input중 위에 것이 input 이벤트리스너, 밑에 것이 change 이벤트리스너를 쓴 것이다. 우선 조건은 6자이상 입력하는 것이다. 보기에 두개의 차이는 input의 경우 값이 입력될 때마다 숫자가 변하는 것을 볼 수 있는데, change는 마우스커서를 다른 곳으로 옮기면 값이 변한다. HTML (input) 아이디를 입력하세요. (change) 아이디를 입력하세요. HTML은 단순하게 form태그 안에 input태그 하나만 넣어주고 밑에 설명만 적어준다. CSS #input, #change{ margin-left: 300px; margin-top: 100px; } .input-box, .change-box{ width: 500px; height: 100px; font-size: 40px; } ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/zWR3N/btsCzFq8ooI/EQ4QZ0jFllMH41XmOEBrp1/img.gif)
스크롤할 때 div가 내려가는 속도가 각각 다르게 할 수 있다. HTML HTML은 간단하게 좌우에 박스만 두었다. CSS .section{ display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 500px; margin-bottom: 500px; } .left, .right{ width: 50%; justify-content: center; display: flex; flex-direction: column; margin: 100px; } .left{ align-items: end; } .right{ align-items: start; } .right{ transform: translateY(100px);..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/nWjDU/btsCyKF3BYu/1CkxlnUsqkqk6Zv61dOs9k/img.gif)
우선 SwiperJs는 홈페이지에 흔히 쓰이는 캐러셀을 편하게 만들어줄 수 있는 자바스크립트 라이브러리다. HTML, CSS, JS 짜기 전에 SwiperJS 홈페이지 들어가서 본인이 편한 방식으로 cdn 코드를 불러오면 된다. HTML slide1제목 사진1 slide2제목 사진2 slide3제목 사진3 SwiperJs를 성공적으로 불러왔다면 html의 클래스명을 정해진대로 써야 제대로 작동한다. 우선 section이라는 큰 div안에 본격적으로 swiper를 짠다. 무.조.건 swiper 안에 swiper-wrapper를 넣고 그 안에 swiper-slide를 넣어야한다. swiper-slide가 실질적으로 슬라이드되는 큰 틀이라고 보면 된다. swiper-slide안에 본인이 원하는대로 꾸며준다. ..