🔥 EコマースウェブサイトをHTML、CSSとJSだけで作る方法

場合は、初心者やプロです.この記事は、彼/彼女のCSSアニメーションを優れたレベルにしたい人のためです.あなたのCSSスキルで人々を驚かせたいならば、あなたはこの記事を読まなければなりません.これでは、製品リストをナビゲートする滑らかなアニメーションを作成することを学びます.最初にFlex Boxを使用してデザインを作成し、別のクラスを使用して要素にアニメーションを追加します.また、これを作る際にJSを使用します.合計では、これは多くの楽しみを作成することでしょう.
それで、より多くの時間を浪費することなく、始めましょう.プロジェクトデモを参照するか、コードのより良い理解のために、以下のチュートリアルを見ることができます.

ビデオチュートリアル

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

Source Code

コード
ですから、起動する前に、フォルダの構造を知る必要があります.

Download Images ここから.
それで、大丈夫です.コーディングを始めましょう.

左側.
うーん!それで、我々は我々のヘッダーの左側で始まります.その最初のHTML HTMLテンプレートを作成するには、そのリンクと一緒にタイトルを与えるstyle.css and 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>

さて、私たちはこの広告をゴードデザインのようにするためにいくつかの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;
}

出力

うーん!それは素晴らしい探していません.私は本当にそれが大好き.OK、今すぐ右側に移動しましょう.

右側
ああ!それで、我々は右側を作らなければなりません.うーん!それを作る.このHTMLコードleft-side 要素.より良い説明のためにビデオチュートリアルを見てください

<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 and 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 %以上が完了したと思います.だから、なぜ時間を無駄に、アニメーションを作成しましょう.

アニメーション
したがって、当社のサイトやセクションでは、我々は3アニメーションがあります.

フェードアニメーション-負荷で再生.

ブラック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ブラック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% }
}

それで、これはそのアニメーションを作ります、しかし、重要です、我々はこれらの2つの要素にこのスライド・クラスを加えなければならないだけです.

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

///

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

今すぐ手動で追加するだけでアニメーションをチェックすることができますslide 上記の要素へのクラス.しかし、チェックを行った後、slide クラス.
最後の、フェード効果.再び、我々はこれを使いますfade クラスでこれをトグルします

.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;

Thats多くの要素.じゃない.currentProduct 変数を使用すると、それらをナビゲートしながら、現在の製品を追跡します.
では、Clickイベントを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 .
それで、それです.偉大な労働者.ヘッダを使用します.
私は、あなたが各々とすべてを理解したことを望みます.あなたが疑いを持っているか、私が何かを逃したならば、私にコメントで知らせさせました.

あなたが役に立つかもしれない記事

あなたが私のYouTubeチャンネルを予約することができるならば、私は本当に感謝します.私は素晴らしいWebコンテンツを作成します.
ところで、2022年1月から、私はCSSフレックスボックス/グリッド/位置と他のすべての概念について教えます私のYouTubeチャンネルのCSSアドバンス話題シリーズを開始しています.私はどのように複雑なWebデザインの内訳を作成することをお教えします.各ビデオの最後に、私はあなた自身もコード1 - 2のWebデザインを与える.そして、あなたは私のInstagramであなたを作成することを提出することができます.私は、シリーズの後、あなたが私のようなどんなウェブ設計でもコード化することができると確信します.それで、あなたが興味があるならば😉
Source Code
読書ありがとう