Day5 : 스타벅스 웹사이트 만들기 / 스크롤 위치 계산 애니메이션

 

HTML/CSS/JS로 스타벅스 웹사이트 만들기

 

개요

 

프로젝트명 : HTML/CSS/JS로 스타벅스 웹사이트 만들기

강의 : 패스트캠퍼스 프론트엔드

분류 : 클론코딩

주요 강의 내용

- html : basic html + font, favicon

- css : basic css, 가상 클래스, bem

- js : basic js, swiper(슬라이드), toggle, gsap.to(순차적 애니메이션), Youtube iframe APII 등

사용 툴 : HTML, CSS, JavaScript

 

패스트캠퍼스 강의를 정리한 내용으로, 개인공부 후 기록하기 위한 목적임으로 내용 상에 오류가 있을 수 있습니다.

 

---

DAY 5
: 스크롤 위치 계산 애니메이션

 

스크롤 위치 계산 애니메이션

* view

스크롤을 내릴때마다 각 section에 위치한 이미지들이 순차적으로 나오는 듯한 효과를 만든다.
스크롤의 위치를 계산없이 쉽게 제어하는 게 핵심이다.

---

* html code

scroll 됐을 때 나타나게 하고 싶은 해당 section 에 class 속성으로 'scroll-spy' 를 추가한다.

그리고 나타나게 할 이미지에 공통적으로 class 속성 'back-to-position'를 추가하고, 오른쪽으로 나타나는건 'to-right' , 왼쪽으로 나타나는건 'to-left'를 추가한다.

---

* js code

// Scroll Magic
const spyEls = document.querySelectorAll('section.scroll-spy');
spyEls.forEach(function(spyEl) {
    new ScrollMagic
        .Scene({
            triggerElement: spyEl,
            // 보여짐 여부를 감시할 요소를 지정
            triggerHokk: .8,
            // 감시하고 있는 요소가 판단되는 위치 (걸렸다고 판단이 되면 아래 메소드 실행)
        })
        .setClassToggle(spyEl, 'show')
        .addTo(new ScrollMagic.Controller());
        // 실제로 동작할 수 있도록 만들어 주는 요소
});

 

ScrollMagic 라이브러리

: 사용자의 현재 스크롤 위치에 쉽게 반응할 수 있도록 해주는 자바스크립트 라이브러리

 

구현한 ScrollMagic

: 스크롤의 위치가 section의 위에서 80% 되는 부분을 지나면 class 속성으로 'show'를 추가해준다.

 

강의 영상만으로는 순서, 요소들이 헷갈려서 검색해봤다.

* 참조문서

ScrollMagic

 

 

 

[ScrollMagic] 스크롤매직 라이브러리 - 기초편

---

* css code 1

.back-to-position {
    opacity: 0;
    transition: 1s;
}

.back-to-position.to-right {
    transform: translateX(-150px);
}

.back-to-position.to-left {
    transform: translateX(150px);
}

.show .back-to-position {
    opacity: 1;
    transform: translateX(0);
}

 

* 간단한 애니메이션은 ScrollMagic 대신 css 코드로 만든다.

 

- back-to-position 속성으로 투명(opacitiy)를 0으로 조절해서, 안보이게 만들어놓는다. 이 때, 전환효과(transition)로 1초를 넣어서 투명하게 바뀌는 데 1초 걸리도록 설정해놓는다.

- 오른쪽 / 왼쪽 모두 변환효과(transform)를 넣는데, X축(수평)으로 150px씩 이동하도록 설정한다.

- js에서 추가한 show에 해당하는 속성으론 다시 보일 수 있도록 투명도를 1로 수정하고, 원위치로 돌아오게 변환효과를 준다.

 

.show .back-to-position.delay-0 {
    transition-delay: 0s;
}

.show .back-to-position.delay-1 {
    transition-delay: .3s;
}

.show .back-to-position.delay-2 {
    transition-delay: .6s;
}
.show .back-to-position.delay-3 {
    transition-delay: .9s;
}

 

 

한꺼번에 요소들이 튀어나오지 않고 순차적으로 하나씩 나올 수 있도록 transition-delay를 추가한다.