Coding animation website UIUX design

Animation Web design - với project template UIUX desgin.

Kênh youtube của mình đang xây dựng gồm 2 chủi series:

- Series chia sẽ code animation website design thông qua các project cho người đã có căn bản

- Series chia sẽ code animation website design thông qua các bài tập nhỏ cho người mới bắt đầu ( rất chi tiết).

Xem hướng dẩn chi tiết:

Phần 2:

Code HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<title>Document</title>
</head>
<body>
    <div class="container">
        <div class="header">
            <img src="avatar.jpg" class="logo" />

</div>
        <div class="background-rotate">
            <div class="bg-rotate"></div>
        </div>
        <h1>Page này nghịch code  <span style="color: #AD925C">(Lùn Dev)</span></h1>
        <div class="list">
            <div class="item" id="item_0">
                <img src="6.png" alt="">
                <img src="3.png" alt="">
                <img src="9.png" alt="">
                <img src="3.png" alt="">
                <div class="content">
                    <div class="itemtext"> <img src="6.png" alt=""> <span>45$</span><span>Sản phẩm</span> </div>
                    <div class="itemtext"> <img src="3.png" alt=""> <span>45$</span><span>Sản phẩm</span> </div>
                    <div class="itemtext"> <img src="9.png" alt=""> <span>45$</span><span>Sản phẩm</span> </div>
                </div>
            </div>
            <div class="item" id="item_1">
                <img src="5.png" alt="">
                <img src="1.png" alt="">
                <img src="8.png" alt="">
                <img src="1.png" alt="">
                <div class="content">
                    <div class="itemtext"> <img src="5.png" alt=""> <span>45$</span><span>Sản phẩm</span> </div>
                    <div class="itemtext"> <img src="1.png" alt=""> <span>45$</span><span>Sản phẩm</span> </div>
                    <div class="itemtext"> <img src="8.png" alt=""> <span>45$</span><span>Sản phẩm</span> </div>
                </div>
            </div>
            <div class="item" id="item_2">
                <img src="7.png" alt="">
                <img src="3.png" alt="">
                <img src="4.png" alt="">
                <img src="3.png" alt="">
                <div class="content">
                    <div class="itemtext"> <img src="7.png" alt=""> <span>45$</span><span>Sản phẩm</span> </div>
                    <div class="itemtext"> <img src="3.png" alt=""> <span>45$</span><span>Sản phẩm</span> </div>
                    <div class="itemtext"> <img src="4.png" alt=""> <span>45$</span><span>Sản phẩm</span> </div>
                </div>
            </div>
            <div class="item" id="item_3">
                <img src="5.png" alt="">
                <img src="1.png" alt="">
                <img src="8.png" alt="">
                <img src="1.png" alt="">
                <div class="content">
                    <div class="itemtext"> <img src="5.png" alt=""> <span>45$</span><span>Sản phẩm</span> </div>
                    <div class="itemtext"> <img src="1.png" alt=""> <span>45$</span><span>Sản phẩm</span> </div>
                    <div class="itemtext"> <img src="8.png" alt=""> <span>45$</span><span>Sản phẩm</span> </div>
                </div>
            </div>
        </div>
        </div>

</div>
    <img src="3.png" alt="" style="position: fixed; bottom:-280px;width:300px">
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="script.js"></script>
</html>

Code CSS

@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
body{
    background-color: #dedee0;
}
.container{
    background-color: #eee;
    position: fixed;
    top:50%;
    left:50%;
    width:1000px;
    height: 600px;
    transform: translate(-50%, -50%);
    border-radius: 3px;
}
.item{
    position: absolute;
    top:0%;
    left:0%;
    width:100%;
    height: 100%;
    opacity: 0;
    z-index: -1;
}
.active{
    opacity: 1;
    z-index: 5;
}
.hide{
    opacity: 1;
    z-index: 4;
}
.item img:nth-child(3){
    position: absolute;
    top: 58%;
    left: 50%;
    width: 140px;
    filter: blur(3px);
}
.item img:nth-child(2){
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(0, -50%);
    width: 50%;
}
.item img:nth-child(1){
    position: absolute;
    top: 16%;
    left: 70%;
    width: 150px;
}
.item img:nth-child(4){
    position: absolute;
    left: 40%;
    width: 397px;
    height: 100px;
    filter: blur(17px);
    bottom: 10%;
}
.active img:nth-child(1){
    animation:img1show 2s cubic-bezier(0, 0, 0, 1.01) 1 forwards;
}
.active img:nth-child(2){
    animation:img2show 2.3s cubic-bezier(0, 0, 0, 1.01) 1 forwards;
}
.active img:nth-child(3){
    animation:img3show 2s cubic-bezier(0, 0, 0, 1.01) 1 forwards;
}
.active img:nth-child(4){
    animation:img2show 2.3s cubic-bezier(0, 0, 0, 1.01) 1 forwards;
}
@keyframes img1show{
    0%{
        opacity: 0;
        left: 100%;
        transform: rotate(95deg);
    }10%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        left: 70%;
        transform: rotate(0deg);
    }
}
@keyframes img2show{
    0%{
        opacity: 0;
        left: 100%;
    }10%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        left: 40%;
    }
}
@keyframes img3show{
    0%{
        opacity: 0;
        left: 130%;
        transform: rotate(95deg);
    }10%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        transform: rotate(0deg);
        left: 50%;
    }
}
.hide img:nth-child(1){
    animation:img1hide 2.3s cubic-bezier(0, 0, 0, 0.7) 1 forwards;
}
.hide img:nth-child(2){
    animation:img2hide 1.3s cubic-bezier(0, 0, 0, 0.7) 1 forwards;
}
.hide img:nth-child(3){
    animation:img3hide 1s cubic-bezier(0, 0, 0, 0.7) 1 forwards;
}
.hide img:nth-child(4){
    animation:img2hide 1.3s cubic-bezier(0, 0, 0, 0.7) 1 forwards;
}
@keyframes img1hide{
    0%{
        opacity: 1;
        left: 70%;
        transform: rotate(0);
    }60%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        left: -40%;
        transform: rotate(95deg);
    }
}
@keyframes img2hide{
    0%{
        opacity: 1;
        left: 40%;
    }60%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        left: -40%;
    }
}
@keyframes img3hide{
    0%{
        opacity: 1;
        left: 50%;
        transform: rotate(0);
    }60%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        left: -40%;
        transform: rotate(95deg);
    }
}
.menu{
    position: absolute;
    background: #fff;
    border-radius: 15px;
    left:50%;
    bottom:12%;
    transform: translate(-50%, 0);
    opacity: 0.7;
}.bg-rotate{
    position: absolute;
    bottom: -56%;
    left: 23%;
    width: 500px;
    height: 500px;
    border-radius: 30% 70% 25% 75% / 49% 35% 65% 51%;
    transition: 1s;
    transform: rotate(0deg);
    z-index: -1;
    background: #dedee0;
    opacity: 0.2;

}
.background-rotate{
    width: 100%;
    height: 500px;
    position: absolute;
    overflow: hidden;
    border-top-left-radius: 40px;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
}
.menu ul{
    padding: 0;
    margin: 0;
}
.menu li{
    list-style: none;
    width: 42px;
    padding: 20px 10px;
    display: inline-block;
    border-radius: 15px;
    text-align: center;
}
.menu li:nth-child(4){
    background-color: #101A1C;
    color: #fff;
}
.logo{
    border-radius: 50%;
    width:40px;
    height: 40px; display: inline-block;
    box-shadow: 0 0 5px rgb(209, 204, 204);
}
.header{
    padding: 10px;
}
.content{
    position: absolute;
    top: 30%;
    left: 5%;
    width: 25%;
    overflow: hidden;
    height: 60%;
    display: none;
    opacity: 0.7;
    z-index: -1;
}
.itemtext{
    background: #fff;
    border-radius: 20px;
    padding: 10px;
    position: relative;
    margin-top:10px;
    min-height: 20px;
}
.itemtext img{
    animation: none!important;
    width: 50px!important;
    position: absolute!important;
    left: 0!important;
    bottom: 0!important;
}
.itemtext span{
    float: right;
    opacity: 0.6;
    margin-left: 20px;
    font-family: monospace;
}
.active .content,
.hide .content{
    display: block;
}
.active .itemtext{
    animation: textshow 1s ease-in-out 1 forwards;
}
@keyframes textshow{
    from{
        transform: translate(300px,0);
        opacity: 0;
    }
    to{
        transform: translate(0,0);
        opacity: 1;
    }
}
.hide .itemtext{
    animation: texthide 1s ease-in-out 1 forwards;
}
@keyframes texthide{
    from{
        transform: translate(0px,0);
        opacity: 1;
    }
    to{
        transform: translate(-300px,0);
        opacity: 0;
    }
}
h1{
    position: absolute;
    top: 16%;
    left: 5%;
    width: 24%;
    font-family: monospace;
    font-size: 27px;
}

Code JS

$(document).ready(function(){
    var count_group = $(".list .item").length;
    var active = 0;
    var deg_bg = 0;
    var begin= true;
    function Load(){

if(begin){
            begin = false;
        }else{
            $('#item_'+(active - 2 < -1 ? count_group - 2 : active - 2 < 0 ? count_group -1 : active - 2)).removeClass('hide');
            $('#item_'+(active - 1 < 0 ? count_group - 1 : active - 1)).removeClass('active');
            $('#item_'+(active - 1 < 0 ? count_group - 1 : active - 1)).addClass('hide');
        }

$('#item_'+active).removeClass('hide');
        $('#item_'+active).addClass('active');

$('.dots-page div').removeClass('active');
        $('#dot_'+active).addClass('active');

deg_bg = deg_bg - 100;
        $('.bg-rotate').css('transform', 'rotate('+deg_bg+'deg)');
    }
    
    $('#next').on('click', function(){
      active = active + 1 >= count_group ? 0 : active + 1;
      Load();
    })
        $('#prev').on('click', function(){
        active = active - 1 < 0 ? count_group - 1 : active - 1;
        })
    });

Xem hướng dẩn chi tiết:

Phần 2:

Code HTML

Code CSS

Code JS

Thank You

Contact Form