인트로 화면 페이지 첫 진입시에만 작동되게 할 수 있을까요??
본문
<section class="intro">
<div class="img_wr"><img src="https://giresvenin2.cafe24.com/web/upload/img/logo.svg"></div>
</section>
<script>
const animationOptions = {
ease: 'expo.inOut'
}
const introAnimation = () => {
const tl = gsap.timeline({
defaults: {
ease: animationOptions.ease,
duration: 1,
}
});
tl.to('.intro__title', {
duration: 1.5,
y: 0,
autoAlpha: 1,
delay: 0.5,
})
.to('.intro__title', {
duration: 1.5,
y: -60,
autoAlpha: 0,
}, '-=0.6')
.to('.intro', {
y: '150%',
duration:3,
}, '-=0.8')
return tl;
}
const skewInElements = elements => {
const tl = gsap.timeline();
tl.from(elements, {
duration: 1,
ease: animationOptions.ease,
skewY: -5,
autoAlpha: 0,
y: 40,
})
return tl;
}
const fadeInElements = elements => {
const tl = gsap.timeline();
tl.from(elements, {
duration: 1,
ease: animationOptions.ease,
y: '50px',
autoAlpha: 0,
stagger: 0.1,
})
return tl;
}
const master = gsap.timeline({
paused: false,
delay: 0.2,
});
master
.add(introAnimation())
</script>
처음 페이지 진입시에만 이 인트로가 작동하고 서브페이지 갔다가 다시 메인 진입하면 안 나타나게 할 수 있을까요 ????
답변 4
처음접속시 인트롤을 index.html 으로 잡으세요
그러면 쉽습니다.
cookie 또는 localStorage 사용해서 구현 가능해요
자바스크립트에서 세션스토리지나 로컬스토리지를 사용하면 가능합니다.
저 코드전체를 함수로 만들고
스토리지변수가 true 일때만 함수를 실행하고
함수안에 스토리지변수를 false 로 돌려주는 로직을 더 넣어보세요.
세션이나 쿠키 하나 굽고 없으면 인트로 있으면 넘어가게 하는식?