jquery - 如何向固定的 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