如何在固定的div中添加或创建一个运动错觉？

Question

我说的是视差效应。

我有一个演示：

​

.container {
	max-width: 960px;
	margin: 0 auto;
} 
div.module:last-child {
	margin-bottom: 0;
	background-color:#f2f0f2;
}
 div.module.content {
	padding: 40px 10px;
	height: 15vw;
	max-height: 300px;
}
 div.module.parallax {
	height: 30vw;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}
 div.module.parallax-1 {
  background-image: url("http://safe-castle-3835.herokuapp.com/img/convoy_1920.jpg");
}
 div.module.parallax-2 {
  background-image: url("http://safe-castle-3835.herokuapp.com/img/header.jpg");
}
 div.module.parallax-3 {
  background-image: url("http://safe-castle-3835.herokuapp.com/img/join.jpg");
}
 div.module.parallax-4 {
  background-image: url("http://safe-castle-3835.herokuapp.com/img/join.jpg");
  height: 5vw;
}

<div class="module parallax parallax-1"></div>
	
	<div class="module content">
	  <div class="container">

          </div>
	</div>
	
	<div class="module parallax parallax-2">
	  <div class="container">

	  </div>
	</div>
	
	<div class="module content">
	  <div class="container">

	  </div>
	</div>
	
	<div class="module parallax parallax-3">
	  <div class="container">
	    
	  </div>
	</div>
	
	<div class="module content">
	  <div class="container">

	  </div>
	</div>

	<div class="module parallax parallax-4">
	  <div class="container">
	    
	  </div>
	</div>

​

正如你所看到的，它基本上是视差，一个非常简单的视差，只有CSS。

但是我希望背景图像不仅是固定的，而且我也想给它们增加一些运动，但是它们有固定的位置，我不知道如何让它们移动，所以说，如何给它们增加移动的错觉，或者如何强迫它们改变位置，即使它们的位置是固定的。

理想情况下，在用户滚动页面时添加一点移动功能也是很好的，也许使用javascript只需一小步就可以更改坐标，但我不知道如何这样做，但最好是使用CSS。

Answer 1

确保您使用的是JQuery。

//Parallax Scroll Script

$(document).ready(function(){

  var $window = $(window); 
  var $bgobj = $('div.module.parallax-1'); // assigning the object
  var $bgobj2 = $('div.module.parallax-2');

  $(window).scroll(function() {
    var yPos = -($window.scrollTop() / 5);
    // Put together our final background position
    var coords = '0% '+ yPos + 'px';
    // Move the background
    $bgobj.css({ backgroundPosition: coords });
    $bgobj2.css({ backgroundPosition: coords });
  });

});

//End Parallax Scroll Script