사용자팁 게시판
[모션효과 반복적용] 스크립트 적용방법
엘리멘터의 모션효과 적용시 보통 1회만 적용이 되어집니다.
아래의 방법을 적용한다면 스크롤시 해당 영역이 나올때마다 반복효과를 보여줄 수 있습니다.
해당 기능은 유지보수/기술지원에 해당되는 내용은 아니기때문에 적용 가능하신 분들만 사용하시면 되십니다.
> 모든 홈페이지의 위젯/컬럼/섹션에 자유롭게 적용하시려면 아래의 스크립트를 헤더나 푸터에 넣어주세요.
> 메인화면 또는 특정페이지에서만 사용하시려면 해당 페이지에 스크립트를 넣으시면 되십니다.
* 적용방법은 엘리멘터 편집에서 <html>위젯을 아무 위치에 넣고 html 소스자리에 아래 소스를 그대로 넣어두시면 됩니다.
--------------------------------------------------------------
<script>
window.addEventListener('load', function() {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
const el = entry.target;
const cls = el.classList;
if (entry.isIntersecting) {
// 나타날 때 공통: 투명도 1, 제자리(0), 원래크기(1)
el.style.opacity = "1";
el.style.transform = "translate(0, 0) scale(1)";
el.style.transition = "all 1s ease-out";
} else {
// 사라질 때 초기화 (리셋)
el.style.opacity = "0";
el.style.transition = "none";
if (cls.contains('slide-up')) el.style.transform = "translateY(40px)";
else if (cls.contains('slide-down')) el.style.transform = "translateY(-40px)";
else if (cls.contains('slide-left')) el.style.transform = "translateX(40px)";
else if (cls.contains('slide-right')) el.style.transform = "translateX(-40px)";
else if (cls.contains('zoom-in')) el.style.transform = "scale(0.92)"; // 살짝 작아짐
else if (cls.contains('fade-in')) el.style.transform = "translate(0, 0)"; // 위치 이동 없음
}
});
}, { threshold: 0.1 });
// 적용할 클래스 목록
const classes = '.slide-up, .slide-down, .slide-left, .slide-right, .zoom-in, .fade-in';
document.querySelectorAll(classes).forEach(el => {
el.style.opacity = "0"; // 초기 상태 숨김
// 클래스별 초기 위치 설정
if (el.classList.contains('slide-up')) el.style.transform = "translateY(40px)";
else if (el.classList.contains('slide-down')) el.style.transform = "translateY(-40px)";
else if (el.classList.contains('slide-left')) el.style.transform = "translateX(40px)";
else if (el.classList.contains('slide-right')) el.style.transform = "translateX(-40px)";
else if (el.classList.contains('zoom-in')) el.style.transform = "scale(0.92)";
observer.observe(el);
});
});
</script>
--------------------------------------------------------------
해당 효과를 사용하기 위해서 사용하실 위젯/컬럼의 [고급]에서 모션효과를 '없음'으로 설정해서 효과를 없애야 합니다.
애초에 적용한적이 없다면 관계없습니다.
적용하시려는 위젯/컬럼의 [고급]에서 'CSS 클래스' 자리에 원하시는 효과를 적으면 됩니다.
<적용가능한 효과>
-----------------------
slide-up
slide-down
slide-left
slide-right
zoom-in
--------------------------------------
<적용사례>
