마우스 이펙트02

If you are not willing to risk the usual, you will have to settle for the ordinary. – Jim Rohn

만약 네가 리스크를 무릅쓰지 않으려면, 어쩔 수 없이 평범함에 안주할 것이다. (짐 론)

소스보기

JAVASCRIPT

Jquery

GASP

javascript


javascript

// 선택자
    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;          // 이미지 변경 간격시간

//애니메이션
    sliderInner.style.transform = "translateX(-0px)";       // -800 * 0
    sliderInner.style.transform = "translateX(-800px)";     // -800 * 1
    sliderInner.style.transform = "translateX(-1600px)";    // -800 * 2
    sliderInner.style.transform = "translateX(-2400px)";    // -800 * 3
    sliderInner.style.transform = "translateX(-3200px)";    // -800 * 4

// 자바스크립트
    sliderInner.style.transition = "all 0.6s"
    setInterval(() => {
        currentIndex = (currentIndex + 1) % sliderCount;
        sliderInner.style.transform = "translateX("+ -800 * currentIndex + "px)";
    }, sliderInterval);

jquery


jquery

// 선택자
    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;          // 이미지 변경 간격시간

// jquery
    setInterval(() => {
        currentIndex = (currentIndex + 1) % sliderCount;
        $(".slider__inner").css("position", "relative");
        $(".slider__inner").animate({left: -800 * currentIndex}, 600);

}, sliderInterval);