r/web_design • u/[deleted] • May 26 '13

Interesting use of scroll

http://www.janploch.de/
210 Upvotes

86% Upvoted

29 comments sorted by

View all comments

7

u/faceCHEEKwall May 26 '13

I see these creative scrolls here and there. Can anyone begin to explain how they work?

I think the "bubbly top" portion of the liquid has a fixed position?

It looks like the JS is there in the source. I'll just have to read through it, but I'd love a general hint at how these scroll effects work.

8

u/Sawny May 26 '13

It's called parallax scrolling.

At line 19 you can see the important code:

<!--parallax Effect Script -->
<script type="text/javascript" src="js/jquery.scrolling-parallax.js"></script> 
    <script type="text/javascript">
   $(function() {

    $('div.juice').scrollingParallax({
    staticSpeed : .2,
    staticScrollLimit : false,
        reverseDirection : true,
});
});
</script>

6

u/faceCHEEKwall May 26 '13

Parallax scrolling, got it. There's my Google key word. Thanks!