[패스트캠퍼스] 웹퍼블리싱 강의 8주차 - 자바스크립트 응용예제(3)

임성장 2023. 7. 16. 15:00

728x90

오늘도 이어서 국비지원교육 과정으로 이뤄지는 "웹퍼블리싱 완전 정복 : 모션 디자인으로 완성하는 반응형 웹 디자인" 강의 중 자바스크립트와 SCSS을 통해 만드는 응용 예제를 다룰 것이다. SVG 이미지 파일의 특성을 이용한 세로형 슬라이드와 웹킷 마스크 기능을 이용한 시퀀스 모션 UI를 실습해보면서 배운 내용들을 포스팅할 것이다. 특히 SVG 이미지를 이용한 UI는 난이도가 높은 기술이 아님에도 웹 디자인 자체를 굉장히 인터렉티브하게 보일 수 있는 강의 내용이었다. 나중에 포트폴리오 웹페이지를 제작할 때 필히 사용할 것이다.

요약

SVG를 활용한 세로형 슬라이더
마스크를 활용한 풀스크린 동영상 갤러리

SVG를 활용한 세로형 슬라이더

HTML

"data-"

사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성
"data-"로 시작하여 사용자가 직접 작명 가능
특정한 데이터를 DOM 요소에 저장해두기 위한 목적.
getAttribute로 속성값을 불러올 수 있음
하나의 HTML 요소에 여러 데이터 속성을 동시에 사용할 수 있다.

CSS

path{
    stroke: #111; 
    stroke-width: 1; 
    fill: rgba(0, 0, 0, 0); 
    stroke-dasharray: 2400; 
    stroke-dashoffset: 2400; 
    transition: stroke-dashoffset 2s 0.5s, fill 0.5s 1.5s;
}

svg의 테두리를 stroke로 지정
background-color를 fill로 채움
해당 svg의 테두리가 보이지 않을 때까지 stroke-dasharray 값을 조정
hover 시 stroke-dasharray 값을 0으로 주면 펜으로 그려지는 듯한 모션

JS

function moveDown() {
    // 현재 보이고 있는 li, 인덱스
    let current_item = panel.querySelector(".on");
    let current_index = parseInt(current_item.getAttribute("data-index"));

    // 다음에 보일 인덱스
    let prev_index = null;

    // 현재 보이고 있는 인덱스가 마지막이 아니면 +1, 이면 첫화면
    current_index !== 0 ? (prev_index = current_index - 1) : (prev_index = len);

    // 현재 보이고 있는 화면을 지우고 위로 올리는 모션
    current_item.classList.remove("on");
    current_item.classList.add("down");

    // 다음에 보일 인덱스를 미리 밑으로 보내기
    panel_li[prev_index].classList.add("up");

    setTimeout(() => {
        // 밑에서 위로 보내는 모션 만들기
        panel_li[prev_index].classList.remove("up");
        panel_li[prev_index].classList.add("on");
        // 위로 올린 li 안보이게 하기
        panel.querySelector(".down").classList.remove("down");

        enableClick = true;
    }, 800);
}

슬라이더를 가로로 3등분한다고 생각하고

가운데 부분은 현재 보이는 요소

위 부분은 보였던 요소가 사라지는 공간

아래 부분은 보일 요소가 숨겨져있는 공간

마스크를 활용한 풀스크린 동영상 갤러리

HTML

mask의 원리

겹쳐져 있는 두 요소 중 위쪽 레이어에 적용
- 마스크 이미지에서 투명한 부분이 뚫려 있는 부분
- 검은색이 막혀있는 부분

CSS

perspective

하위 요소를 관찰하는 원근 거리를 설정
perspective 값이 작아질수록 가깝게 느껴짐.
perspective는 관찰하고자 하는 요소들의 상위요소에 지정

mask

.mask{
    -webkit-mask: url(../src/mask1.png);
    -webkit-mask-size: 2300% 100%;
    animation: mask-play 1.4s steps(22) forwards;
}

webkit 기반 브라우저: 크롬 웨일 엣지
접두사를 이용해서 webkit 호환 기능 사용
마스크 이미지에 나열된 사진의 개수 * 100% 만큼의 가로 사이즈 지정
애니메이션의 steps은 나열된 사진의 개수 - 1장으로 설정
steps이란 몇 번에 걸쳐서 해당 애니메이션을 실행할 것인지 설정

728x90