fullPage.js + parallax

[toastedpixel]

Hi! Does anyone tried to make parallax effects with the fullpage.js? Is that possible combine with other code?

[acturbo]

+1 ... it would be good to see a sample

[alvarotrigo]

Update March 2017

There's now a parallax extension to create parallax effects!

Original answer

It shouldn't be a problem. You can add the needed jquery in the ´afterRender´ event.

What is the problem you are facing?

[alvarotrigo]

Update March 2017

There's now a parallax extension to create parallax effects!

Original answer

Here you have an example using fullpage.js with paralax:

http://www.saltaboombox.com.ar/

[Kwaadpepper]

I'm actually trying to put a parallax in slides, i found this https://github.com/darsain/sly/wiki/Parallax, since you can input the scroll source, maybe there is a way to make it work, i don’t really know right now.

Hope someone find a way through this :)

[tomByrer]

http://www.saltaboombox.com.ar/

I think this site's paralax has to do more with GASP & their own hand-written code than fullPage.js.

Seems some people expect fullPage to be a feature-rich 'turn-key' solution for all their paralax needs. But fullPage is just a simple slideshow maker, with extras that you can expand upon with the user's hard work.

[Kwaadpepper]

I've just found something interesting, since fullpage.js uses slimscroll (there is no good doc about). I saw on slimscroll source it binds the event slimscrolling, there is also slimscroll (for bottom and top)

So you can use for your parallax code :

    $('#fullpage').fullpage({
        ...
        scrollOverflow: true,
        ...
    });
    <div id="Sbiographie" class="section">
        <h3>my section</h3>
    </div>
    // On scroll event
    $('#Sbiographie').bind('slimscrolling', function(e, pos) {
        console.log(e,"Scrollbar at "+pos+"px");
    });
    // Top and bottom event
    $('#Sbiographie').bind('slimscroll', function(e, pos) {
        console.log("Reached " + pos");
    });

see http://rocha.la/jQuery-slimScroll.

Hope this helps somebody (it would be nice to add to the fullpage.js doc since it uses slimscroll plugin).

EDIT: It would also be nice to have access easily to slimscroll configuration options (like wheelStep for example) :)

[alvarotrigo]

Now from version 2.4.4 you can combine fullPage.js with any parallax plugin if you use the option scrollBar:true as you can see in this demo.

scrollBar: (default false). Determines whether to use scrol bar for the site or not. In case of using scroll bar, the autoScrolling functionallity will still working as expected. The user will also be free to scroll the site with the scroll bar and fullPage.js will fit the section in the screen when scrolling finishes.

This way the plugin will really perform the scroll of the site as all these kind of parallax techniques expect.

[ProfCMA]

Is this to say that using css based parallax is not possible?

[alvarotrigo]

There's now a parallax extension to create parallax effects!