헤더와 드롭다운 메뉴 - 전역 배지(GSAP)
GSAP 플러그인을 이용한 전역 배지
코드
HTML
</header>
바로 윗부분에 작성
<div class="badges">
<div class="badge">
<img src="./images/badge3.jpg" alt="Badge" />
</div>
<div class="badge">
<img src="./images/badge2.jpg" alt="Badge" />
</div>
</div>
CSS
header .badges {
position: absolute;
top: 132px;
right: 12px;
}
header .badges .badge {
border-radius: 10px;
overflow: hidden;
margin-bottom: 12px;
box-shadow: 4px 4px 10px rgba(0, 0, 0, .15);
cursor: pointer;
JS
const badgeEl = document.querySelector('header .badges');
window.addEventListener('scroll', _.throttle(function () {
console.log(window.scrollY);
if (window.scrollY > 500) {
// gsap.to(요소, 지속시간, 옵션);
gsap.to(badgeEl, 0.6, {
// 배지 숨기기
opacity: 0,
display: 'none'
});
} else {
gsap.to(badgeEl, 0.6, {
// 배지 보이기
opacity: 1,
display: 'block'
});
}
}, 300));
// _.throttle(함수, 시간)
toTopEl.addEventListener('click', function() {
gsap.to(window, 0.7, {
scrollTo: 0
});
});
GSAP(The GreenSock Animation Platform)
자바스크립트로 제어하는 타임라인 기반의 애니메이션 라이브러리
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js" integrity="sha512-IQLehpLoVS4fNzl7IfH8Iowfm5+RiMGtHykgZJl9AWMgqx0AmJ6cRWcB+GaGVtIsnC4voMfm8f2vwtY+6oPjpQ==" crossorigin="anonymous"></script>
gsap.to(요소, 시간, 옵션)
// 또는
TweenMax.to(요소, 시간, 옵션)
gsap.to(window, .7, {
scrollTo: 0
});
Author And Source
이 문제에 관하여(헤더와 드롭다운 메뉴 - 전역 배지(GSAP)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@rkde8938/헤더와-드롭다운-메뉴-전역-배지GSAP저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)