JS16 cursor custom circle gsap TweenMax 마우스 CURSOR GSAP를 이용한 circle custom See the Pen mouse cursor circle - gsap TweenMax by jeunseon (@jeunseon) on CodePen. HTML CSS/* cursor css 부분 */body{ background: #141212; cursor: none;}.cursor { pointer-events: none;}.cursor_ball { position: fixed; /* fixed 로 했을 경우 다른 css에 영향을 받아 cursor가 제대로 안될 경우 absolute 로 해도 된다.*/ top: 0; left.. 2024. 9. 6. top 버튼 click scroll / javascript HTML section1 section2 section3 section4 top CSS.wrap { position: relative;}.top { position: fixed; bottom: 10px; right: 10px; padding: 20px; background: #fff; border-radius: 20px; cursor: pointer;}스크롤이 스무스하게 되지 않는다면 아래의 CSS를 body에 붙인다. scroll-behavior: smooth; JS// top 버튼const topBtn = document.querySelector('.top');topBtn.addEventListener('click', () => { $('body, html'.. 2024. 8. 20. menu click scrollTop / javascript menu click 시 스무스하게 스크롤되도록. CSS 영역body, html { scroll-behavior: smooth; /* 스크롤이 스무스하게 움직이려면 필수!! */}header { position:fixed; top: 0; z-index:100; width: 100%;}.gnb { display: flex; justify-content: center;}.gnb li a { display:inline-block; color: #fff; text-decoration: none; padding: 20px 30px;} JS 영역window.onload = function(){ let menulist = document.querySelector('.gnb li a'); .. 2024. 8. 18. GSAP loading 애니메이션 html 영역 css 영역/* loading */.loading { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #141212; z-index: 9999; display: none;}.loading .logo { display: flex; justify-content: space-between; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden;}.loading.scene1 {.. 2024. 8. 1. j.young 클론코딩 con5 영역 showImg html 영역 Daebang Undustry 2024 THE Dopda Platform 2024 Musign Agency 2024 Hanhwa Chemical 2024 css 영역.wrap { position: relative;}/* showImg */.showImg .listBox li { display: .. 2024. 7. 29. j.young 클론코딩 con4 영역 보호되어 있는 글 입니다. 2024. 7. 29. 이전 1 2 3 다음
