How to do this webflow geniuses? Full-Screen lock

Hi there guys,

I was wondering how you can achieve this approach with webflow, http://leafcutter.com.au/

It is the full screen background, requires one drag down to lock into the next full screen background.

Seems easy enough right?

Cheers,
Julian

1 Like

the full screen part is pretty easy, you just make every section 100% height.
about the one-scroll that moves to the next page… that’s for the pro’s to help you :smile:

There’s no drag hijacking in Webflow yet. You can achieve pretty much the same site but without the drag-and-lock. You can have full browser sections, you can have the nice menu on the right (floating element, absolute positioning), you can have the animation to next section at the click of one menu element (dot) or button (for example a NEXT button on every section).

If you want to capture the drag and make it go to the next section, I guess you have to find an external script and add it to your site.

As cool as your example site is, there’s a good amount of people thinking you shouldn’t hijack the drag (capture its event to make it do something else than drag). I have to admit this one is quite okay. Lt me know if you find a script, that’s interesting and many Webflow users will be interested.

https://webflow.com/design/rev-test-0001?preview=ddd837f8b4048e802549f3ee2e3c739e

Note…

  • if you resize the screen to give a different aspect ratio
  • the images may not display correctly.

Also - doesn’t really work on small device.

This is only about 10 min of work

  • So… will not be the best answer
  • Perhaps you can play with it and work out the kinks.

Hey dudes, I was actually figuring this out recently… many sites like the one you mentioned and http://www.lucky21.us/ use a plugin called fullpage.js which makes this effect very easy, and you can customize easing and duration values very easily.

It’s simple to implement if you use the right markup structure (as in the fillpage.js documentation) and add the plugin & initializer script in the custom code area at the end of the body.

http://fullpagejs.webflow.com/
https://webflow.com/design/fullpagejs?preview=7540b0f1b6c9d6aad7e8268c4d16f29f

plugin site: fullPage.js | One Page Scroll sections Site Plugin

5 Likes

Great job Mark thanks for sharing :slight_smile: Works like a charm.

1 Like

good work mark!! this is nice!

1 Like

hi @vincent or anyone if possible,

I have no coding background at all - I was wondering if you could make a really quick guide of how to implement this? I understand if it would be too difficult, though thought I would ask :confused:

Thanks!
Julian

@Mark_Suarez could you maybe give a hand to @juliansocial? I’m really not the JS guy.

@vincent @Mark_Suarez

Thanks guys :slight_smile: let me know, i dont want to take up too much of your time.

I feel that once I learn this, i’ll have a foot into basic JS understanding.

Google Malwarebytes. It works great.