Parallax Effect + Jump to to Section with Scroller

[dcardenas91 (Diego Adrián Cárdenas Jorge)]

Hello everyone!

I stumbled upon this site and I just love the effect:

http://unionagency.one/ivy/index2.html

The 3D parallax effect seems simple enough but when you scroll it jumps to a new sections. Can this be done in Webflow? I would prefer not to use any onwheel or onScroll Javascript.

Any idea helps, thank you!

---

Here is my public share link: LINK
(how to access public share link)

[matthewpmunger]

The only way to jump sections (without clicking an anchor link) while scrolling is to use javascript.
@PixelGeek actually did a tutorial on FullScreen.js today.

Webflow Workshop #123: Adding fullpage.js into your Webflow project

Join us on Tuesday, June 26th at 10am (pacific) [ Save your spot ] [workshop-card-123] Adding a full-page scroll interaction plugin into your Webflow project is easy — in this week’s workshop, we’ll show you how. We’ll focus on basic element structure, CSS styles, and adding custom code to make the plugin work. See the original plugin here:

Adding fullpage.js into your Webflow project

Here is a simple test I did with fullscreen.js recently before doing a client job that required it. It’s very easy install and highly customizable if you choose to dig in.
http://full-page-scroll-1a77a5.webflow.io
https://preview.webflow.com/preview/full-page-scroll-1a77a5?preview=18d0c44ce49bad77faf4df29089daf57

[dcardenas91 (Diego Adrián Cárdenas Jorge)]

Hello @matthewpmunger, thanks for the reply!
Actually JS is fine but the mouse triggers don’t work on all browsers, there’s always issues.
The problem with Fullpage.js is that it works for the whole page, whole sections and not individual DIVs.

The site example I showed works on most browsers and even Android and iOS. I figured out how they did it, now I just need to implement it in Webflow. They used Swiper JS (iDangero.us) and specifically I think the Mouse Control demo (swiper/270-mousewheel-control.html at master · nolimits4web/swiper · GitHub). I’m sharing the links for if anyone need it.

Thanks!