Parallax effect like KANO.me

Design help General
1

Hello everyone !

I’m beginning with webflow and I need to do a kind of parallax effect.
I want it to work sort of like a pdf, each time someone scroll he gets a new image.
I want to make it work same as this website : http://www.kano.me/
But I don’t really know how to do that…
I looked a bit everywhere and I saw some of you having issues with parallax but I couldn’t find this specific effect that I want.

If someone have a solution I’ll be thanksfull !

2

Hi, the site you’re referencing uses what is called “scroll hijacking”, which isn’t possible within Webflow yet. It’s maybe possible to do it with Webflow but with the addition of Javascript scripts.

In Webflow you can make things happen when certain designated objects scroll into or out of view, but not have motions following scrolling precisely.

3

Oh thanks for telling me !

I didn’t the name of this effect.

I have seen some people assing some jquerry or JS to webflow.

Is it possible to recreate the scroll hijacking effect somehow ?

4

In some wyas I’d say yes… When it’s about capturing the scroll to make a parallax effect, or to smooth scroll automatically to a section.

However, what you’re showing us with your reference is kind of the ultimate step in scroll hijacking. There’s temporality, SVG animations. It’s kind of technical and long to achieve. Also this one isn’t perfect, animations are often jiggy.

My designer recommendation would be to let a developper specifically code this. Design everything and animate the concept with an animation tool such as Adobe After Effect, then let a developer reproduce it. I think it’s a bit overkill to want to reproduce this in Webflow. At that time WF isn’t the right tool to do this.

Oh, and this site you’re showing us takes time to develop, fine tune. It’s not cheap (:

2 Likes
5

@MoinardColin I agree with @vincent about this! The way Kano created this it does have a cool factor but it’s a bit lost with the jumpy transitions.

Design wise, I love new and interesting visuals and effects but I’ve read a number of articles/data that say users don’t prefer them as much as we designers like to think. In this case the effects not working 100% take a way from the message…IMO. Possibly, you could do a more subdued version of this site using scroll interactions and still come very close to the same overall effect only better.

6

Alright thank you guys for the answer !
That’s pretty clear to me now !
I guess it’s kinda complicated and not worth it.
I’ll try other interaction then.

At least is it possible to do the one scroll effect?
I mean making a section take 100% of the user viewport and when he scroll down it goes to the next section ?

7

That’s a super no-brainer with Webflow, it’s actually made for that (:

For a full browser section:

  • the body needs to be declared at height:100% (changes nothing but i’ts a prerequisite for the following)
  • then sections have to be 100% height too (the one you want to be fullscreen)
  • sections have to be at the root of the site (right inside body) and have unique IDs to link to them with a smooth scroll
  • navbar has to be at the root right inside the body, if you custom a navbar, it has to have the HTML tag navbar, or header, for their height to be taken into account for the size of the fullscreen sections
  • work with a laptop close to you: 800px height screens, you want your site to work with that. if a sections is hard to design for all screens, use the MIN-WIDTH property so on some screens it will be higher than fullscreen
  • vertical centering of something in a section can be achieve with top:50% and translation UP -50% (maaaagiiic)

All the rules above will faciitate your life (:

8

Thank you for the solution !

There is still few things I don’t really understand, sorry I’m not really comfortable with coding :confused:

  • When I create a navbar, I don’t see anywere I can put a html tag. Do I have to create a custom navbar ?
  • And how do I create the smooth scroll ?
  • I don’t understand the last part : **top:50% and translation UP -50% **

Sorry to bother you and thanks for helping me out !

9

I’m not at all, too ◕‿◕

That’s because its a webflow widget and it already has its tag. So just make sure you put it under the body and not inside a section or div, and you don’t have to worry with the tag.

If you respect the advices above, give unique IDs to sections, and link to these IDs using the link panel, it will smooth-scroll. If it happens to ‘jump’ without scrolling, it’s because you messed up with the structure (: Most likely it’s smooth scroll on first try.

Made you a page: http://sab.webflow.com/vertical-centering

10

Thanks for helping but I’m still not sure I understand.

I did a test page can you take a look at it if it’s not too bothering ?

https://webflow.com/website/test888888888888

Sorry again for being slow :confused:

11

Can you please share your project’s public link so it’s easier to understand your issue?

Learn how to do it here: Share a read-only link | Webflow University

12

Alright sorry !

Here we go : https://preview.webflow.com/preview/test-smooth-scroll?preview=7c8ce4ab98e5de98b2b68db83242e58c

13

I see the site but what’s going wrong here?

14

Well the smooth scroll effect isn’t working.
Isn’t it ?

15

what’s called the smooth scroll is when you link sections to actual links, in a navbar for example, then the page smooth scroll to said section. Like this : http://sab.webflow.com/navbar-with-anchors

16

Not only in a navbar… you could put one icon in each section, that links to the following one. Or little arrows at the end of each sections that travels back to the top like on this page http://www.kds.com/about-kds-company

17

Alright I understand now !
I think I can do it !

Thank a lot for all the help !
That was really nice from you !

2 Likes