How to add or create an illusion of movement to a fixed div?


Tags: jquery,html,css

Problem :

I'm talking about parallax effect.

I have this demo:

.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>

And as you can see, it's basically is parallax, a pretty simple one, CSS only.

But I want background images not only to be fixed, but I want to add some movement to them as well, but they have fixed position, and I don't know a good way to make them move, so to say, how to add an illusion of movement to them, or how to force them to change position, even tho their position is fixed.

Ideally it would be nice to add a little beet of movement to them as well when user is scrolling the page, maybe with javascript somehow change their coordinates with a small step, but I don't know a good way to do so, but preferably with CSS.



Solution :

Make sure you're using 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

    CSS Howto..

    How to override CSS for TextBoxFor field?

    How to make sure CSS/JS files are not cached on browser? [duplicate]

    How to make a responsive scrollbar?

    How do i style a list within a list?

    How to stretch segment of image in html/css

    How to reference another selector in css

    How can I change the color of this text?

    How to hide the button keeping the position? [duplicate]

    How to reserve 'width' for a 'hide' element

    how to change stack order of of text label in JavaScript?

    YUI Calendar: how does it load the Sam's Skin CSS?

    $(document).on(“click”… how to collapse a list when clicking anywhere else on the document

    How can I make 3 circles with a different radius “stick” together? (with example image)

    how to stop only the hover pointer event in css

    Bootstrap - How to ensure white space on far left and far right on mobile

    How can I avoid using too many classes in CSS?

    How to specify a CSS border on hover around thumbnails?

    How put some horizontal offset to an element bottom border with CSS?

    How to measure the amount of time an animation took place using JavaScript

    how to remove a CSS property using jquery

    How to add non-literal into a variable like jQuery?

    How to set background-color on 50% of area CSS

    How to force the border color of a cell in a html table

    How do you make a make a page's worth of empty space (with only a title) followed by a div in CSS?

    How to make mouse hover not shift background downward? (Beginner CSS)

    How can I display just a portion of an image in HTML/CSS?

    Timeline divs not showing in Safari 5

    How to change custom Check Box border with Dart

    How to not apply a webpage's CSS on the div I am inserting into it via content scripts?

    How to add CSS to all tds of a particular tr in jQuery?