패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. 옆의 배너(배지)를 만들었다. 스크롤을 내리면 배너가 사라지는 효과를 줬다
<div class="badges">
<div class="badge">
<img src="./images/badge1.jpg" alt="Badege">
</div>
<div class="badge">
<img src="./images/badge2.jpg" alt="Badege">
</div>
</div>
</header>
</body>
</html>
header {
width: 100%;
/* position: relative; */
position: fixed;
top: 0;
background-color: #f6f5f0;
border-bottom: 1px solid #c8c8c8;
}
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;
}
const badgeEL = document.querySelector('header .badges');
window.addEventListener('scroll', _.throttle(function () {
console.log(window.scrollY);
if(window.scrollY > 500) {
gsap.to(badgeEL, .6, {
opacity: 0,
display: 'none'
});
} else {
gsap.to(badgeEL, .6, {
opacity: 1,
display: 'block'
});
}
}, 300));