클릭했을때 센터링 애니메이션

jominjimail commented 4 years ago

따란🤧😫🔫

Jun-05-2020 04-15-49

목표 움직임 transform: translate(-20px, 0px)

KakaoTalk_Photo_2020-06-05-13-21-40

잠깐 짚고넘어가야 할 용어들

const clientWidthCenter = document.body.clientWidth / 2;
const scrollWidth = document.getElementById('section_scroll').getBoundingClientRect().width;
const firstCardElement = document.getElementById('firstCard');
const firstCardX = firstCardElement.getBoundingClientRect().x;

const { x, width } = event.currentTarget.getBoundingClientRect(); // targetCard
const targetCenter = x + width / 2;

const scrollBegin2targetCenter = Math.abs(firstCardX) + targetCenter;
const targetCenter2scrollEnd = scrollWidth - scrollBegin2targetCenter;

const clientCenter2targetCenter = clientWidthCenter - targetCenter;

KakaoTalk_Photo_2020-06-05-13-24-27

~여러분 안 읽을거 알지만 🤧~ 간단한 예시 설명

KakaoTalk_Photo_2020-06-05-13-30-20

1번 카드: Case1 : 움직이지 않는다. {canMove: false, translate: 0}

2번 카드: Case2 : 보강하면서 움직인다. {canMove: true, translate: 0}

3번 카드: Case3 : 쉽게 움직인다. {canMove: true, translate: -5}

4번 카드: Case3 : 쉽게 움직인다. {canMove: true, translate: -5}

5번 카드: Case2 : 보강하면서 움직인다. {canMove: true, translate: 0}

6번 카드: Case1 : 움직이지 않는다. {canMove: false, translate: 0}

// Case1 : 움직이지 않는다. (default)
let canMove = false;
let translate = 0;

if (client2target < 0) {
    // <---
    if (target2End - Math.abs(client2target) > 0) {
        // Case3: 쉽게 움직인다.
        canMove = true;
        translate = client2target;
        if (target2End < clientHalfWidth) {
            // Case2: 보강하면서 움직인다.
            translate = client2target + (clientHalfWidth - target2End);
        }
    }
} else if (client2target >= 0) {
    // --->
    ...