使用javascript应用视差效果时，图像会抖动_Javascript_Html_Css

使用javascript应用视差效果时，图像会抖动

javascript html css

使用javascript应用视差效果时，图像会抖动,javascript,html,css,Javascript,Html,Css,我正在尝试使用JavaScript获得视差效果。它工作正常，但当我滚动时图像会抖动 index.html <!doctype html> <html> <head> <title>ScollingParallex</title> <link rel="stylesheet" href="css/main.css"> <script type="text/javascript"> window.requ

我正在尝试使用JavaScript获得视差效果。它工作正常，但当我滚动时图像会抖动

index.html

<!doctype html>
<html>
<head>
<title>ScollingParallex</title>

<link rel="stylesheet" href="css/main.css">

<script type="text/javascript">
    window.requestAnimationFrame = window.requestAnimationFrame
 || window.mozRequestAnimationFrame
 || window.webkitRequestAnimationFrame
 || window.msRequestAnimationFrame
 || function(f){setTimeout(f, 1000/60)}

    var ypos,image;
    function parallex() {
        content = document.getElementById('content');
        ypos = window.pageYOffset;
        console.log(ypos * .9);
        console.log("ypos"+ypos)
        content.style.top = ypos * .9+ 'px';
    }
    // window.addEventListener('scroll', parallex);
    window.addEventListener('scroll',function(){
        requestAnimationFrame(parallex)
    },false)

</script>
</head>
<body>
<div id ="content">
    <div class="shape_top_page1">
        <div style="width:980px;display:inline-block;background-color:transparent;">
            <img src="img/img_mobile_add_photo.png"  style="width:330px">
        </div>
    </div>
</div>

<div id="content">
    <div class="shape_top_page2">
        <div style="width:980px;display:inline-block;background-color:transparent;">
            <img src="img/img_mobile_add_photo1.png"  style="width:330px">
        </div>
    </div>
</disv>


</body>

我已经给了一个容器（内容），里面有一个图像。当我向下滚动时，我能够看到视差效果。但我面临的问题是图像得到了一些抖动效果（我想是试图定位自己）当我滚动时。但当我故意将鼠标放在滚动条上并单击它并滚动时，它工作正常。但当我在页面上自由滚动时，问题就出现了。我没有使用任何jquery插件。

您有两个ID为“content”的元素，这是无效的HTML，可能会引起震动。其中一个在等号的左边有一个空格，这也是无效的。通常浏览器在执行

getElementById

时只选择第一个元素，但这加上相对位置可能会混淆渲染引擎。它也可能是由昂贵的

getElementById

引起的，您可以在每一帧调用它。最好调用它一次，并保存引用以供以后使用。这就是大多数ppl开始使用jQuery的

$（document）.ready（）

的地方，这样您就可以在元素加载到DOM中后找到它

body{
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 300;
    background-color:black;
    color: #fff;
}
#image {
        position: ;
        z-index: -1
}
#content {
    height: 750px;
    width: 100%;
    /*margin-top:-10px; */
    background-color:#707070;
    position: relative;
    z-index: 1;
    text-align: center;

}

.center{
    text-align: center;
}

.parallax-target{
    width:100%;
    /*background: #707070;*/
    height:700px;
}

.shape_top_page1
{
    background : #FAC912;
    background : rgba(250, 201, 18, 1);
    height: 500px;
    text-align: center;
}

.shape_top_page2
{
    background : wheat;
    /*background : rgba(250, 201, 18, 1);*/
    height: 500px;
    text-align: center;
}