Page scroll to change a stationary view instead of move down a page?

Design help General
1

Hi all

I have been working on this whole website thing for a little while now, but I still suck and can’t really make much of the complex stuff that I have fallen in love with while doing market research.

In particular, there is on site that I have fallen in love with. Like, completely. I cant get it off my mind.

The design is perfect, but I have no idea how they have done it
(complex, professional JavaScript and webdesign - duh - but that isn’t the answer I was hoping for…)

What I mean to say is, there are a few core elements that I am drawn to. The most prominent is this scrolling effect. This scrolling effect. This scrolling effect. This damn scrolling effect. I am in a trance with the way it works.
Does anybody know how to do this? Or even get anywhere close? I want a page that doesn’t move when I scroll and instead transitions from one view to the next, with the background and content changing.
.

I don’t even know what this type of transition is called… it’s like a carousel, but it isn’t… it is so close to some of the functionality I have seen others implement into webflow sites and hardcode sites alike, but neither address what I am looking for directly.

If anyone has a clue how to achieve this scrolling effect that would make a world of difference. I think I can patchwork any other functionality I like based on existing resources, but this scroll is driving me crazy with its ambiguous name and lack of explanation.

Don’t feel obliged to restrict information to webflow either. If you know anything about this, even just what it is called or where to learn more, please let me know as it will help my research efforts.
Thank you in advance.
~Merlin

Here is my site Read-Only: LINK

2

Start with fullpage.js. It has a lot of hidden parameters. I don’t know if you can achieve that elastic snap and edge magnetism with it but you can maybe approach it.

Here’s a demo with Webflow: http://fullpagejs-template.webflow.io/

Follow the links to fullpage.js site afterwards.

Once you have the fullpage effect, navigating from a section to another, you’ll be able to bind each section to an “while scrolling in view” triggered IX animation that will control elements in a fixed section, always in view. The vertical structure will be used as a series of triggers for those animations. As the animations will depend on the scroll, the snapping you’ll have achieved with fullpage.js will transfer to your IX animations.

3

I checked and there is no fine tuning of the motion in fullpage.js, apart from the easing mode you can change (that can add a bounce to the end of the motion for example):

4

A couple of things reagrding your demo:

  • You are importing the CSS for fullpage.js version 2 and not for fullPage.js 3.0.7.
    You can actually use exactly the same CDN you are using for the JS version and change the JS extension to CSS:

https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.7/fullpage.css

  • It would be nice to also point out that fullPage.js is not free for commercial purposes and that it requires a license that can be obtained from the pricing page :slight_smile:

And answering @Merlin question. There’s no such effect yet in fullPage.js but keep tuned as we might release something similar at some point! :slight_smile:

5

@vincent oh, another thing I forgot.
You are currently using the jQuery initialisation for fullPage.js in your demo, but that forces you to also import jQuery.

You could just use the JS initialisation and avoid the 80Kb+ of jQuery :wink:
I provide an example of it here:

6

Oh great, thanks, I had trouble to find the adequate library to link. I will edit that soon.

And I will make that clear too, you’re right, and your library deserves support :slight_smile:

I’m going to follow the repository too then :smiley:

Thanks! Will do.