일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 이벤트리스너
- Sticky
- html
- addEventListener
- Animation
- 반복문
- JavaScript
- getBoundingClientRect
- 애니메이션
- scrollevent
- pointermove
- NodeList
- mousemove
- React
- classList
- 스크롤
- css
- swiper
- width
- localstorage
- swiperjs
- NAV
- scroll
- 확장성
- insertAdjacentHTML
- Hover
- scrollY
- For
- forEach
- input
- Today
- Total
목록JAVASCRIPT (35)
ZeroToHunnit Coding
이렇게 한글자씩 적어나가는 타이핑 애니메이션을 만들어보았다. HTML CSS .section{ margin-top: 300px; } .section p{ text-align: center; font-size: 60px; } JAVASCRIPT const typingText = "안녕하세요~ 글자 타닥타닥"; const text = document.querySelector(".text"); let i = 0; function typing(){ if (i
위의 사진처럼 카드에 마우스 커서가 올라가면 커서따라 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/..
이렇게 특정 위치에 도달하면 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..
스크롤을 내리다가 특정 위치가 되면 가로로 스크롤되는 것을 만들었다. 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..
스크롤하면 메인 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..
마우스 커서 자체를 변경해서 새로운 느낌을 줄 수 있지만 다른 요소를 마우스 커서에 따라다니게 하면 더 관심을 살 수 있을 것이다. 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..
두 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; } ..
스크롤할 때 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);..