Scribd Logo
Upload

Welcome to Scribd!

  • parralax1

    Uploaded by

    blk.almanarazhari
    3 views4 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    3 views4 pages

    parralax1

    Uploaded by

    blk.almanarazhari

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 4

    <!

    DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <div class="banner">
    <div class="bg bg-1"></div>
    <div class="bg bg-2"></div>
    <h1>LunDev!</h1>
    <div class="bg bg-3"></div>
    <div class="bg bg-4"></div>
    <div class="bg bg-5"></div>
    <div class="bg bg-6"></div>
    <div class="bg bg-7"></div>
    <div class="bg bg-8"></div>
    <div class="bg bg-9"></div>
    </div>
    <div class="tab intro">
    <h2 class="animation-show">Lu Dev</h2>
    <img src="img/logo.jpg" alt="" class="animation-show">
    <p class="animation-show">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque rem obcaecati
    libero eaque veniam est necessitatibus consectetur commodi non rerum, sapiente distinctio
    dignissimos! Dolorem eaque velit quam tenetur sapiente, qui veniam iste beatae officiis
    facilis aut expedita commodi, voluptatibus ullam voluptates! Explicabo, nisi. Odit, neque
    aliquid maiores minima cumque iusto?
    </p>
    <button class="animation-show">Subcribe</button>
    </div>
    <div class="tab library">
    <div class="animation-show">
    <img src="img/9.jpg">
    <p>Image Name</p>
    </div>
    <div class="animation-show">
    <img src="img/10.jpg">
    <p>Image Name</p>
    </div>
    <div class="animation-show">
    <img src="img/11.jpg">
    <p>Image Name</p>
    </div>
    <div class="animation-show">
    <img src="img/12.jpg">
    <p>Image Name</p>
    </div>
    </div>
    <script src="app.js"></script>
    </body>
    </html>
    @import background-image:
    url('https://fonts.googleapis.com/c url('img/7.png');
    ss2?family=Pacifico&display=swap'); }
    body{ .banner .bg-9{
    margin :0; background-image:
    background-color: #210002; url('img/8.png');
    font-family: Poppins; }
    font-size: 15px; .banner h1{
    } position: absolute;
    .banner{ top: 20%;
    height: 100vh; left: 0;
    position: relative; width: 100%;
    overflow: hidden; text-align: center;
    } font-size: 11rem;
    .banner .bg{ font-family: 'Pacifico',
    position: absolute; cursive;
    left: 0; color: #fff;
    bottom: 0; }
    width: 100%; .intro{
    height: 100%; min-height: 50vh;
    background-size: auto 100%; color: #eee;
    background-position: center display: flex;
    bottom; flex-direction: column;
    transition: 0.1s; justify-content: center;
    } align-items: center;
    .banner .bg-1{ }
    background-image: .intro img{
    url('img/0.png'); width: 130px;
    } height: 130px;
    .banner .bg-2{ border-radius: 50%;
    background-image: }
    url('img/1.png'); .intro p{
    } width: 700px;
    .banner .bg-3{ max-width: 100%;
    background-image: text-align: center;
    url('img/2.png'); }
    } .intro button{
    .banner .bg-4{ background-color: #FD0003;
    background-image: padding: 10px 50px;
    url('img/3.png'); border: 1px solid #591F1D;
    } border-radius: 5px;
    .banner .bg-5{ color: #fff;
    background-image: font-family: Poppins;
    url('img/4.png'); font-weight: 500;
    } }
    .banner .bg-6{ .animation-show{
    background-image: transform: translateY(50px);
    url('img/5.png'); opacity: 0;
    } transition: 0.7s;
    .banner .bg-7{ }
    background-image: .active .animation-show{
    url('img/6.png'); transform: translateY(0);
    } opacity: 1;
    .banner .bg-8{ }
    .animation-show:nth-child(2){
    transition-delay: 0.3s;
    }
    .animation-show:nth-child(3){
    transition-delay: 0.6s;
    }
    .animation-show:nth-child(4){
    transition-delay: 0.9s;
    }
    .library{
    margin-top: 50px;
    display: grid;
    grid-template-columns:
    repeat(4, 1fr);
    text-align: center;
    color: #fff;
    }
    .library img{
    width: 90%;
    height: 500px;
    object-fit: cover;
    }
    @media screen and (max-width:
    768px){
    .banner h1{
    font-size: 5rem;
    }
    .library{
    grid-template-columns:
    repeat(2, 1fr);
    }
    .library img{
    height: 300px;
    }
    }
    let listBg = document.querySelectorAll('.bg');
    let listTab = document.querySelectorAll('.tab');
    let titleBanner = document.querySelector('.banner h1');
    window.addEventListener("scroll", (event) => {
    /*scrollY is the web scrollbar position (pixel)*/
    let top = this.scrollY;
    /*index is the order of classes bg (0,1,2,3,4,5,6,7,8)
    When scrolling the web, the classes bg scroll down,
    the bigger the index, the faster the movement
    */
    listBg.forEach((bg, index) => {
    if(index != 0 && index != 8){
    bg.style.transform = `translateY(${(top*index/2)}px)`;
    }else if(index == 0){
    bg.style.transform = `translateY(${(top/3)}px)`;
    }
    })
    titleBanner.style.transform = `translateY(${(top*4/2)}px)`;

    /* parallax scroll in tab


    when tab's position is less than 550 px
    from scrollbar position add active class to animate
    and vice versa
    */
    listTab.forEach(tab =>{
    if(tab.offsetTop - top < 550){
    tab.classList.add('active');
    }else{
    tab.classList.remove('active');
    }
    })
    });

    You might also like