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 style all the same XSL FO elements? XSL FO like CSS?

    How to make image stretch to a specific paragraph?

    How can I improve my webpage code to be scalable for smaller sizes?

    How to create a Horizintal menu using CSS, and showing a div for an item when the item clicked

    How to have multiple CSS transitions on an element?

    Third-Level Menu Items Are Always Showing

    How to turn this menu into a MultiLevel one?

    How to inline elements with CSS

    How to align vertical text horizontally center?

    How browser renders HTML

    How to keep images fixed but also responsive so they don't overlap

    How to add the img-responsive class in javascript

    How do you get this result, using Jquery Scroll Event & offset/position, css or javascript?

    How to use Aural CSS?

    How to embed fonts in CSS?

    How to set the height with css to 100% and make it fluid?

    How to correctly use text overflow in bootstrap

    How to use jQuery without making a mess? [closed]

    How to assign CSS to mobile page in asp.net

    How to create a pattern overlay on top of an image

    How to edit menu in header - wordpress

    How to remove all inherited CSS formatting for a table?

    How do I make an erasing animation in CSS? [closed]

    Show X inside the body tag of a php file in case the screen size is smaller than Y

    Position: fixed to position:static when horizontal scroll shows up?

    How do I align an inner div with the bottom of an outer div?

    How to get the navigation element to have horizontal lines after each nav element in css

    How to display code blocks with word wrap and line number with jekyll markdown on github-pages

    How to Dynamically Fit image in screen using css

    How to write this CSS-Selector (Target img from previous Anchor-Tag)