Geek Answers Handbook

Add multiple layers

I use the Cool Kitten framework for a parallax project (because it is responsive). This structure uses stellar.js, which supports several levels of parallax. Cool Kitten does not provide any documentation, and it is not possible to directly use the documentation for stellar.js.

I want to have three layers of parallax, but I just can't figure out how to do this with Cool Kitten.

According to stellar.js docs, you do it like this:

<div class="slide" id="slide3" data-slide="3" data-stellar-background-ratio="0.5">
    <div class="wrapper">
        <img src="images/slide3/freelance.png" data-stellar-ratio="1.4" data-stellar-vertical-offset="-102"alt="">
        <img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-53"alt="">
        <img src="images/slide3/rockable.png" data-stellar-ratio="2.7" data-stellar-vertical-offset="-200"alt="">
        <img src="images/slide3/themeforest.png" data-stellar-ratio="3" data-stellar-vertical-offset="-200"alt="">
        <img src="images/slide3/tutshub.png" data-stellar-ratio="1" data-stellar-vertical-offset="-200"alt="">
        <img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-200"alt="">
    </div>

    <span class="slideno">Slide 3</span>
    <a class="button" data-slide="4" title=""></a>

</div>

... but when you try this code using Cool Kitten, it doesn’t work and the images are displayed side by side without any parallax effect.

So, how can you add multiple parallax layers with Cool Kitten?

+4
1

, - , ( ). , , .

: ,

0

More articles:


All Articles