웹디자인기능사 실기 연습_슬라이더 이펙트 위로 움직이기

웹디자인기능사 실기 연습_슬라이더 이펙트 위로 움직이기

 

 

기본 세팅 정보는 아래 링크를 통해 확인해주세요~!

웹디자인기능사 실기 연습_슬라이더 이펙트 트랜지션 효과

 

💜 슬라이더 이펙트 03

코드 보기 / 완성 화면

 

이번엔 위로 움직이게 작업해줬습니다.

 

style

<style>
    /* slider__wrap */
    .slider__wrap {
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .slider__img {  /* 이미지가 보이는 영역 */
        position: relative;
        width: 800px;
        height: 450px;
        overflow: hidden;
    }
    .slider__inner {  /* 이미지 움직이는 영역 = 전체 이미지를 감싸고있는 부모 : 움직이는 영역 */
        /* display: flex;
        flex-wrap: wrap; */
        width: 4000px;
        height: 450px;
    }
    .slider {  /* 개별적인 이미지 */
        position: relative;
        width: 800px;
        height: 450px;
    }
</style>

우선 css에서 

slider__inner에 

display:flex와 flex_wrap: wrap을 빼줘야 합니다.

 

script

sliderInner.style.transition = "all 0.6s";

setInterval (() => {
    currentIndex = (currentIndex + 1) % sliderCount; //1 2 3 4 0 1 2 3 4 0

    // console.log(currentIndex);

    sliderInner.style.transform = "translateY("+ -450 * currentIndex + "px)";

}, sliderInterval);

그리고 스크립트 부분에서 translateX를 Y로 변경해주고

height값인 -450으로 변경해주면 사진이 위로 올라갑니다.

 

 

GSAP

<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
    setInterval(() => {
        currentIndex = (currentIndex + 1) % sliderCount;

        gsap.to(".slider__inner", {
            y : -450 * currentIndex,
            duration : 1,
            ease: "elastic.out(1, 0.3)"
        })

    }, sliderInterval);
</script>

2번에서와 마찬가지로 GSAP라이브러리를 사용해 이미지 슬라이더를 만듭니다.

 

CDN에서 제공하는 URL을 사용합니다.

 

위와 같이 y와 -450만 변경해주었습니다.

 

jQuery

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
        setInterval(() => {
        currentIndex = (currentIndex + 1) % $(".slider").length;

        $(".slider__inner").css("position", "relative");
        $(".slider__inner").animate({top : -450 * currentIndex}, 1000, "easeOutElastic");

    }, sliderInterval);
</script>

jQuery도 마찬가지로 top으로 변경하고 -450으로 변경해

위로 갈 수 있게 해줬습니다.