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 create a grid in which a variable number of squares automatically resize to fit a space?

    how to change glyph height without changing the font-size?

    How to fix this common problem of position:fixed elements not expanding to its parent width?

    How do I align my navigation to the right without removing (display: inline;)?

    How do I display the first image from each div with .className?

    How simple CSS breadcrumbs work

    How to give Internet Explorer different CSS lines?

    How do I properly add a scrollbar to a jQuery Mobile popup using iScrollview?

    How to set opacity for background images using css?

    CSS3 Challenge - How to get this gradient background pattern without using all the divs?

    How to apply SVG filter to an element?

    How to write css for that?

    how can i center the footer text in the bottom of the page regardless of screen size

    How to make Bootstrap container auto for height?

    Do you know about this weird thing. “AS3, Button width cannot change by setStyle(). However, inline CSS can change width.”

    How to control number of items per row using media queries in Flexbox?

    How can I align my adsense graphics?

    How to Set all children start with same line of main parent

    How to link a header in a standards-compliant way?

    How can I vertically align this navigation bar?

    How to inherit Image width and height to video tag

    HSS Liquid Layout Issue: how to fill the entire browser

    How do I make effect like this on image hover?

    How to horizontally center absolute text?

    How to achive certain overlapping layout when there is not enough space in parent container?

    How to not send images to mobiles in a semantic manner

    How to style menu in CSS to look like a button

    How Do I Reduce the Padding Around a Chart Within an Article

    How to set size of a checkbox in table vaadin

    How to link a HTML page to a CSS file when the CSS file is in an upper directory?