-1

I'm trying to create this "parallax" effect : https://www.laruchequiditoui.fr/fr (like the .homeSection--collection section).

It's a div containing three layers with an effect of perspective on scroll. This website uses TweenMax but it seems heavy to me to make just this effect.

What is the easiest and lightest way to recreate this parallax scrolling effect ?

I tried to clean the laruchequiditoui.fr example to keep only the necessary code : http://is.gd/r0JNHl

I need to have multiple instances on a page, like laruchequiditoui.fr website ; andenter code here iPad compatible if possible.

Thanks in advance !

Beny
  • 890
  • 2
  • 15
  • 26
  • 1
    [skrollr](http://prinzhorn.github.io/skrollr/) – aarosil Feb 17 '15 at 01:38
  • +1 for skrollr but that's not an authoritative opinion because I haven't tried scrollmagic, but after reading about them skrollr seemed easiest for a recent project and certainly worked well for me. – sifriday Feb 17 '15 at 01:41
  • Oh, Skrollr seems really light and easy to use. I'll make some tests. Thanks. – Beny Feb 17 '15 at 01:46
  • I just posted a real quick example of simple parallax to get you started. I found their demo examples a bit complex for my first attempt! – sifriday Feb 17 '15 at 01:49
  • Skrollr does seem like the best choice for you. Do note, that in ScrollMagic 2.0 (currently in beta) you are also able to do CSS only animations without TweenMax. – Jan Paepke Feb 18 '15 at 11:24

2 Answers2

1

I would personally use skrollr.js for parallax, there are few tutorials on this page.

Or maybe you might prefer to use ScrollMagic.

There is also a pure CSS parallax tutorial here.

cch
  • 3,336
  • 8
  • 33
  • 61
1

Minimal Skrollr setup for a parallax scroll like the mountains in the example you link to:

HTML - inside the <body> tag:

<div class="skrollr-body">

    <!-- 
      Put the slow image here. It will scroll only 500px for 1000 pixels of
      browser scroll, so 'half speed'. 
    -->
    <div id="splash" data-0="top: 0px" data-1000="top: -500px">
        <img src="..." />
    </div>

   <!-- 
    Put your normal image here, which will scroll with parallax over the above
    image. This will need a margin to push it below your fixed #splash. Set
    its margin-top to the height of #splash and set its position to absolute.
   -->
  <div>
      <img src="..." />
  </div>

</div><!--/.skroll-body-->

Some CSS for #splash:

#splash {
    position: fixed;
}

And some JS to make it happen. Assuming you're using jQuery, but otherwise you need document.onload:

$(document).ready(function() {
    skrollr.init()
});

Put that in your <head> or at the bottom of <body>.

Demo - http://jsfiddle.net/sifriday/1ugaooj0/

sifriday
  • 4,342
  • 1
  • 13
  • 24