페이지 오른쪽에 미니 배너를 만들고, 스크롤시 페이드 효과를 JS로 구현한 내용입니다.
아래는 사이드 광고 배너 구현을 위한 html, css 구성 코드입니다.
<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 .badges {
/* 📌 부모요소인 header 부분에 position fixed 값과 width 100% 적용 */
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, 0.15);
cursor: pointer;
}
div는 block 태그 요소로, 일반적으로 가로 길이가 최대한으로 늘어나려는 특징을 가지고 있지만 css 속성 중에 position fixed나 absolute 값을 적용시키면 최소한으로 줄어드려는 특징으로 변하게 됩니다. 따라서 width 값을 100%로 적용시켜 주면 됩니다.
화면 스크롤시 사이드 배너가 페이드 되는 효과를 주기 위해서 scroll addEventListener를 사용할 예정이지만 파일이 무거워지는 것을 방지하기 위해 lodash 라이브러리를 사용해줍니다.
🍪 Lodash
https://cdnjs.com/libraries/lodash.js 해당 사이트에서 모듈의 주소를 프로젝트에 연결해 줍니다.
끝부분이 min.js 로 끝나는 코드를 복사해 index.html 파일 script 태그 위쪽에 붙여넣기 해줍니다.
_.throttle(함수, 시간) 메서드는 적용한 시간만큼 부하를 주어 스크롤 이벤트가 짧은 시간 안에 한꺼번에 너무 많이 실행되는 것을 방지하기 위해 사용해 줄 수 있습니다.
window.addEventListener('scroll', _.throttle(
function () {
if(window.scrollY > 500) { // 📌 스크롤이 500 보다 높게 위치하면 배너 사라짐
badgeEl.classList.add('hide');
} else { // 📌 500 이하일 경우 배너 나타남
badgeEl.classList.add('show');
}
}, 300)) // 📌 0.3초 동안 부하가 걸리도록 설정🍪 GSAP
배너가 사라지고 나타날 때 자연스러운 애니메이션 효과를 주기 위한 라이브러리를 사용해 줍니다.
https://cdnjs.com/libraries/gsap 사이트에서 마찬가지로 min.js로 끝나는 코드를 복사하여 index.html 파일의 script 위쪽에다 붙여넣기 해줍니다.
gsap.to(요소, 지속시간, 옵션) 기능을 사용하여 애니메이션을 적용할 요소와 얼마나 지속할지에 대한 시간, 어떻게 처리할 것인가의 여러가지 옵션을 아래와 같이 넣어주면 됩니다.
if (window.scrollY > 500) {
gsap.to(badgeEl, 0.6, { //📌 badge 요소가 0.6초동안 자연스럽게 사라짐
opacity: 0,
display: "none" //📌 해당 옵션을 안넣어 주면 시각적으로만 사라진 상태가 됨
});
} else {
gsap.to(badgeEl, 0.6, { //📌 badge 요소가 0.6초에 걸쳐 자연스럽게 보여짐
opacity: 1,
display: "block" // 📌 다시 요소가 나타날 수 있도록 처리
});
}GSAP을 사용하여 메인 배너의 사진이 순차적으로 출력될 수 있는 효과도 적용시켜 줄 수 있습니다.
const fadeEls = document.querySelectorAll(".visual .fade-in");
// 📌 fadeEl은 요소 index는 반복되는 횟수
fadeEls.forEach(function (fadeEl, index) {
// 📌 fadeEl이 1초에 걸쳐 자연스럽게 나타남
gsap.to(fadeEl, 1, {
//📌 0.7s, 1.4s, 2.1s, 2.7s 뒤에 순차적으로 이미지가 나타남
delay: (index + 1) * 0.7,
opacity: 1,
});
});위아래로 이미지가 둥둥 떠있는 듯한 에니메이션을 주기위한 js 코드는 아래와 같이 작성해 주면 됩니다.
// 범위 랜덤 함수(소수점 2자리까지), (1, 7)을 입력해주면 1~7까지의 랜덤한 숫자를 반환
function random(min, max) {
// `.toFixed()`를 통해 반환된 문자 데이터를,
// `parseFloat()`을 통해 소수점을 가지는 숫자 데이터로 변환
return parseFloat((Math.random() * (max - min) + min).toFixed(2))
}
// 둥둥 떠다니는 에니메이션 이미지
function floatingObject(selector, delay, size) {
// gsap.to(요소, 시간, 옵션)
gsap.to(
selector, // 선택자
random(1.5, 2.5), // 에니메이션 동작 시간
{ // 옵션
y: size, // y축 이동
repeat: -1, // 무한반복
yoyo: true, // 재생된 에니메이션을 다시 뒤로 재생
ease: Power1.easeInOut, // gsap easing 사이트 참고 조금 더 자연스럽게 설정해주는 옵션
delay: random(0, delay) // 지연시간
}
);
}
floatingObject(".floating1", 1, 15);
floatingObject(".floating2", .5, 15);
floatingObject(".floating3", 1.5, 20);참고자료 - https://greensock.com/docs/v3/GSAP/gsap.to(), https://greensock.com/docs/v2/Easing
