alvarotrigo / fullPage.js

fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple
http://alvarotrigo.com/fullPage/
GNU General Public License v3.0
35.28k stars 7.3k forks source link

Make scrolling smoother? #524

Closed mudchallenger closed 10 years ago

mudchallenger commented 10 years ago

First of all, amazing work on this.

My question is how can I get smoother scrolling as seen on the Apple example that you provided? It seems to scroll smoother than the other pages, and I just can't seem to figure out where that's coming from. And what to implement in my file to get this desired effect to make the slide change a bit smoother.

Thank you!

alvarotrigo commented 10 years ago

The Apple example I created is using css3:true instead of the default option css3:false. This way it will work smother in some devices (it is hardware accelerated ) and in tablets or mobile phones (usually).

In old browsers css3 is not supported so it will fallback to jQuery animations.

Take also into account that with css3:true you can not use jQuery easing animations and you will have to work with the CSS3 easing effects in case you want to modify them.

To modify the css3 easing parameters you have to do it on the .easings class provided in the jquery.fullpage.css file:

.easing {
    -webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
}