인트로 화면 페이지 첫 진입시에만 작동되게 할 수 있을까요??

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
인트로 화면 페이지 첫 진입시에만 작동되게 할 수 있을까요??

QA

인트로 화면 페이지 첫 진입시에만 작동되게 할 수 있을까요??

답변 4

본문

<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 로 돌려주는 로직을 더 넣어보세요.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 0
© SIRSOFT
현재 페이지 제일 처음으로