la rodonte 클론코딩

jy·2022년 9월 8일
0

1.메인 화면

다음은 메인화면의 동영상 두 개 중 클릭한 것만 재생시키고 z-index 숫자를 높여 위로 올리고, 나머지는 정지시키는 동작이다.
처음에는 슬라이드의 응용인 줄 알고 swiper를 사용하려고 했는데 그 방법으로는 실패했고, 제이쿼리를 사용해서 만들 수 있었다.

<script>
    //item ->이건 본인 마음이라 이름을 다 바꿀수 있음-자기자신이란 뜻.
    //visual-item갯수만큼 실행한다(each)
    $('.visual-item').each(function (index, item) { //순서index와 나item 자신을 받을수 있음.
        idx = $(this).data('index');
        $(this).css({left: 200 * index})
	//인덱스*왼쪽에서 200px이동. 첫번째영상의 인덱스는 0이기 때문에 이동하지 않고 두번째의 인덱스가
    //1이기 때문에 200px만큼 왼쪽에서 이동을 하여 두 요소가 일부 겹치게 해 준다.
    })

    $('.visual-item').click(function () {
        $('.video1').get(0).pause();
        $('.video2').get(0).pause();
        $(this).find('video').get(0).play();
        //모든 비디오를 정지하고, 선택한 비디오만 플레이 시킨다.

        idx = $(this).index();
        
        $(this).addClass('active').siblings().removeClass('active');
        //액티브 클래스는 클릭한 요소만 부여하고 형제 요소는 제거한다.

        
        item = $('.desc-wrap').eq(idx).find('.hide-el')
		//eq 선택 ,idx순서 가져올때 사용  
        
        const all=gsap.to('.desc-wrap .hide-el', {y:'110%',paused: true,'z-index':1})
        const motion = gsap.to(item, {delay:0.5, y: 0,stagger: 0.1,paused: true,'z-index':2})
        all.play()
        motion.play()
        //gsap의 이름을 all, motion으로 각각 짓고 클릭하면 둘다 실행시킨다.
    })
    $('.visual-item').eq(0).trigger('click')
    //셀렉터에 해당하는 요소중 첫번째것 (0부터 시작) 화면을 열자마자 실행시킨다.
</script>

2.GSAP

GSAP - GreenSock
위에서도 사용했지만, gsap는 자바스크립트 애니메이션 라이브러리이다. 간단하게 애니메이션을 만들 수 있고 특히 스크롤 트리거를 이용한 효과가 웹사이트를 더 세련되게 보이게 한다. gsap를 사용하기 위해선 먼저 다음과 같은 스크립트를 html파일의 head부분에 넣어주어야 한다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>

사용하는 애니메이션 동작으로는 세 가지가 있다.

gsap.from 현재를 기준으로 이전 설정
gsap.to 현재를 기준으로 이후 동작 설정
gsap.fromTo 전과 후 양쪽 동작 설정

스크롤 트리거를 사용하는 방법은 아래와 같다.gsap.from을 사용했지만 to나 fromTo를 사용해도 방법은 같다.

<script>
gsap.from(".stage-img", { //선택한 요소의 현재 이전 동작을
  scrollTrigger: {
    trigger:'.sc-stage',//sc-stage 지점에서
    start:"0% 80%",//시작 윈도우 기준 0%, 트리거 기준 80%
    end:"100% 80%", //종료 윈도우 기준 100%, 트리거 기준 80%
    markers:true,//start와 end 위치가 화면상에 표시된다.
    scrub:1,//스크럽을 설정하면 트리거 위치 이전으로 벗어났을 때 동작이 원래대로 되돌아간다.
  },
  y:10, //y축으로 10px이동(+10px->현재 위치)
  opacity:0,//투명도는 0으로 변경(투명도0->현재 투명도(1))
  
});
</script>

헤더의 메뉴 버튼을 누를 때도 간단한 gsap동작을 넣었다. 메뉴창이 실행되면서 투명도 1로 서서히 나타나고 display는 block, 동작이 끝나면 바로 멈추도록 했다.
play()는 동작실행 명령, reverse()는 실행한 동작의 반대로 돌아가는 것이다.

<script>
$('.header .link-menu').click(function (e) {
        e.preventDefault();
        $('.link-menu').toggleClass('active');

        if ($('.menu-pop').hasClass('active')) {
            $('.menu-pop').removeClass('active')
            $('body').removeClass('hidden')
            menu.reverse()
        } else {
            $('.menu-pop').addClass('active')
            $('body').addClass('hidden')
            menu.play()
        }
        
    })

    menu = gsap.to('.header .menu-pop',{
        opacity:1,
        display:'block',
        paused:true
    })

</script>

참고 블로그
[GSAP] 애니메이션 사용법
[GSAP] 애니메이션 사용법 (중급 - ScrollTrigger)
태그별 정리

0개의 댓글