Сегодня вы узнаете как создать параллакс прокрутку с анимацией для красивого шаблона сайта на тему игры The Last of Us используя HTML, CSS и jаvascript. Страница содержит в себе два популярных эффекта: параллаксную прокрутку и ленивую прокрутку. Сайт разрабатывался БЕЗ адаптивности. НЕ совместим со всеми мобильными устройствами. 

Вы можете посмотреть видео демонстрацию, скопировать готовый код ниже, попробовать сверстать самому или скачать архив с готовым кодом. Если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.

HTML КОД:

<div class="container-fuild">
        <div class="banner">
            <div class="bg"></div>
            <div class="content">
                Youtube Lun Dev!
            </div>
        </div>
        <div class="container">
            <header>
                <div class="logo">
                    Lundev.
                </div>
                <div class="signin">
                    <button>
                        Sign in
                    </button>
                </div>
            </header>
            <nav>
                <ul>
                    <li>Youtube</li>
                    <li>Facebook</li>
                    <li>Intagram</li>
                    <li>Website</li>
                </ul>
            </nav>
            <div class="library allowActive">
                <div class="item">item1</div>
                <div class="item">item2</div>
                <div class="item">item3</div>
                <div class="item">item4</div>
            </div>
            <div class="des allowActive">
                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?
            </div>
        </div>
    </div>

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);
}

jаvascript КОД:

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');
        }
    })
})