精美视差效果
HTML部分（index.html）
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Moon Light</title> <link rel="stylesheet" href="style.css" > </head> <body> <section> <img src="http://175.178.184.206/usr/uploads/2022/05/681507058.jpg" id="bg" > <img src="http://175.178.184.206/usr/uploads/2022/05/878243794.png" id="moon" > <img src="http://175.178.184.206/usr/uploads/2022/05/2155695319.png" id="mountain" > <img src="http://175.178.184.206/usr/uploads/2022/05/455978369.png" id="road" road > <h2 id="text"> Moon Light </h2> </section> <script> let bg = document.querySelector('#bg') let moon = document.querySelector('#moon') let mountain = document.querySelector('#mountain') let road = document.querySelector('#road') let text = document.querySelector('#text') window.addEventListener('scroll', () => { var value = window.scrollY; bg.style.top = value * 0.5 + 'px'; moon.style.left = -value * 0.5 + 'px'; mountain.style.top = -value * 0.15 + 'px'; road.style.top = value * 0.15 + 'px'; text.style.top = value * 1 + 'px'; }) </script> </body> </html>
CSS部分（style.css）
* { margin: 0; padding: 0; } body { background-color: #0a2a43; min-height: 1500px; } section { position: relative; width: 100%; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; } section:before { content: ''; position: absolute; bottom: 0; width: 100%; height: 100px; background: linear-gradient(to top #0a2a43 transparent); z-index: 10000; } section:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0a2a43; z-index: 10000; mix-blend-mode: color; } section img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } #text { position: relative; color: #ffffff; font-size: 10em; z-index: 1; } #road { z-index: 2; }
注意事项
以上两个文件须使用括号内的名字命名并且放在同一目录下才可
