CODEWITHSUNDEEP
jqueryscrollmousewheeljquery-easing
Igor Laszlo
Igor Laszlo

Reputation: 742

Fullpage mousewheel scroll with easeInCirc effect

i give sections to my html page, each section has 100% width and height to get screen size. The body and sections overflow is hidden because i would not like to show the scrollbar. Instead of it, i would like to use only menu and mousewheel for navigation between the sections.

The problem is that i do not know how to adapte the script what i have found on the net that it should scroll only one section at once (100% height)... if you could correct my script :

$(document).ready( function() {
    $('body').mousewheel(function(event, delta) {
        if (delta < 0) {
            $('body').scrollTo('+=800', 1500, {easing : 'easeInCirc'});
        }
        else {
            $('body').scrollTo('-=800', 1500, {easing : 'easeInCirc'});
        }
    return false;
    }); 
});

(I indicated +=800 and -=800 because i thought this is the pixel, it is not even like this. Anyway, i need 100% and not exact pixel...)

The HTML is simple :

<body>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</body>

Here is my test page : http://photography.igorlaszlo.com/test.html - the menu already does what i would like (except the sticky effect which is not perfect yet, does not matter).

Here is a great example what i would like to do : http://www.atelier-serge-thoraval.com

Thanks in advance !

Upvotes: 0

Views: 867

Answers (1)

Igor Laszlo
Igor Laszlo

Reputation: 742

Ok, it is crazy but i find always the answer when i pose the question in this website... not before ! :) Because when i type the title, the sidebar propose related links (i discovered just now). It is due to my English as well, i need to find the right words on Google or here.

This is what i am looking for :

http://alvarotrigo.com/fullPage/

https://github.com/alvarotrigo/fullPage.js

But who knows, maybe i will come back with panic, i must still install it... :)

Upvotes: 2

Related Questions