超简单的视差滚动网站

news2025/1/15 3:18:26

超简单的视差滚动网站

在这里插入图片描述

原理能就是记录鼠标的滚动,然后给不同的元素添加不同的偏移

遵循开源精神,源码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Parallax Scrolling Website</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <header>
    <a href="#" class="logo">Logo</a>
    <ul>
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</header>
<section>
    <img src="./images/gE0rK6M.png" id="stars">
    <img src="./images/vXnEvOx.png" id="moon">
    <img src="./images/D7gDlYx.png" id="mountains-behind">
    <h2 id="text">Moon Light</h2>
    <a href="#sec" id="btn">Explore</a>
    <img src="./images/V0jN7KL.png" id="mountains-front">
</section>
<div class="sec" id="sec">
    <h2>Parallax Scrolling Effects</h2>
    <p>Et et laborum aliquip duis duis do excepteur. Eu velit aute commodo excepteur esse reprehenderit velit amet
        do. Deserunt velit eiusmod ad amet aliqua aliqua ut. In sunt consequat sunt nulla consectetur Lorem in enim
        nulla sint qui sint. Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci tempore odio est
        laudantium soluta amet unde? Optio veniam rerum placeat error iste laboriosam. Fugiat enim excepturi a
        magnam autem nihil. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus fugit dicta
        quod inventore nobis, quisquam repudiandae sapiente doloribus saepe placeat ratione perspiciatis aliquam
        commodi facilis eos ipsum sed! Quod, voluptatem? Lorem, ipsum dolor sit amet consectetur adipisicing elit.
        Repudiandae neque, similique reprehenderit quibusdam sit necessitatibus et nostrum doloremque ratione
        consequuntur tenetur architecto maiores magni vel debitis provident cumque recusandae repellat.
        <br><br>
        Et et laborum aliquip duis duis do excepteur. Eu velit aute commodo excepteur esse reprehenderit velit amet
        do. Deserunt velit eiusmod ad amet aliqua aliqua ut. In sunt consequat sunt nulla consectetur Lorem in enim
        nulla sint qui sint. Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci tempore odio est
        laudantium soluta amet unde?Et et laborum aliquip duis duis do excepteur. Eu velit aute commodo excepteur
        esse reprehenderit velit amet do. Deserunt velit eiusmod ad amet aliqua aliqua ut. In sunt consequat sunt
        nulla consectetur Lorem in enim nulla sint qui sint. Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Adipisci tempore odio est laudantium soluta amet unde? Optio veniam rerum placeat error iste
        laboriosam. Fugiat enim excepturi a magnam autem nihil. Lorem ipsum dolor sit, amet consectetur adipisicing
        elit.
        <br><br>
        Et et laborum aliquip duis duis do excepteur. Eu velit aute commodo excepteur esse
        reprehenderit velit amet do. Deserunt velit eiusmod ad amet aliqua aliqua ut. In sunt consequat sunt nulla
        consectetur Lorem in enim nulla sint qui sint. Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Adipisci tempore odio est laudantium soluta amet unde? Optio veniam rerum placeat error iste laboriosam.
        Fugiat enim excepturi a magnam autem nihil. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
        Necessitatibus fugit dicta quod inventore nobis, quisquam repudiandae sapiente doloribus saepe placeat
        ratione perspiciatis aliquam commodi facilis eos ipsum sed! Quod, voluptatem? Lorem, ipsum dolor sit amet
        consectetur adipisicing elit. Repudiandae neque, similique reprehenderit quibusdam sit necessitatibus et
        nostrum doloremque ratione consequuntur tenetur architecto maiores magni vel debitis provident cumque
        recusandae repellat.
        <br><br>
        Et et laborum aliquip duis duis do excepteur. Eu velit aute commodo excepteur
        esse reprehenderit velit amet do. Deserunt velit eiusmod ad amet aliqua aliqua ut. In sunt consequat sunt
        nulla consectetur Lorem in enim nulla sint qui sint. Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Adipisci tempore odio est laudantium soluta amet unde? Optio veniam rerum placeat error iste
        laboriosam. Fugiat enim excepturi a magnam autem nihil. Lorem ipsum dolor sit, amet consectetur adipisicing
        elit.Et et laborum aliquip duis duis do excepteur. Eu velit aute commodo excepteur esse reprehenderit velit
        amet do. Deserunt velit eiusmod ad amet aliqua aliqua ut. In sunt consequat sunt nulla consectetur Lorem in
        enim nulla sint qui sint. Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci tempore odio est
        laudantium soluta amet unde? Optio veniam rerum placeat error iste laboriosam. Fugiat enim excepturi a
        magnam autem nihil. Lorem ipsum dolor sit, amet consectetur adipisicing elit.Et et laborum aliquip duis duis
        do excepteur. Eu velit aute commodo excepteur esse reprehenderit velit amet do. Deserunt velit eiusmod ad
        amet aliqua aliqua ut. In sunt consequat sunt nulla consectetur Lorem in enim nulla sint qui sint. Lorem
        ipsum dolor sit amet consectetur adipisicing elit.
        <br><br>
        Et et laborum aliquip duis duis do excepteur. Eu
        velit aute commodo excepteur esse reprehenderit velit amet do. Deserunt velit eiusmod ad amet aliqua aliqua
        ut. In sunt consequat sunt nulla consectetur Lorem in enim nulla sint qui sint. Lorem ipsum dolor sit amet
        consectetur adipisicing elit. Adipisci tempore odio est laudantium soluta amet unde? Optio veniam rerum
        placeat error iste laboriosam. Fugiat enim excepturi a magnam autem nihil. Lorem ipsum dolor sit, amet
        consectetur adipisicing elit. Necessitatibus fugit dicta quod inventore nobis, quisquam repudiandae sapiente
        doloribus saepe placeat ratione perspiciatis aliquam commodi facilis eos ipsum sed! Quod, voluptatem? Lorem,
        ipsum dolor sit amet consectetur adipisicing elit. Repudiandae neque, similique reprehenderit quibusdam sit
        necessitatibus et nostrum doloremque ratione consequuntur tenetur architecto maiores magni vel debitis
        provident cumque recusandae repellat.Et et laborum aliquip duis duis do excepteur. Eu velit aute commodo
        excepteur esse reprehenderit velit amet do. Deserunt velit eiusmod ad amet aliqua aliqua ut. In sunt
        consequat sunt nulla consectetur Lorem in enim nulla sint qui sint. Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Adipisci tempore odio est laudantium soluta amet unde? Optio veniam rerum placeat error
        iste laboriosam. Fugiat enim excepturi a magnam autem nihil. Lorem ipsum dolor sit, amet consectetur
        adipisicing elit.
    </p>
</div>
<!-- partial -->
<script  src="./js/script.js"></script>
</body>
</html>