Marketplace
Made in Webflow

Component → Native Photomasking

3423 views
site profile thumbnail

Description

1. Create a SECTION called foreground, change display to FLEX, center align it, and set its position to ABSOLUTE with a height of 100VH. Give it a COVER → FIXED background. Upload a blurred version of your photo. 2. Drop a DIV called MASK into the SECTION and customize it however you like. Set its position to ABSOLUTE with a Z INDEX of 1. For the zoom effect, simply add a CLICK interaction on the MASK. 3. Drop another DIV within MASK called PHOTO, set its width 100VW and height 100VH. Change its position to ABSOLUTE, give it a COVER → FIXED background, and upload the original image. 4. Add a PAGE TRIGGER interaction, select MOUSE MOVE IN VIEWPORT, and create an animation. Add MOVE interactions in the MOUSE X and Y panels. MASK - Set X’s position to -50VW at 0% and 50VW at 100%. Set Y’s position to -50VH at 0% and 50VH at 100%. PHOTO - Set X’s position to 50VW at 0% and -50VW at 100%. Set Y’s position to 50VH at 0% and -50VH at 100%. That's all folks :)
Feeling inspired?If this Made In Webflow site sparked some inspo, why not get started on a project of your own? Clone a site, purchase a template or start building from scratch.

We miss comments too!

Right now, Made in Webflow doesn't offer all of the same functionality that Showcase did, like the ability to leave comments. But don't worry: We're working to bring comments back as soon as possible!

As always, we'd love to hear your feedback! Click the link below to take a short survey about Made in Webflow.

nativephotomaskingclippinginteractionanimationnocodetechniquemouseovermagnifyeffectblur100-pages

More by Protocore

See profile
View details
Rebuild → Playstation 4
384
305