超简单的视差滚动网站
原理能就是记录鼠标的滚动,然后给不同的元素添加不同的偏移
遵循开源精神,源码如下
<!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 ametdo. Deserunt velit eiusmod ad amet aliqua aliqua ut. In sunt consequat sunt nulla consectetur Lorem in enimnulla sint qui sint. Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci tempore odio estlaudantium soluta amet unde? Optio veniam rerum placeat error iste laboriosam. Fugiat enim excepturi amagnam autem nihil. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus fugit dictaquod inventore nobis, quisquam repudiandae sapiente doloribus saepe placeat ratione perspiciatis aliquamcommodi facilis eos ipsum sed! Quod, voluptatem? Lorem, ipsum dolor sit amet consectetur adipisicing elit.Repudiandae neque, similique reprehenderit quibusdam sit necessitatibus et nostrum doloremque rationeconsequuntur 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 ametdo. Deserunt velit eiusmod ad amet aliqua aliqua ut. In sunt consequat sunt nulla consectetur Lorem in enimnulla sint qui sint. Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci tempore odio estlaudantium soluta amet unde?Et et laborum aliquip duis duis do excepteur. Eu velit aute commodo excepteuresse reprehenderit velit amet do. Deserunt velit eiusmod ad amet aliqua aliqua ut. In sunt consequat suntnulla consectetur Lorem in enim nulla sint qui sint. Lorem ipsum dolor sit amet consectetur adipisicingelit. Adipisci tempore odio est laudantium soluta amet unde? Optio veniam rerum placeat error istelaboriosam. Fugiat enim excepturi a magnam autem nihil. Lorem ipsum dolor sit, amet consectetur adipisicingelit.<br><br>Et et laborum aliquip duis duis do excepteur. Eu velit aute commodo excepteur essereprehenderit velit amet do. Deserunt velit eiusmod ad amet aliqua aliqua ut. In sunt consequat sunt nullaconsectetur 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 placeatratione perspiciatis aliquam commodi facilis eos ipsum sed! Quod, voluptatem? Lorem, ipsum dolor sit ametconsectetur adipisicing elit. Repudiandae neque, similique reprehenderit quibusdam sit necessitatibus etnostrum doloremque ratione consequuntur tenetur architecto maiores magni vel debitis provident cumquerecusandae repellat.<br><br>Et et laborum aliquip duis duis do excepteur. Eu velit aute commodo excepteuresse reprehenderit velit amet do. Deserunt velit eiusmod ad amet aliqua aliqua ut. In sunt consequat suntnulla consectetur Lorem in enim nulla sint qui sint. Lorem ipsum dolor sit amet consectetur adipisicingelit. Adipisci tempore odio est laudantium soluta amet unde? Optio veniam rerum placeat error istelaboriosam. Fugiat enim excepturi a magnam autem nihil. Lorem ipsum dolor sit, amet consectetur adipisicingelit.Et et laborum aliquip duis duis do excepteur. Eu velit aute commodo excepteur esse reprehenderit velitamet do. Deserunt velit eiusmod ad amet aliqua aliqua ut. In sunt consequat sunt nulla consectetur Lorem inenim nulla sint qui sint. Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci tempore odio estlaudantium soluta amet unde? Optio veniam rerum placeat error iste laboriosam. Fugiat enim excepturi amagnam autem nihil. Lorem ipsum dolor sit, amet consectetur adipisicing elit.Et et laborum aliquip duis duisdo excepteur. Eu velit aute commodo excepteur esse reprehenderit velit amet do. Deserunt velit eiusmod adamet aliqua aliqua ut. In sunt consequat sunt nulla consectetur Lorem in enim nulla sint qui sint. Loremipsum dolor sit amet consectetur adipisicing elit.<br><br>Et et laborum aliquip duis duis do excepteur. Euvelit aute commodo excepteur esse reprehenderit velit amet do. Deserunt velit eiusmod ad amet aliqua aliquaut. In sunt consequat sunt nulla consectetur Lorem in enim nulla sint qui sint. Lorem ipsum dolor sit ametconsectetur adipisicing elit. Adipisci tempore odio est laudantium soluta amet unde? Optio veniam rerumplaceat error iste laboriosam. Fugiat enim excepturi a magnam autem nihil. Lorem ipsum dolor sit, ametconsectetur adipisicing elit. Necessitatibus fugit dicta quod inventore nobis, quisquam repudiandae sapientedoloribus 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 sitnecessitatibus et nostrum doloremque ratione consequuntur tenetur architecto maiores magni vel debitisprovident cumque recusandae repellat.Et et laborum aliquip duis duis do excepteur. Eu velit aute commodoexcepteur esse reprehenderit velit amet do. Deserunt velit eiusmod ad amet aliqua aliqua ut. In suntconsequat sunt nulla consectetur Lorem in enim nulla sint qui sint. Lorem ipsum dolor sit amet consecteturadipisicing elit. Adipisci tempore odio est laudantium soluta amet unde? Optio veniam rerum placeat erroriste laboriosam. Fugiat enim excepturi a magnam autem nihil. Lorem ipsum dolor sit, amet consecteturadipisicing elit.</p>
</div>
<!-- partial -->
<script src="./js/script.js"></script>
</body>
</html>
