<div class="badges">
<div class="badge">
<img src="./images/badge1.jpg" alt="Badge" />
</div>
<div class="badge">
<img src="./images/badge2.jpg" alt="Badge" />
</div>
</div>
header {
width: 100%;
background-color: #f6f5f0;
border-bottom: 1px solid #c8c8c8;
position: fixed; /* 뷰포트 기준 배치 */
top: 0;
}
header .badges {
position: absolute; /* 부모요소 header(position: fixed;) */
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;
}
**position: fixed;
position: absolute;
로 부여되어있는 요소는 브라우저가 auto로 설정되어있어서 가로 너비가 최소한으로 줄어들려고 시도한다. 따라서 가로사이즈가 자동은 auto인데 100%값을 주면 된다.자바스크립트를 이용해서 화면의 스크롤 값이 일정 값이상 커지면 요소가 사라지도록 하기
https://cdnjs.com/libraries/lodash.js
_.throttle(함수, 시간)
해당 라이브러리는 스크롤을 제어시킨다. 한번 스크롤 할 때마다 함수가 많이 실행되면 웹사이트가 무거워질수 있음(화면 버벅임)
복사한 코드를 프로젝트에 연결하고, _.throttle
메소드를 추가해서 사용하면 된다.
window.addEventListener('scroll', _.throttle(function () {
console.log(window.scrollY);
if (window.scrollY) {
}
}, 300));
_.throttle
이라는 메소드로 0.3초 단위로 실행 되도록 제한을 거는 것https://cdnjs.com/libraries/gsap
gsap.to(요소, 지속시간, 옵션)
window.addEventListener('scroll', _.throttle(function () {
console.log(window.scrollY);
if (window.scrollY > 500) {
// 배지 숨기기
// gsap.to(요소, 지속시간, 옵션);
gsap.to(badgeEl, .6, {
opacity: 0, // 투명
display: 'none ' //화면에서 진짜로 사라지게하기
});
} else {
// 배지 보이기
gsap.to(badgeEl, .6, {
opacity: 1,
display: 'block'
});
}
}, 300));
프로젝트에 도움되는 외부 라이브러리를 사용하여 요소를 제어한다는점이 유용하다. 웹사이트 제작 시 scroll 이벤트가 사용되어야하는 부분이 많은데, 배지 만들기를 응용해서 하면 될 것 같다. 하지만 아직 JS가 어렵다......