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

Recreation of the map found at  https://www.netflixshadowandbone.com/map

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

Draggable Map

If you watch the tutorial, you'll notice that the best performance and sharpness of the lettering can only be achieved with an SVG.
That's actually the way Apple uses it as well. The disadvantage is that you have to export an extra SVG image for your own wording.

Animating text elements with scale does not work, because Chrome renders the font blurry 😟

Effect works well on mobiel too!

Apple.com Zoom In Typo Animation

Apple.com Zoom In Typo Scroll Animation

A simple presentation of how you can add a Zoom effect on your product images using interactions only.

Supreme E

eCommerce // Product Image Zoom

parallax-scroll-experiment

Parallax Zoom Effect Experiment

Flowcraft

Update! This interaction is now available in Relume Library Extended:
https://library.relume.io/folder?folder_id=9048b939-9ebd-40bf-bada-0dccb2517c32

I created this effect for a client project and wanted to share it with the community as a cloneable.

It's all done with IX2.

The effect is on the "Products Template" page.

Hope you get some use out of it :-)

Product Zoom Effect

Product Image Zoom and Follow Mouse

An eCommerce website for new clothing brand Committee Chairs: when capitalism kills the dream job, dress for the part. Designed and built in 4 days.

Committee Chairs

Images zoom-in effect built entirely using Webflow native interaction. Custom code involved to disable/enable body scroll only. REMEMBER to copy the custom code for body scroll toggle on popup.

Suitable for product showcase where zoom-in is required to view the details of the product.

Interaction ONLY for Desktop. On mobile devices, it will be normal image without zoom-in interaction.

Have fun cloning. 😄

====================

💖☕ Support us by buying us a coffee.

If you enjoy our content, please consider supporting us. Your support will help us grow bigger and provide the community with better content.

https://www.buymeacoffee.com/sketchzlab

===================

💌 Follow us on social media.

Facebook @ www.facebook.com/sketchzlab
Instagram @ www.instagram.com/sketchzlab/
Twitter @ www.twitter.com/SketchzLab
Webflow @ www.webflow.com/SketchzLab
LinkedIn @ www.linkedin.com/company/sketchzlab/
YouTube @ www.youtube.com/channel/UCAEXTAQ7IAG71rsJ1ehBnzQ

sketchzlab-cloneable-4

Zoom In Effect for Images

Back from a week off, here's an entirely native zooming and panning interaction for all that delicious detail in your photos.

✅ Native Interactions
🚫 Custom Code

--

Follow me on Twitter: https://twitter.com/kevinhaag
Subscribe on Youtube: https://youtube.com/kevinhaagsucks

Zooming & Panning Images

MM—013: Zooming & Panning Images

Webflow launched Maker Day, a 24 hour remote design-a-thon aimed at creating a working website or prototype.

So I redesigned and prototyped Zoom and placed it within a sneak peek of my upcoming rebuild of MacOS Big Sur. Clone. Learn. Enjoy!

Watch My Demo - https://youtu.be/pDT2VG1jPfQ

Zoom

Protocore Original →  Zoom Redesign

This is a mock-up landing page for Kukis who needs an Zoom appointment booking system to cater the inquiries for their services.

This site is made for Manila Webflow's 12th Meetup.

Landing page with a Zoom-Calendly button that pop-ups within the page.
Custom code included within the page settings.

Figma file:
https://www.figma.com/file/AqeHZ7qcRvePLFrLtP7GXQ/Meetup-11.-Paano-Magdisenyo-ng-Websayt?node-id=0%3A1

Figma to Webflow Timelapse
https://www.youtube.com/watch?v=RdfXEPkgSos

Full Figma to Webflow video without commentary:
https://www.youtube.com/watch?v=N_2o8zZa9BM

Feel free to clone!

Kukis

Kukis. Custom Calendly Button On-page Popup

We've made this special project because ZOOM is everything now! 

Look at it as our design experiment and a tribute to what's going on in the world spring 2020. 

It's now cloneable, so enjoy this fun website with some cool lottie animations.

ZOOM

Zoom x Embacy

Welcome to daily interaction #111.

This demo showcases a product card with a zoom animation on hover. When the user hovers over the product image it scales up to zoom so the user can see more details about the physical product. This effect was accomplished by placing the image div inside of a wrapper with an overflow of hidden. When the user hovers over the image wrapper the image div scales up to double the size. Then with a 'mouse move over element' interaction I have the image move in different directions when hovering over the image wrapper. This allows the user to move around the image and see different parts.

To view more daily interactions and premium content visit:
https://www.webdevforyou.com/

WebDev for You - Daily Interaction #111

WebDev For You - Daily Interaction #111

After getting some feedback from the previous zoom-in cloneable, I recreated another version which is more suitable for product showcase in ecommerce websites.

Built entirely using native interactions. No custom code involved.

Interaction ONLY for Desktop. On mobile devices, it will be normal image without zoom-in interaction.

Have fun cloning. 😄

====================

💖☕ Support us by buying us a coffee.

If you enjoy our content, please consider supporting us. Your support will help us grow bigger and provide the community with better content.

https://www.buymeacoffee.com/sketchzlab

===================

💌 Follow us on social media.

Facebook @ www.facebook.com/sketchzlab
Instagram @ www.instagram.com/sketchzlab/
Twitter @ www.twitter.com/SketchzLab
Webflow @ www.webflow.com/SketchzLab
LinkedIn @ www.linkedin.com/company/sketchzlab/
YouTube @ www.youtube.com/channel/UCAEXTAQ7IAG71rsJ1ehBnzQ

sketchzlab-cloneable-6

Magnify Images

Welcome to daily interaction #99!

This demo showcases an image zooming out when hovering over each card. This effect was achieved by setting the overflow of the card wrapper to hidden. Then an image wrapper was placed inside of card wrapper. With interactions the image was scaled to double the size and set as the initial state. The initial opacity was also set to 0%. Then I have the image scale back to 1 and the opacity come back to 100% to create the zoom out effect. The text also changes color on hover to achieve better contrast with the image behind it.

To view more daily interactions and premium content visit:
https://www.webdevforyou.com/

WebDev for You - Daily Interaction #99

WebDev For You - Daily Interaction #99

This widget allows to insert a magnify glass effect over the images of your built in Webflow website.

Magnify Glass Cloneable

Magnify Glass

This interaction creates a grid zoom while scrolling effect in Webflow. These grid scroll animations are a great way to feature gallery content like portfolio work or products.

Grid Zoom while Scrolling

Use child perspective to make elements 3d, now let's build daily interaction #30.

This demo showcases an image zoom effect on hover.

To view more daily interactions and premium content visit: https://www.webdevforyou.com/

WebDev for You - Daily Interaction #30

WebDev For You - Daily Interaction #30

This widget allows to insert a cool zoom effect over the images of your built in Webflow website.