[英]Adding parallax effect to background color
我正在創建視差效果。 我有一個圖像和一個背景顏色。 基於滾動,此背景顏色必須移動到頂部,當滾動回 0 時,它應該移動到其實際位置。
目前,當我滾動此顏色時直接移動到頂部,當滾動位置移回 0 時,它不會下降。
function parallax() { var image = document.getElementById('image'); image.style.top = -(window.pageYOffset / 0.5) + 'px'; } window.addEventListener("scroll", parallax, false)
body { background: cyan; } #image { background: green; width: 100px; height: 100px; top: 310px; right: -30px; position: absolute; } .frst { color: white; position: relative; width: 100px; height: 100px; }
<div class='frst'>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> </div> <div class='div1' style=" position:relative;width: 50%; height: 350px; background-color: red; top: 20%;"> <div id='image'></div> </div> <div class='frst'>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> </div> <div class='frst'>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> </div> <div class='frst'>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> </div>
那是因為當它回到零時你沒有刪除top
規則:
if (image.style.top === "0px") {
image.style.top = "";
}
這個演示會起作用,但這只是一個“綳帶”。 我建議改用初始頂部。
function parallax() { var image = document.getElementById('image'); image.style.top = -(window.pageYOffset / 0.5) + 'px'; } window.addEventListener("scroll", parallax, false)
body { background: cyan; } #image { background: green; width: 100px; height: 100px; top: 0; right: -30px; position: absolute; transform: translateY(310px); } .frst { color: white; position: relative; width: 100px; height: 100px; }
<div class='frst'>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> </div> <div class='div1' style=" position:relative;width: 50%; height: 350px; background-color: red; top: 20%;"> <div id='image'></div> </div> <div class='frst'>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> </div> <div class='frst'>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> </div> <div class='frst'>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> hhvvv <br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br>hhvvv<br> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.