2
JavaScriptを使用して視差効果を得ようとしています。うまく機能していますが、スクロールすると画像が揺れます。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>
CSS
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;
}
私がスクロールダウンit.When I視差効果を見ることができています私は、コンテナ（コンテンツ）を与えていると画像が内部に存在しますしかし、私が直面している問題は、スクロールするときにイメージが（私自身が思う）ポジショニングしようとしていることです。しかし、マウスを意図的にスクロールバーに置き、スクロールしてスクロールしても問題ありません。私は問題が発生したページでフリースクロールを行います。 jqueryプラグインを使用していません。