js 滚动视差
直接复制代码粘贴到HTML页面中,图片和路径自己修改
第一种效果:
<!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> <style> * { padding: 0; margin: 0; } div { width: 100%; height: 500px; border-bottom: 2px solid red; } div:nth-child(3) { background-image: url(bg1.jpg); background-size: cover; background-position: center; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <script> const divEl = document.querySelector(`div:nth-child(3)`) window.addEventListener("scroll", () => { //getBoundingClientRect方法返回元素的大小及其相对于视口的位置 const top = divEl.getBoundingClientRect().top; const bottom = divEl.getBoundingClientRect().bottom; if (bottom >= 0 && top <= window.innerHeight) { divEl.style.backgroundPosition = `center calc(50% - ${bottom / 2}px)`; } }) </script> </body> </html>
第二种效果:
<!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> <style> * { padding: 0; margin: 0; } .box { width: 100%; height: 500px; border-bottom: 2px solid red; background-color: #CCC; } .box1Bg { position: fixed; width: 100%; pointer-events: none; background-image: url(bg3.jpg); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; background-color: rgba(0, 0, 0, 0); height: 100%; top: 0px; z-index: -1; } .box:nth-child(1) { color: white; text-align: center; font-size: 30px; background-color: transparent; } .box:nth-child(4) { color: white; text-align: center; font-size: 30px; background-color: transparent; } </style> </head> <body> <div class="box"> <span>啊撒大苏打实打实大苏打实打实大苏打上</span> <div class="box1Bg"></div> </div> <div class="box"></div> <div class="box"></div> <div class="box"> <span>第四个内容</span> <div style="background-image: none; position: relative;"> <div style="position: absolute; inset: 0px; clip: rect(-40px, 1912px, 617px, 0px);"> <div style="position:fixed;top:0;left:0;width:1912px;bottom:0;z-index:-1;pointer-events:none"> <div style="position: absolute; width: 100%; pointer-events: none; background-image: url(bg1.jpg); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; background-color: rgba(0, 0, 0, 0); height: 100%; top: 0px;"> </div> </div> </div> </div> </div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </body> </html>
HTML效果: