[JAVASCRIPT] 위아래로 움직이는 SLIDE 효과 웹페이지 만들기

JAVASCRIPT SLIDE EFFECT 웹페이지 만들기

자바스크립트로 슬라이드 유형 웹페이지를 구현해보자.

 

완성화면

 

 

 

 

세가지 방식으로 스크립트를 적용해 보았습니다

 

 

🏳‍🌈00. 공통 선택자 부분

    <script>
        const sliderWrap = document.querySelector(".slider__wrap");
        const sliderImg = sliderWrap.querySelector(".slider__img");     //보여지는 영역
        const sliderInner = sliderWrap.querySelector(".slider__inner"); //움직이는 영역
        const slider = sliderWrap.querySelectorAll(".slider");          //개별이미지
       
        let currentIndex = 0;               //현재 보이는 이미지
        let sliderCount = slider.length;    //이미지 갯수
        let sliderInterval = 3000;          //이미지 변경 간격 시간
    </script>

 

✈01. JAVASCRIPT

    <!-- //javascript -->
    <script>
    	//풀어서 작성한 이미지의 이동
        //sliderInner.style.transform = translateX("0px");
        //sliderInner.style.transform = translateX("-800px");
        //sliderInner.style.transform = translateX("-1600px");
        //sliderInner.style.transform = translateX("-2400px");
        //sliderInner.style.transform = translateX("-3600px");
        //sliderInner.style.transform = translateX("0px");
   
        sliderInner.style.transition = "all 0.6s"; //애니메이션설정
        setInterval(() => {
            currentIndex = (currentIndex + 1) % sliderCount;
            sliderInner.style.transform = "translateY("+ -450 * currentIndex +"px)";
            console.log(currentIndex)
        }, sliderInterval);
    </script>

 

✈02. 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(sliderInner,{
                    y : -450 * currentIndex,
                    duration : 1, 
                    ease: "elastic.out(1, 0.9)"
                })
            }, sliderInterval);
        </script>

🏴. GSAP CDN소스를 가져와 적용합니다.

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js

 

✈03. jQuery

   <!-- //jQuery -->
   //jQuery CDN
   <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").animate({top : -450 * currentIndex}, 1000, "easeInOutQuint")
            
            console.log(currentIndex)
        }, sliderInterval)
   </script>

🏴. jQuery CDN소스를 가져와 적용합니다.

https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js

https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js(애니메이션용)

 

 

🏁. setInterval()

setInterval() 함수는 일정한 시간 간격으로 특정한 작업을 반복해서 실행할 수 있도록 하는 JavaScript 내장 함수입니다.

 

setInterval() 함수는 두 개의 인자를 받습니다.

setInterval (( ) => { }, 시간)

첫 번째 인자는 반복해서 실행 할 함수이고, 두 번째 인자는 함수를 실행할 시간 간격(밀리초 단위)입니다. 예를 들어, 다음과 같이 함수를 1초 간격으로 실행할 수 있습니다.

setInterval(function() {
  console.log('Hello, world!');
}, 1000);

 

 

🏁. CDN

CDN은 Content Delivery Network의 약어로, 콘텐츠 전송 네트워크를 의미합니다.

인터넷 상에서 다양한 위치에 위치한 서버들로부터 콘텐츠를 받아와 사용자에게 전송하는 기술입니다. 일반적으로 대규모의 웹 사이트에서 많은 양의 정적인 콘텐츠(예: 이미지, 동영상, 문서 등)를 빠르고 안정적으로 제공하기 위해 사용됩니다.

CDN은 사용자가 콘텐츠를 요청할 때, 사용자와 가장 가까운 서버에 있는 콘텐츠를 전송하므로, 콘텐츠 전송 시간을 줄여 사용자의 웹 페이지 로딩 속도를 높일 수 있습니다. 또한, 트래픽 분산을 통해 서버의 부하를 줄이고, 고가용성과 안정성을 보장할 수 있습니다.

CDN 서비스는 대부분의 경우 비용이 발생하지만, 대규모 웹 사이트나 글로벌 서비스를 제공하는 경우, 사용자 경험과 성능 개선을 위해 필수적인 기술 중 하나입니다.