Hey Webflowers!
I’m building a website for a client — it should be fluid (I’m using the Wizardry technique made by @tricks) and has scroll snapping (akin to FullPage.js). During my research, I found out Scrollify.js, but then I’ve stumbled upon the “scroll-snap” CSS property. It does work well (still very early in the build process), however, I would like to disable the mouse wheel until the animation plays out.
To be more precise, here is what I mean: the website, basically, is a collection of various fluid full-screen sections (hence using Wizardry) — sections change on scroll. The issue here with “scroll-snap” is users can scroll through the website very fast. The design requires everyone to sit through all animations so I’m wondering how to disable the mouse wheel when scrolling triggers section change and the animations are playing.
Here is an example of what I want to achieve → https://katiforner.com/ (there is a section with scroll snapping).
That being said, if it’s quite hard to pull out, then I would like to disable the mouse wheel so the section can be “opened” — users can still scroll to another section when the animation starts loading but, again, cannot do it when sections are changing.
Here is an example: https://clocklab.design/
BTW, this website aims at a specific audience and is not taking accessibility into consideration right now because the client lacks resources and time for that. Just saying it in case you want to say anything about accessibility — this project just isn’t about it (right now, at least).
Thank y’all for the replies in advance!