Create a stunning scrolling zoom interaction for your Webflow portfolio in just minutes
HTML-код
- Опубликовано: 12 июл 2024
- Join host, Nelson Abalos Jr, for another fun episode of Build With Me as we recreate the scrolling zoom interaction as seen on the Discovery Builders homepage.
discoverybuildersllc.com/
We’ll learn more about:
- Setting up the HTML and CSS for this design
- Creating the Webflow interaction
- Making a mobile version of the interaction
Cloneable: wfl.io/livestream-scrolling-zoom
----------
Timestamps:
00:00:00 Stream start
00:01:27 Stream intro
00:02:23 Stream topic and demos
00:05:39 Stream agenda
00:06:48 Breaking down the design
00:13:10 Building the page in Webflow
00:22:56 Adding the scrolling zoom interaction
00:36:12 Q&A
00:40:01 Credit roll and outro
----------
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community: webflow.com/community
webflow.com
/ webflow
/ webflow 
Наука
![Sean Rii, Karyon, Sharzkii - Taungule [My Love] (Official Music Video)](http://i.ytimg.com/vi/eJoMuypbSzQ/mqdefault.jpg)
![Natanael Cano x Oscar Maydon - Giza [Official Video]](http://i.ytimg.com/vi/eXCS6-MSQ_Y/mqdefault.jpg)
Nelson! You are such a space cadet man 🧑🚀! Great stream. AWESOME interaction. Thank you for sharing this!! I'm feeling inspired. 😁👍
Legend. Your teaching style is fantastic. @Webflow should be proud!
I have only used Webflow to build my personal portfolio website.
With this video, I am now an ardent student of webflow. Watching out for tutorials, live chats, conferences and events.
Thank you Webflow.
Great work Nelson. You're a legend!
I appreciate that!
Nelson is the man!
Loved it! Thank you very much.
Just found this and loving the teaching! Thank you for making me laugh too! :)
Thanks Nelson.
Awesome! Thank you.
You're welcome!
Clone today's project here: wfl.io/livestream-scrolling-zoom
Page not found :/
the clonable is not working guys.
Hm.... I've tested it just now in incognito mode and its working. Does this page still show 404? webflow.com/made-in-webflow/website/bwm-16-scrolling-zoom
@@Webflow I've tested it again in the incognito mode, but it didn't work again. :/
Still 404 but it works fine after you clone it.
Nice!
Awesooooome!!!
Thank you! Cheers!
Omg, this guy is so nice
At 35:10 you mention how by adding a mask, you can make the main image expand around the other images. What I'm having trouble with is that two of my cells are going over the main image. How would I make it like yours, where the main image covers everything? thanks
Thank you for making this! When I put the pictures in my grid the pictures blow up to crazy heights and widths and cant figure out how in yours in stays defined within the grids
Try setting your images width and height and also apply object-fit:cover; to them. Hope this helps :)
😮
What about the images moving away from each other on the Discovery version?
I have question: I used this solution to zoom a section at the top of my page. However, when using it on mobile (iphone specific) the page is stuck. You cannot scroll the page at all. Any ideas?
How can you make it responsive to smaller devices ?
How would you optimise it for different viewpoints
I would suggest to simplify it for mobile by removing the animation and the images around the main image. This is what the Discovery Builders website has done.
Should we start using SVH instead of VH? 🤔
Yes. Here is a full explanation as to why: ruclips.net/video/7judyqwqmKo/видео.html
why is cloneable 404?
You MISSED one last thing... The other images also move away from the main image as it zooms.
I realized you can fix this by playing with the 2/3D transform settings and scaling down the outer images on scroll (the 2D/3D transform setting makes it look like it's moving away).
I set the Quick Stack "child perspective" at 400px distance and scaled it down to 0.7 as it fades out during the animation. Hope that helps!
Bummer, was hoping to see the whole page recreated, and not just the zoom effect.
Which other parts of the page would you like for me to rebuild in Webflow? We can schedule those for a future stream.