Make 2 divs move in inverse directions

112
November 23, 2016, at 1:46 PM

Sorry for such a dummy question of mine I think. Please help me if someone know the way to make the div have animation up and down when scrolling like this: http://velvethammer.net/

You can see near the footer of the site, it has 2 sections which contain 2 images each (one bigger and another one small, one in front while the other one is behind). I wonder that how can I make 2 divs and make them have animation of up and down a little bit (like parrallax) like that when scroll up and down the site.

Thanks.

Answer 1

Most of the solutions I have seen to a problem like this involve JS of some kind and listen to the user's scroll event.

I have written a very simple example using JQuery. Here, the javascript listens for whenever a scroll happens, and measures how far the top of the page has been scrolled. Then it takes that value and multiplies it by different values for each image and uses margin-top to push the images down at different rates.

If the images were further down the page as in your example, I would suggest measuring from a different position than the top of the page. JSfiddle here: http://jsfiddle.net/3Lb054qn/

Answer 2

You have to change css position atributes according to scroll. So you have to do something like the following. In that margin-top is changed of second div tag. Javascript code is as follows.

<script type="text/javascript">
var lastScrollTop = 0;
$(window).bind('scroll',function(e){
  var st = $(window).scrollTop();
  var cs = $(this).scrollTop();
  var wh = $( window ).height();
  var dv1 = $('#div1').offset().top;
  var dv2 = $('#div2').offset().top;
  var visible_dv1= dv1 - wh;
  //check wether div1 is in the viewport when scroll down
if(st > visible_dv1){
if(cs > lastScrollTop){
    //if scroll down
    $('#div2').css({
    'margin-top': "-=3"
  });
}else{
    //if scroll up
    $('#div2').css({
'margin-top': "+=3"
  });
}
}else{
    $('#div1').removeAttr('style');
    $('#div2').removeAttr('style');
}
  lastScrollTop = cs;
});
</script>

html and css would be something as follows.

<style>
.container{width:100%;}
.grid{font-size:22px; width:168px; height:168px; display:block; }
#div1{background:#C30;margin-top:1000px;float:none;position:relative;z-index:1000;}
#div2{background:#6C3;margin-top:-100px;margin-left:50px;float:none;}
</style>
</head>
<body>
<div class="container">
    <div class="grid" id="div1">
        div 1
    </div>
      <div class="grid" id="div2">
        div 2
    </div>
</div>
</body>
READ ALSO
ASP.NET MVC jquery datepicker day could not be greater than month

ASP.NET MVC jquery datepicker day could not be greater than month

I have a problem while trying to use jquery datepicker in ASP. NET MVC.

140
Direct uploading returning incorrect src with Image Element

Direct uploading returning incorrect src with Image Element

I'm using the JQuery plugin and unsigned image uploader with Cloudinary. My images are uploaded successfully, but the HTML image element returned from bind 'cloudinarydone' contains file:// prefix so the examples given do not load the $.

111
Calling Javascript Variable Created In Master Page in Yielded Content

Calling Javascript Variable Created In Master Page in Yielded Content

I am using Laravel 5 where I can make a master page (header, footer) and import every page's content in that master page. .

125