일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- insertAdjacentHTML
- Hover
- pointermove
- JavaScript
- scrollevent
- addEventListener
- 애니메이션
- html
- input
- NAV
- localstorage
- swiperjs
- scroll
- mousemove
- 반복문
- classList
- For
- css
- forEach
- width
- 이벤트리스너
- Sticky
- swiper
- React
- scrollY
- 확장성
- 스크롤
- getBoundingClientRect
- NodeList
- Animation
- Today
- Total
목록JavaScript (34)
ZeroToHunnit Coding
이렇게 더보기 버튼을 누르면 추가의 책 자료들을 보여주는 ui를 만들었다. HTML은 거의 비워두고 자바스크립트로만 동작한다고 볼 수 있다. HTML 더보기 HTML은 큰 틀과 더보기 버튼만 담아두었다. CSS .content-box{ display: flex; flex-wrap: wrap; padding: 120px; } .content{ padding: 40px; width: 300px; height: 500px; } .photo{ width: 250px; height: 250px; background-color: #999; display: flex; align-items:center; justify-content: center; font-size: 40px; } .title{ display: blo..
겉보기엔 그냥 제목 클릭하면 밑에 내용 보여주는 모달창같지만 코드를 보면 확장성이 있는 것을 알 수 있다. HTML 신기하다. h1태그나 content태그를 보면 싹 다 비워져있는데 저렇게 내용이 들어가있다. CSS .column{ padding: 0 120px; } .content-box{ border-bottom: 4px solid black; padding: 40px; cursor: pointer; } .column .content-box:last-child{ border-bottom: none; } .modal{ margin-top: 100px; width: 100%; height: 400px; background: #999; padding: 100px; } .modal .title{ font-s..
위와 같이 스크롤하면 중간에 박스의 크기가 커지고 글자의 크기와 위치가 변형되게 만들어보았다. 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..
원래는 스크롤 이벤트로 이렇게 애니메이션을 만들었다면 이번에는 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..
위와 같이 평소엔 마우스 커서를 따라다니는 작은 원이었다가 특정 섹션에 마우스를 올리면 VIEW가 나오는 큰 원으로 변하는 커서를 만들어보았다. HTML VIEW 커서에 미리 VIEW를 넣어 놓는다. CSS .cursor{ position: absolute; width: 30px; height: 30px; background-color: black; border-radius: 50%; z-index: 9999; transition: all 0.3s; display: flex; align-items: center; justify-content: center; } .cursor p{ color: white; font-size: 40px; font-weight: bold; opacity: 0; visibili..
이렇게 스크롤을 하면 한글자씩 서서히 나타나게 하는 ui를 만들어보았다. HTML 안 녕 하 세 요 헬 로 우 ~ 반 갑 습 니 다 이렇게 한 글자씩 span태그에 따로따로 담아주었다. 마지막 split-letter을 비워둔 이유는 나중에 밝히겠다. CSS .section{ margin-top: 500px; margin-bottom: 500px; height: 200vh; background-color: blue; } .sticky{ position: sticky; width: 100%; height: 100vh; top: 0; left: 0; display: flex; align-items: center; justify-content: center; } .split-letter{ font-size: 4..
위와 같이 그냥 닫기를 누르면 새로고침해도 다시 뜨고, 오늘 하루 보지 않기를 누르면 새로고침해도 뜨지 않다가 하루 뒤에 열리는 팝업을 만들어보았다. 보통 쿠키로 많이 만드는데 현재 시간만 저장하면 되는데 서버와 통신해야하나 싶어서 로컬스토리지가 더 효율적일거같아 로컬스토리지에 저장하는 방식으로 만들었다. HTML contents 닫기 오늘 하루 보지 않기 CSS button { border: 0; background: none; cursor: pointer; } .main-popup { position: fixed; z-index: 999; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; background-color: #f..
사진 부분은 고정되어 있지만 컨텐츠에 따라서 사진이 바뀌는 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..