How to Create a Zoom-Out Header Transition on Scroll in Divi

Last Updated on September 17, 2022 by 4 Comments

How to Create a Zoom-Out Header Transition on Scroll in Divi
Blog / Divi Resources / How to Create a Zoom-Out Header Transition on Scroll in Divi

Creating a zoom-out header scroll effect can be an impressive design element to engage users with your content. The effect is similar to what you see on Apple’s macOS Catalina page. In this tutorial, we are going to show you how to create a zoom-out header transition on scroll with Divi. The trick is to add scaling and vertical motion scroll effects to an entire row to create the zoom out effect. The result is a beautiful transition that leaves users pleasantly surprised.

Let’s get started.

Sneak Peek

Download the Layout for FREE

To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

To import the layout to your page, simply extract the zip file and drag the JSON file into the Divi Builder.

Let’s get to the tutorial, shall we?

What You Need to Get Started

expanding corner tabs

To get started, you will need to do the following:

  1. If you haven’t yet, install and activate the Divi Theme.
  2. Create a new page in WordPress and use the Divi Builder to edit the page on the front end (visual builder).
  3. Choose the option “Build From Scratch”.

After that, you will have a blank canvas to start designing in Divi.

How to Create a Zoom Out Header Effect in Divi

Section Height

For this design, we need to give our section a height that extends beyond the height of the viewport to give some room for the scroll effect to work.

Before doing anything else, open the section settings and update the following:

  • Height: 150vh (desktop), 100vh (tablet), 100vh (phone)
  • Padding: 0px top, 0px, bottom

zoom-out header divi scroll effect

The Row

After the section height is complete, add a one-column row to the section.

zoom-out header divi scroll effect

Row Background Image

Before adding a module, open the row settings and add a background image. Make sure the image is at least 1920px wide (large enough to span the full screen of a large monitor).

zoom-out header divi scroll effect

Row Size and Spacing

Once the background is in place, we need to make sure our row spans the full width and height of the page. To do this, update the following design settings for the row:

  • Gutter Width: 1
  • Width: 100%
  • Max Width: 100%
  • Height: 100vh
  • Padding: 0px top, 0px bottom

zoom-out header divi scroll effect

Row Box Shadow

Then give the row a box-shadow. We won’t see it until we add the scroll effect that scales the row down to create the zoom out effect.

  • Box Shadow: See Screenshot
  • Box Shadow Vertical Position: 0px
  • Box Shadow Blur Strength: 50px

zoom-out header divi scroll effect

Add a Text Module for the Heading Text

Next, add a new text module inside the row.

zoom-out header divi scroll effect

Text Content

Update the body content with the following H2 heading:

<h2>Your Journey</h2>

zoom-out header divi scroll effect

Text Design Settings

Then update the design settings for the text as follows:

  • Heading 2 Font: Poppins:
  • Heading 2 Font Weight: Bold
  • Heading 2 Text Alignment: Center
  • Heading 2 Text Size: 10vw
  • Heading 2 Line Height: 1.3em

zoom-out header divi scroll effect

Column Height and Background Overlay

Once the text module is in place, we need to customize our column settings so that it becomes a nice overlay for our row background. To do this we will need to update the background color with a semi-transparent color and give the column a 100% height.

Open the settings for column 1 and update the following:

  • Background Color:

zoom-out header divi scroll effect

Under the advanced tab, add the following custom CSS in the Main Element:

height: 100%

zoom-out header divi scroll effect

Next, add some padding to the column…

  • Padding (desktop): 35vh top
  • Padding (tablet): 40vh top

zoom-out header divi scroll effect

Column Scroll Effect

Next, add a scroll effect to the column that will fade out the column (with the background color and text) on scroll. To do this, update the following:

Under the Fading In and Out tab…

  • Enable Fading In and Out: YES
  • Starting Opacity: 100% (at 0% viewport)
  • Mid Opacity: 100% (at 70% viewport)
  • Ending Opacity: 0% (at 80% viewport)

zoom-out header divi scroll effect

Add Scroll Effects to the Row

Now we can start adding the scroll effects to the row.

Vertical Motion

Open the row settings and update the following:

Vertical Motion Scroll Effect (Desktop)

  • Enable Vertical Motion: YES
  • Starting Offset: 0 (at 5% viewport)
  • Mid Offset: 4.5(at 50% viewport)
  • Ending Offset: 4.5 (at 100% viewport)

Vertical Motion Scroll Effect (Tablet)

  • Starting Offset: 0 (at 30% viewport)

Make sure to update the motion trigger effect to the bottom of the element. This is key for making the scroll effect work. To do this, update the following:

  • Motion Effect Trigger: Bottom of Element

zoom-out header divi scroll effect

Fading In and Out

To make the header fade out just before leaving the top of the viewport on scroll, open the row settings and update the following:

Fading In and Out Scroll Effect

  • Enable Fading In and Out: YES
  • Starting Opacity: 100% (at 0% viewport)
  • Mid Opacity: 100% (at 85% viewport)
  • Ending Opacity: 0% (at 100% viewport)

zoom-out header divi scroll effect

Scaling Up and Down

To make the header “zoom out” we need to scale it down to 50% on scroll. To do that, update the following:

Desktop

  • Enable Scaling Up and Down: YES
  • Starting Scale: 100% (at 5% viewport)
  • Mid Scale: 50% (at 50% viewport)
  • Ending Scale: 50% (at 100% viewport)

Tablet

On tablet, adjust the following:

  • Starting Scale: 100% (at 30% viewport)
  • Mid Scale: 40% (at 50% viewport)

zoom-out header divi scroll effect

That takes care of our zoom out heading section!

Creating the Second Section of Text

Now we can create a new section for the second block of static content that will appear under the main heading as the user scrolls down the page.

Add New Section

To do this, first, create a new regular section below the previous section.

zoom-out header divi scroll effect

Add One-Column Row

Then add a one-column row to the section.

zoom-out header divi scroll effect

Duplicate Text Module

Duplicate the text module with the heading of the first section above and paste it into the new section column. Then update the text module content with the following text:

<h2>Begins Today...</h2>

zoom-out header divi scroll effect

Update Text Settings

Then make a few design adjustments to the text as follows:

  • Heading 2 Text Color: #333333
  • Heading 2 Text Size: 5vw

zoom-out header divi scroll effect

Update Row Settings

Once the text is finished, open the row settings and update the width as follows:

  • Width: 100%
  • Max Width: 100%

zoom-out header divi scroll effect

Section Settings

Then open the section settings and add some padding to even out the spacing a bit.

  • Padding: 10vw bottom

zoom-out header divi scroll effect

That’s it. Now we can check out the result so far on the live page.

zoom-out header divi scroll effect

Creating Additional Heading Sections

To create additional heading sections, duplicate the first two sections and move them below. This can easily be done using the layers feature or wireframe view.

zoom-out header divi scroll effect

Then update the row background image.

zoom-out header divi scroll effect

Change the heading text inside the two text modules.

zoom-out header divi scroll effect

And that’s it. Now you can start to see a complete layout starting to form with the zoom out heading effect.

Final Result

Final Thoughts

The zoom-out header scroll effect is pretty simple (and quick) to create. But the design can be a bit tricky to get right on all browser sizes. The download provided should help you explore a working model that you can tweak for your website. Hopefully, you find it helpful and inspirational.

I look forward to hearing from you in the comments.

Cheers!

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

New Starter Site for Estheticians (Quick Install)

New Starter Site for Estheticians (Quick Install)

Posted on November 12, 2024 in Divi Resources

Divi empowers you to build the best websites possible, and now, Divi Quick Sites takes website creation to a whole new level. This revolutionary tool lets anyone, regardless of skill level, generate a complete website in under two minutes! Divi Quick Sites provides everything you need to launch...

View Full Post
Divi 5 Update: Public Alpha Version 3

Divi 5 Update: Public Alpha Version 3

Posted on November 11, 2024 in Divi Resources

The Divi 5 Public Alpha is available for testing. As we progress towards the final release, we’ll update Divi 5 every two weeks, appearing as a standard update in your WordPress dashboard. If you use Divi 5, you’ll notice an update notification for Public Alpha Version 3 today. Thanks...

View Full Post

4 Comments

  1. Hey
    this is wonderful article thank you so much for sharing with us.

    • Glad you liked it!

  2. Its looks very advanced to me! But thank you for explaining DIVI!

    Would be nice to have more tutorials for the custom menu please!

  3. Nice article. Thanks!

    Would love to know how to reproduce exactly the Sign Up effect – growing / shrinking – at the bottom of this page (just below).
    Growing area on scroll (with menu disappearing) + scroll more and shrinking effect.
    Is there already a full tutorial for this somewhere? Can you make one?
    That would be really helpful.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today