Discover the best blend websites created by professional designers. Get inspired and start planning your perfect blend web design today!

Simple Snap Scroll interaction's with FullPage.js

Inspiration: https://bit.ly/3PgejOR
FullPage.js: https://alvarotrigo.com/fullPage/

Made with Client-first by Finsweet

Simple Snap Scroll with FullPage.js

My first cloneable in almost a year! Created in response to a Facebook post that seemed like a worthy challenge 💪

It was super tough to achieve, using a combination of dropdowns, position sticky, CSS Grid & some mix-blend-mode magic to power the colorful overlays. Mostly no-code, with just of 2 bits of JS: one to achieve the jump links (Webflow doesn't play nice with links inside dropdowns) and another set to reset scroll position when closing the accordions.

A few tips:
• Doesn't work well in Safari
• Need to add more jump links? You'll need to add more lines of JS in the page settings. 
• Additionally, jump links are linked to position: absolute elements within each dropdown, so you'll need to add new ones with new IDs to make it work

Enjoy, and let me know what you think!

Design: 
dribbble.com/shots/12209806-Blurr-Animation

Facebook post: facebook.com/100005276292047/videos/287781939881694/

Blur – Animated Accordions

🪗 Full-Height Funky Accordions 🪗

Use of mix-blend-mode on an element that replaces the cursor.

*edit 23.11.2021*
Webflow released a blend mode option so a custom code is no longer needed here.

https://webflow.com/feature/blending-mode

Cursor Blend

Rebuild of https://wickret.cuberto.com/ hero

This cloneable is for learning purposes only. I do not own the rights to this design and content.

Wickret

Wickret Hero

hover

Blend Effect Ecommerce

Finsweet

Check out the first colourful demo of the new Webflow properties introduced at No Code Conf!

Blending modes combined with playful interactions will allow you to literally feel the web reacting to you actions in the most spectacular and vivid manner.

This cloneable will help you understand the power of layering different blending modes and show how to use them with motion to create the perfect promotional page for some seriously jaw-dropping effect.

NCC experimental 1

NCC Blending Mode - Demo 1

To announce the new blending mode and backdrop filter features, Webflow reached out asking me to design and develop three eye-catching builds in two days. I quickly asked two of my friends, Shelby & Corey, for help creating the designs. This is one of the concepts that was chosen.

Project Team
Corey, https://dribbble.com/coreyschneiderdesign
Shelby, https://dribbble.com/shelbybuquet
Timothy, https://dribbble.com/tricks

Will it blend?

Second of Finsweet demos presents more complex techniques to achieve unexpected results with newly released blending mode and backdrop filter effects.

Combine separate channels into full colour photo; magically hide and show objects simultaneously using nothing but solid coloured divs; play with stacking various blend modes on top of each other; see the mind-bending inception of inversion of already inverted objects; use interactive colour changer for your elements, that does not even touch the elements themselves; create fun colour-restoring games; reveal the magical world invisible to naked eye with your blend-empowered cursor.

NCC experimental 2

NCC Blending Mode - Demo 2

Hi Webflow Community,

I have tried out the new features that Webflow has launched.
There are many opportunities to design completely new Interactions and  Designs, natively embedded in Webflow.
 
I repost the Showcase because I haven't seen that cloning was off 😅

Really cool stuff is coming from Webflow in the future - so we can all stay excited :)

Discover blend websites built by the Webflow community

Discover blend websites built by the Webflow community