CODEWITHSUNDEEP
jquerycss
user1465342
user1465342

Reputation: 1

Div movement based on scroll, off screen

I have got 2 divs, lets call them #div_1 and #div_2. Both divs have content. What I'd like to do but can't figure out is: when the user scrolls the page, I would like to see the div_1 disappear into the top of the screen, much like it's pushed off screen. At the same time div_2 should become visible underneath div_1. Then when div_2 is visible entirely, div_2 should be able to scroll, a delayed scroll, if you like.

along the lines of: http://eephusleague.com/magazine/

I already tried to write and edit a lot of snippets but I can't seem to find out how. I am new to jQuery so I would really appreciate examples if possible.

Thanks in advance

Upvotes: 0

Views: 1255

Answers (2)

Holger D. Schauf
Holger D. Schauf

Reputation: 147

What you see and say is the parallax scrolling.

http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-design

There a some jQuery plugins, but if you have no matter how it works, i can give you an little example:

on document scroll, it is an jquery event:

   $(window).scroll(function() {


   });

all inside this function will react, if the user scroll the window with the native browser scrollbar.

you can put some checks inside this function like:

if ($(this).scrollTop() > 10) {
    // if current window top position greater than 10 you cant let move some elements
    $('#div_2').css{top:$(this).scrollTop()};
}

all together:

   $(window).scroll(function() {

      if ($(this).scrollTop() > 10) {
         $('#div_2').css{top:$(this).scrollTop()};
      }

   });

this is very basic

some additional to get the current scroll direction:

var oldPos = 0;
function getScrollDirection(actPos) {

   if (actPos > oldPos) {
       console.log("down");
   } else {
       console.log("up");
   }
   oldPos = actPos;

},

put this function inside the scroll event like:

$(window).scroll(function() {

      getScrollDirection($(this).scrollTop());

});

now you have some tools and information to build your own parallax scrolling for your site :-)

i Think this Plugin is the best:

http://jonraasch.com/blog/scrolling-parallax-jquery-plugin

So i hope this will help.

Upvotes: 0

SVS
SVS

Reputation: 4275

There are lots of jquery plugin available for making these kind of affects & its very popular these days. Its called parallax scrolling websites below are some plugins.

http://markdalgleish.com/projects/stellar.js/demos/

http://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/

http://johnpolacek.github.com/scrollorama/

http://joelb.me/scrollpath/

http://curtain.victorcoulon.fr/#intro

Website examples:

http://www.1stwebdesigner.com/inspiration/parallax-website-design/

Upvotes: 1

Related Questions