초보자나 프로 선수라면이 글은 모든 사람을 위해 그/그녀의 CSS 애니메이션을 뛰어난 수준으로 만들고 싶어 하는 것이다.만약 사람들이 당신의 CSS 기술에 대해 놀라움을 느끼게 하려면, 이 글을 읽어야 합니다.이 강좌에서는 제품 목록을 탐색할 수 있도록 매끄러운 애니메이션을 만드는 법을 배울 것입니다.먼저 flexbox를 사용하여 디자인을 만들고 다른 클래스를 사용하여 요소에 애니메이션을 추가합니다.너도 JS로 이걸 만들 수 있어.전반적으로 말하면, 이것은 매우 재미있는 창조가 될 것이다.
그러니 더 많은 시간을 낭비하지 않고 시작합시다.프로젝트 프레젠테이션을 보거나 코드를 더 잘 이해하려면 다음 강좌를 보십시오.

비디오 자습서

I appreciate if you can support me by subscribing my youtube channel.

Source Code

비밀 번호

그래서 시작하기 전에 우리의 폴더 구조를 알아야 합니다.

Download Images여기서부터.
그래.인코딩을 시작합시다.

왼쪽.

은마르코프 모형!우리는 헤딩 왼쪽부터 시작한다.HTML 기본 템플릿을 처음 작성하려면 제목과 링크style.css 및 app.js 파일을 입력합니다.니가 이걸 다 완성하면이 내부 body 라벨을 인코딩합니다.

<div class="left-side">
    <span class="logo">fashion</span>
    <div class="sm-product">
        <h1 class="product-index">01</h1>
        <div class="sm-product-img-container">
            <img src="img/img1.jpg" class="sm-product-img" alt="">
        </div>
        <p class="sm-product-des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut mollitia adipisci aspernatur</p>
    </div>
    <div class="social-link">
        <img src="img/facebook.png" class="social-link-img" alt="">
        <img src="img/instagram.png" class="social-link-img" alt="">
    </div>
</div>

좋습니다. Goad 디자인처럼 보일 수 있도록 CSS를 사용해야 합니다.그래서 우리가 그것을 설계합시다.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'roboto', sans-serif;
}

body{
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
}

.left-side{
    width: 15vw;
    height: 100%;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
    display: flex;
    align-items: center;
}

.logo{
    text-transform: uppercase;
    font-weight: 700;
    font-size: 2vw;
    position: absolute;
    top: 4vw;
    left: -1.5vw;
    transform: rotate(-90deg);
    user-select: none;
}

.sm-product{
    width: 100%;
    height: auto;
}

.product-index{
    font-size: 2vw;
    text-align: center;
}

.sm-product-img-container{
    position: relative;
    margin: .5vw 0;
    height: 15vw;
    overflow: hidden;
}

.sm-product-img{
    width: 100%;
    height: 15vw;
    object-fit: cover;
}

.sm-product-des{
    text-align: right;
    padding: 0 .5vw;
    line-height: 1.5vw;
    font-size: 1vw;
    color: rgba(0, 0, 0, 0.5);
}

.social-link{
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}

.social-link-img{
    width: 1.6vw;
    height: 1.6vw;
    margin: .5vw;
    cursor: pointer;
}

출력

은마르코프 모형!좋아 보이죠?나 진짜 좋아해.네, 지금 오른쪽으로 돌아갈게요.

우측

읊다, 읊조리다그래서 우리는 반드시 정확한 선택을 해야 한다.히드록시 메틸 멜라민 메틸 에테르!자.left-side 요소 다음에 이 HTML을 작성합니다."더 잘 설명하기 위해 동영상 튜토리얼을 보세요."

<div class="right-side">
    <img src="img/img1.jpg" class="backdrop-img" alt="">
    <div class="content">
        <div class="product-detail">
            <h1 class="product-name">yellow tracksuit</h1>
            <p class="product-des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore sunt assumenda doloribus, fugiat provident nemo.</p>
            <a href="#" class="buy-btn">buy now</a>
            <button class="nxt-btn"><img src="img/arrow.png" alt=""></button>
        </div>
        <div class="product-img-container">
            <img src="img/img1.jpg" class="product-img" alt="">
        </div>
    </div>
</div>

마찬가지로 우리는 이 스타일을 가지고 있지만 그 전에 Roboto와Sirin Stencil 구글 글씨체에head 라벨을 추가합니다.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Sirin+Stencil&display=swap" rel="stylesheet">

네, 디자인할 수 있습니다right-side.

.right-side{
    width: 85vw;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.backdrop-img{
    width: 25vw;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    object-fit: cover;
    filter: blur(.5vw);
    user-select: none;
}

.content{
    width: 80%;
    display: flex;
    align-items: center;
    position: relative;
}

.product-detail{
    width: 60%;
}

.product-name{
    font-size: 8vw;
    text-transform: capitalize;
    font-family: 'Roboto', sans-serif;
    font-family: 'Sirin Stencil', cursive;
    font-weight: 300;
    line-height: 9vw;
}

.product-des{
    margin: 4vw 0;
    width: 90%;
    font-size: 1.2vw;
    line-height: 2vw;
    color: rgba(0, 0, 0, 0.5);
}

.buy-btn{
    text-decoration: none;
    color: #000;
    text-transform: capitalize;
    font-size: 1.2vw;
}

.nxt-btn{
    border: none;
    background: none;
    display: flex;
    margin-left: auto;
    margin-top: -1.2vw;
    margin-right: 1vw;
    cursor: pointer;
    justify-content: center;
    user-select: none;
}

.nxt-btn img{
    width: 60%;
}

.product-img-container{
    width: 40%;
    height: 40vw;
    position: relative;
    overflow: hidden;
}

.product-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

출력

네.그래서 우리 스타일은 끝났어.나는 우리가 이미 50% 이상을 완성했다고 생각한다.그럼 왜 시간을 낭비합니까? 지금 애니메이션을 만듭시다.

애니메이션

그래서 우리 사이트나 부분에서 우리는 세 개의 애니메이션을 가지고 있다.

애니메이션 페이드 아웃 - 로드할 때 재생됩니다.

Black div 슬라이드 애니메이션 - 제품을 변경할 때 재생합니다.

페이드 아웃 애니메이션 - 제품을 변경할 때 재생합니다.

자, 우리 시작합시다.최고층에 있습니다.이 overlay 요소를 만듭니다.

<div class="overlay"></div>

중첩 요소는 흰색 배경이 있는 모든 요소 위에 배치됩니다.그것은 적재할 때 천천히 사라진다.

.overlay{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    opacity: 1;
    z-index: 9;
    animation: fade-out 2s forwards 1;
    pointer-events: none;
}

@keyframes fade-out{
    to{ opacity: 0 }
}

나는 이것이 그것을 성공하게 할 수 있기를 바란다.Fir Black div 슬라이드 애니메이션slide 클래스가 필요합니다.우리는 JS에서 이 종류로 전환할 것이다.그래서 이 클래스를 사용하여 ::before 요소를 만듭니다.

.slide::before{
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #000;
    animation: slide-left 1s linear 1;
}

@keyframes slide-left{
    to{ left: 100% }
}

좋습니다. 이것은 애니메이션을 만들 것입니다. 그러나 중요한 것은 이 슬라이드 종류를 이 두 요소에 추가하기만 하면 됩니다.

<div class="sm-product-img-container slide">

///

<div class="product-img-container slide">

이제 slide 클래스를 위의 요소에 수동으로 추가하면 애니메이션을 검사할 수 있습니다.그러나 검사가 끝난 후 slide 클래스를 삭제해야 합니다.
마지막은 페이드 페이드 효과입니다.이 점에 대해 우리는 fade 클래스를 다시 사용하고 JS 전환을 사용할 것이다

.fade{
    pointer-events: none;
    animation: fade 1s forwards 1;
}

@keyframes fade{
    0%, 100% { opacity: 1 }
    45%, 60% { opacity: 0 }
}

우리는 애니메이션에서 잠시 휴식을 취했다. 텍스트를 바꾸는 데 시간이 좀 걸리기 때문에, 변경 과정을 보고 싶지 않다.

응용 프로그램.js

지금까지 잘했어.이제 JS의 모든 클래스를 전환하고 제품을 변경하기만 하면 됩니다.그래서 시작하기 전에 위의app.js 링크에서 다운로드download images를 권장합니다.이 파일에서 productData 그룹을 찾을 수 있습니다.이 수조는 우리 제품과 관련된 데이터를 포함합니다.
좋습니다. 우선 JS의 모든 요소를 선택하십시오.

const nxtBtn = document.querySelector('.nxt-btn');

let smImgContainer = document.querySelector('.sm-product-img-container');
let smImg = document.querySelector('.sm-product-img');
let productIndex = document.querySelector('.product-index');
let smProductDes = document.querySelector('.sm-product-des');

let productImgContainer = document.querySelector('.product-img-container');
let productImg = document.querySelector('.product-img');
let backdropImg = document.querySelector('.backdrop-img');

let productDetail = document.querySelector('.product-detail');
let productName = document.querySelector('.product-name');
let productDes = document.querySelector('.product-des');

let currentProduct = 0;

이것은 매우 많은 원소다.안 그래?currentProduct 변수는 네비게이션을 사용할 때 현재 제품을 추적합니다.
클릭 이벤트를 에 추가nxtBtn

nxtBtn.addEventListener('click', () => {

    if(currentProduct >= productData.length - 1){
        currentProduct = 0;
    } else{
        currentProduct++;
    }

    productIndex.innerHTML = productData[currentProduct].index;
    smProductDes.innerHTML = productData[currentProduct].des.slice(0, 80);

    smImgContainer.classList.add('slide');
    productImgContainer.classList.add('slide');
    backdropImg.classList.add('fade');
    productDetail.classList.add('fade');

    setTimeout(() => { // in the mid of animation, changing the contents
        productName.innerHTML = productData[currentProduct].name;
        productDes.innerHTML = productData[currentProduct].des;
        smImg.src = productImg.src = backdropImg.src = `img/${productData[currentProduct].image}`;
    }, 500);

    setTimeout(() => { // removing all animation classes
        smImgContainer.classList.remove('slide');
        productImgContainer.classList.remove('slide');
        backdropImg.classList.remove('fade');
        productDetail.classList.remove('fade');
    }, 1000);

})

위의 코드는 매우 간단합니다. 우선if/else 조건 검사currentProduct로 그 값을 변경합니다.그런 다음 요소의 innerHTMl을 설정하고 애니메이션 클래스를 추가합니다.setTimeout를 사용하여 500ms 이후에 내용을 변경했고 1000ms 후에 애니메이션 클래스를 삭제했습니다.
이렇게잘했어, 동료들.우리의 헤딩은 끝났다.
나는 네가 모든 일을 이해하길 바란다.만약 궁금한 것이 있거나 제가 빠뜨린 것이 있다면, 평론에서 저에게 알려 주십시오.

이 가능하다, ~할 수 있다,...

제 유튜브 채널을 구독해 주셔서 감사합니다.나는 아주 좋은 인터넷 콘텐츠를 만들었다.
참고로 2022년 1월부터 유튜브 채널에서 CSS 고급 테마 시리즈를 시작하겠습니다. 거기서 CSS flex box/grid/positions와 모든 다른 개념을 가르칠 것입니다.나는 너에게 복잡한 웹 디자인을 어떻게 분해하는지 가르쳐 줄 것이다.각 영상의 끝에 나는 너에게 1-2개의 웹 디자인을 해서 네가 스스로 코드를 작성하도록 할 것이다.그리고 너는 나의 인스타그램에 너의 창작을 제출할 수 있다.나는 이 시리즈 이후에 너는 나 같은 웹 디자인을 모두 작성할 수 있을 것이라고 믿는다.그래서 만약 네가 흥미가 있다면 반드시 나의 채널을 구독해야 한다😉
Source Code
읽어주셔서 감사합니다.