Question

我尝试创建一个带文字和颜色的基本视差滚动示例;没有图像。然而，效果似乎不起作用。这是代码：

<!doctype html>
<html>
<head>
<title>Parallax Scrolling</title>
</head>
<style type="text/css">
body{
margin:0;
padding:0;
} 
#img1 { 
background: rgb(44,89,238) 50% 0 repeat fixed; 
height: 1000px;  
margin: 0 auto; 
width: 100%; 
max-width: 1920px; 
position: relative; 
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
#img2 { 
background: rgb(252,151,20) 50% 0 repeat fixed; 
height: 1000px;
margin: 0 auto; 
width: 100%; 
max-width: 1920px; 
position: relative; 
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
p {
height: 458px;
position: absolute;
top: 291px;
width: 100%;
font-size: 100px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

$(document).ready(function(){


     var $window = $(window); 

     $('section[data-type="background"]').each(function(){
     var $bgobj = $(this); // assigning the object
     $(window).scroll(function() {
     var yPos = -($window.scrollTop() / $bgobj.data('speed'));
     var coords = '50% '+ yPos + 'px';
     $bgobj.css({ backgroundPosition: coords });
     });
     });
     });

</script>
<body>
<section id="img1"><p>Hello</p></section>
<section id="img2"><p>Hello</p></section>
</body>
</html>

我曾尝试编辑css但似乎没有任何效果。请帮忙。

Answer 1

有一些方便的Parallax滚动JS库，他们可能会帮助很多，看看：

滚动效果：

http://markdalgleish.com/projects/stellar.js/

Stellar非常有用且简单，它可以像添加data-stellar-ratio=""一样简单，但可以使用jQuery进行调整，它是在jQuery中编写的，因此需要使用jQuery才能使用它。

陀螺仪/鼠标移动效果：

http://wagerfield.github.io/parallax/

Parallax.js也很方便，也非常酷，虽然这不像你提到的Parallax滚动，我想你仍然会喜欢它。 Parallax是用jQuery和JavaScript编写的，所以不需要jQuery。

视差滚动效果

1 个答案: