Design template trend 2023 with animation Parallax Scroll HTML CSS Javascript

Khái quát

Theo xu hướng của thời giang, yêu cầu về thẩm mĩ ngày một tăng và đòi hỏi những design web vô cùng đặc sắc và thú vị. Trong bài viết này hãy cùng Lùn Dev đi tạo ra một landing page kết hợp hai hiệu ứng thịnh hành đó là Parallax Scroll và lazy Scroll. 

Một landing page bắt trend xu hướng thiết kế 2023 thật sang trọng và đẹp mắc chỉ với vài dòng code HTML CSS và Javascript.

Tiến hành xây dựng template trend 2023

Code HTML



    
    

        

            
            
        

        
        

            
item1

            
item2

            
item3

            
item4

        

        

            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi recusandae itaque a minus. Perspiciatis aut maxime officia ipsum ullam, maiores facere debitis nulla rem nisi praesentium voluptas. Neque itaque eius aut sequi eveniet beatae omnis pariatur, consequatur sapiente minima voluptatum error! Quibusdam explicabo optio assumenda eum perspiciatis voluptatum suscipit culpa, alias, accusamus eligendi commodi pariatur temporibus autem distinctio iusto laboriosam perferendis ad. Exercitationem magni fugiat esse alias, consequuntur blanditiis laboriosam quidem ad placeat eos eveniet. Incidunt ratione rem enim accusamus quidem quaerat obcaecati natus, et nisi a vitae explicabo ducimus soluta cum perspiciatis, veritatis voluptates qui ullam dolorem eveniet quae fugiat. Adipisci numquam fugit ea accusantium. Odio praesentium fugiat animi repellendus officiis aliquid expedita nihil dolore deserunt, ab voluptas quidem aspernatur id dicta incidunt, ullam commodi totam. Soluta quas veniam labore repellat maiores commodi temporibus! Repellat, itaque perferendis? Ex nulla aspernatur incidunt atque, pariatur ipsam, doloribus voluptatibus quidem voluptas, et aliquid voluptate harum fugit consectetur asperiores ab eaque sapiente obcaecati est accusamus dolor quas itaque. Distinctio, dolore iusto soluta officia nemo velit itaque voluptatem id odio totam eos reprehenderit quasi adipisci quia atque asperiores provident sed ipsam quis vitae illo. Incidunt, velit molestias dolore exercitationem possimus quod blanditiis unde veniam?

Code CSS


@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
    body{
        margin: 0;
        font-family: 'Lobster', cursive;
        background-color: #010001;
        color: #fff;
    }
    .container-fuild{
        height: 100vh;
        overflow-x: hidden;
        perspective: 20px;
    }
    .banner{
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        transform-style: preserve-3d;
    }
    .bg{
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: url(bg.jpg);
        background-size: cover;
        background-position: center;
        transform: translateZ(-10px) scale(1.);
    }
    .bg::before{
        position: absolute;
        width: 100%;
        height: 100px;
        content: '';
        background-image: linear-gradient(
            to top, #010001, transparent
        );
        bottom: 0;
    }
    .content{
        font-size: xxx-large;
        transform: translateZ(10px)
    }
    .container{
        width: 1200px;
        max-width: 100%;
        margin: auto;
        padding-bottom: 100px;
    }
    header{
        position: absolute;
        top: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 1200px;
        max-width: 100%;
        padding: 40px 0;
    }
    header .logo{
        font-size: xx-large;
    }
    header .signin{
        display: flex;
        justify-content: end;
        align-items: center;
    }
    header button{
        background-color: #010001;
        color: #fff;
        padding: 10px 20px;
        border-radius: 20px;
    }
    nav ul{
        list-style: none;
        display: flex;
        justify-content: end;
    }
    nav ul li{
        padding: 10px;
    }
    .library{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 100px);
        margin-top: 100px;
        column-gap: 20px;
        row-gap: 20px;
    }
    .library .item{
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url(bg1.jpg);
        background-size: cover;
        transition: 0.5s;
        opacity: 0;
        transition-delay: 0.3s;
    }
    .library .item:nth-child(2){
        background-image: url(bg2.jpg);
        transition-delay: 0.5s;
    }
    .library .item:nth-child(3){
        background-image: url(bg3.jpg);
        transition-delay: 0.7s;
    }
    .library .item:nth-child(4){
        background-image: url(bg4.jpg);
        transition-delay: 0.9s;
    }
    .des{
        width: 70%;
        text-align: center;
        margin: 100px auto;
        transition: 0.5s;
        transform: translateY(30px);
        opacity: 0;
    }
    .library.active .item{
        opacity: 1;
    }
    .des.active{
        opacity: 1;
        transform: translateY(0px);
    }

Code Javascript

let items = document.querySelectorAll('.allowActive');
    let containerFuild = document.querySelector('.container-fuild');
    
    containerFuild.addEventListener('scroll', ()=>{
        items.forEach(item => {
            if(item.offsetTop - containerFuild.scrollTop < window.innerHeight*(3/4)){
                item.classList.add('active');
            }else{
                item.classList.remove('active');
            }
        })
    })

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



Download full code and image


Tags
Previous Post Next Post