One-page scroll plugin: don’t want content to slide

I want to change my website to one-page scrollable. I’m trying to achieve something like this. When a user “scrolls” the content changes. I thought I could do that with the one-page scroll plugin, but wasn’t successful.

Further explanation:

1. I want menu and few other elements to be “fixed” (visual explanation).

2. I want to just change the content, not slide it up or down as the plugin does.

To sum up, I want to trigger animations (block revealing effect etc.) when a user scrolls. I was thinking about making a website one-page scrollable and when a user scrolls, just redirect it to a new folder with HTML/CSS/JS files (menu stays the same, content changes). Maybe that would be one possible solution to my problem?

Anyone willing to share the solution with me?

Answer

First things first. The site you’re referencing isn’t using any scroll events. Open the site in Chrome and open developer tools. Then set the view to mobile (or tablet, same thing). If you’re in mobile mode in Chrome, your mouse acts like a finger would on a real Smartphone. By that logic your ‘swiping’ over the screen with your mouse should trigger the scroll event, but it doesn’t. Therefor, it isn’t actual scrolling that is triggering the fancy animations.

I believe Fleur Moreau used an ‘mousewheel’ event listener to trigger the animations.

var link = document.querySelector('body');
link.addEventListener('mousewheel', function (event) {

    // Prevent the link from updating the URL
    event.preventDefault();

    // Do something...
    console.log('Triggering fancy animations!')

}, false);

or if you’re using jquery

 $('body').on('mousewheel',function(event){

    // Prevent the link from updating the URL
    event.preventDefault();

    // Do something...
    console.log('Triggering fancy animations!')

});

Good luck with your project