Streaming live at 10am (PST)

Parallax Effect + Jump to to Section with Scroller


#1

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)


#2

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.

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


#3

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 (http://idangero.us/swiper/demos/) and specifically I think the Mouse Control demo (https://github.com/nolimits4web/Swiper/blob/master/demos/270-mousewheel-control.html). I’m sharing the links for if anyone need it.

Thanks!