[Javascript] translate를 이용한 row scroll

🔍️ 구현해야 할 부분

저번이랑 같은 rowscroll이라 구현하기 쉬울 것 같다고 생각했는데....! 이번엔 스크롤로는 구현을 할 수 없어서 translation을 사용해 보았다.

 

1️⃣ 초기화면

🖼️ HTML

        <div class="cont3-wrap">

            <div class="brand1">

                <div class="brand-wrap3">

                    <img src="./img/이미지1.png" class="brand-img1">

                    <img src="./img/이미지2.png" class="brand-img2">

                    <img src="./img/이미지5.png" class="brand-img5">

                </div>

                <div class="plus-wrap3">

                    <img src="./img/더하기.svg" class="plus-img3">

                    <img src="img/더하기_호버.svg" class="plus-hover3">

                    <img src="img/빼기.svg" class="minus-img3">

                    <img src="img/빼기_호버.svg" class="minus-hover3">

                </div>

                <div class="comment-wrap3">

                    <div class="red-arrow">

                        <img src="img/화살표(red).svg" class="r-arrow">

                    </div>

                    <span class="brand-title">당신의 착한 쉼표,</span><span class="bold">데일리라이크</span>

                    <p class="brand-con">

                        직접 갈아 만든 드립 커피 한 잔, 달콤한 레몬 쿠키 한 조각,

                        손으로 한 땀 한 땀 만들어 낸 티 코스터, 당신의 착한 쉼표.

                        dailylike. Dailylike는 "로맨틱한 휴식." 이라는 컨셉을 토대로,  

                        여성을 타겟으로 자신의 주변과 일상들을 소중히 여기고

                        가꿀 줄 아는 여성들을 위한 작은 공간을 만들어 갈 예정입니다.

                    </p>

                </div>

            </div>

        </div>

🎨 CSS

#content3 {

    position: relative;

    width: 100%;

    left: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    background-color: #fff;

    padding: 140px 0;

}

.cont3-wrap {

    height: 544px;

    display: flex;

    align-items: center;

    width: 1060px;

    justify-content: space-around;

    z-index: 2;

    margin-bottom: 50px;

    position: relative;

    margin: 0 auto;

    padding-bottom: 50px;

}

 

.brand1 {

    display: flex;

    width: 1040px;

    justify-content: space-between;

    align-items: center;

}

 

img.brand-img1 {

    position: relative;

    z-index: 10;

}

img.brand-img5 {

    position: absolute;

    top: 0;

    left: 0;

    transform: rotate(-10deg);

    transition: transform 0.3s ease;

}

img.brand-img2 {

    position: absolute;

    top: 0;

    left: 0;

    transform: rotate(10deg);

    transition: transform 0.3s ease;

}

 

2️⃣ hover 화면

🎨 CSS

달라진게 없어 보이지만 각도가 다른 것을 알 수 있다 ㅎㅎ..

.cont3-wrap:hover .brand-img5{

    transform: rotate(-15deg);

}

.cont3-wrap:hover .brand-img2{

    transform: rotate(15deg);

}

 

3️⃣ toggle 화면

📃 Javascript

부드럽게 닫히고 열리는 느낌을 주기 위해서 트랜지션을 주었다.

    //인기 브랜드

    function toggleBrand(brandDetail, plusBtn, plusImg, minusImg, brandWrap, showBrand, scrollBrand) {

        if (!brandDetail) {

            plusBtn.css({"left": "258px", "transition": "left 0.3s ease"});

            plusImg.css({"opacity": "0"});

            minusImg.css({"opacity": "1"});

            brandWrap.css({

                "opacity": "0",

                "visibility": "hidden",

                "transition": "opacity 0.3s ease, visibility 0.3s ease"

            });

            showBrand.css({

                "opacity": "1",

                "visibility": "visible",

                "transition": "opacity 0.3s ease, visibility 0.3s ease"

            });

            scrollBrand.css({

                "transform": "translateX(0)"

            });

            brandDetail = true;

        } else {

            plusBtn.css({"left": "", "transform":"","transition": "left 0.3s ease"});

            plusImg.css({"opacity": ""});

            minusImg.css({"opacity": ""});

            brandWrap.css({

                "opacity": "",

                "visibility": "",

            });

            showBrand.css({

                "opacity": "",

                "visibility": "",

            });

            brandDetail = false;

        }

        return brandDetail;

    }

 

4️⃣ scroll 구현

📃 Javascript

    function isToggle(brandIndex) {

        var brandDetail = false;

        var plusBtn = $(`.plus-wrap${brandIndex}`);

        var plusImg = $(`.plus-img${brandIndex}, .plus-hover${brandIndex}`);

        var minusImg = $(`.minus-img${brandIndex}`);

        var brandWrap = $(`.brand-wrap${brandIndex}, .comment-wrap${brandIndex}`);

        var showBrand = $(`.show-brand${brandIndex}`);

        var scrollBrand = $(`.scroll-brand${brandIndex}`);

   

        plusBtn.on("click", function() {

            brandDetail = toggleBrand(brandDetail, plusBtn, plusImg, minusImg, brandWrap, showBrand, scrollBrand);

        });

   

        var sliders = document.querySelector(`.scroll-brand${brandIndex}`);

        var plusWrap = document.querySelector(`.plus-wrap${brandIndex}`);

        setupSlider(sliders, plusWrap);

    }

   

    isToggle(1);

    isToggle(2);

    isToggle(3);

   

    var maxTranslation = 1120;

   

    function setupSlider(sliders, plusWrap) {

        let isDown = false;

        let startXs;

        let scrollLefts;

   

        sliders.addEventListener('mousedown', (e) => {

            isDown = true;

            startXs = e.pageX - sliders.offsetLeft;

            const style = getComputedStyle(sliders);

            scrollLefts = parseInt(style.transform.split(',')[4]) || 0;

        });

   

        document.addEventListener('mouseup', () => {

            isDown = false;

        });

   

        document.addEventListener('mousemove', (e) => {

            if (!isDown) return;

            e.preventDefault();

            const x = e.pageX - startXs;

   

            const currentTranslation = scrollLefts + x;

   

            if (currentTranslation >= -maxTranslation && currentTranslation <= maxTranslation) {

                sliders.style.transform = `translateX(${currentTranslation}px)`;

                plusWrap.style.transform = `translateX(${currentTranslation}px)`;

            }

        });

    }

getComputedStyle() : 요소의 현재 스타일을 가져오는 메소드

parseInt(style.transform.split(',')[4]) : translateX의 값을 가져와 정수로 변환

 

✨ 결과