Coder Social home page Coder Social logo

Comments (9)

acturbo avatar acturbo commented on May 18, 2024

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

from fullpage.js.

alvarotrigo avatar alvarotrigo commented on May 18, 2024

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?

from fullpage.js.

alvarotrigo avatar alvarotrigo commented on May 18, 2024

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/

from fullpage.js.

Kwaadpepper avatar Kwaadpepper commented on May 18, 2024

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 :)

from fullpage.js.

tomByrer avatar tomByrer commented on May 18, 2024

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.

from fullpage.js.

Kwaadpepper avatar Kwaadpepper commented on May 18, 2024

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) :)

from fullpage.js.

alvarotrigo avatar alvarotrigo commented on May 18, 2024

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.

from fullpage.js.

ProfCMA avatar ProfCMA commented on May 18, 2024

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

from fullpage.js.

alvarotrigo avatar alvarotrigo commented on May 18, 2024

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

from fullpage.js.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.