How to Create Animated Clouds with Divi

by | Feb 4, 2018 | Dark Side, Divi

Demo:

I ve made this effect in my Spanish website 🙂

Nicolasdb

Requirements:

Cloud images, must be in PNG for transparency.

1. Preparing the Clouds

Once you have your clouds images ready go to the Divi Builder and create a new Section, then add an empty Row.

Go to the Row Settings and add your cloud image as a Background Image.

On the CSS Classes place clouds.

Scroll on the Advanced Tab and find the Main Element box and add the CSS:

1
2
3
position: absolute;
top: 50px;
height: 250px;

Basically what the CSS is doing is to place the Row at the top left corner.

You will need to adjust the top and the height CSS values to your necessities.

In my case I’ve already added a Background Image to the Section and placed another second empty Row with another cloud image and higher top value (200px).

2. Bring Them to Life

For creating the clouds movement effect you gonna need to add the next CSS under the Page Settings or globally under Divi -> Theme Options.

1
2
.clouds {
animation: clouds 20s linear infinite}
1
2
3
4
5
6
7
8
@keyframes clouds {
    0% {
        margin-left: -50%;
    }
    100% {
        margin-left: 100%;
    }
}

Adjust the animation duration value “20s”  and the marign-left value to your necessities.

3. Adding More Clouds

If you want to add more than 1 image cloud I assume you will want to set different duration for each one.

And just use the same css above, change the class name and the duration of the animation.

And just use the same css above and change the class name and the duration of the animation.

1
2
.clouds2 {
animation: clouds 36s linear infinite}

You Just Got Clouds 😉

4 Comments

  1. Diane

    This is awesome, thank you so much for this!!

    Reply
    • Nico Master

      Thanks Diane! Good to hear is helpful!

      Reply
  2. Dmitri

    I would like to implement something similar. Before I do, have you checked the impact this has on page load?
    Regards,
    Dmitri

    Reply
    • Nico Master

      Hey there! No this shouldtn have any loading impact, is just two smalls png pictures and a css animation 🙂

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

How to Cache and Boost WordPress Performance

Want to boost your site performance? Learn how to do it by activating caching in your site. With a simply and clean plugin and as always in a couple of minutes. Let’s not forget about the small extra for fixing Google Analytics!.

How to Make any Element Fixed – Divi Builder

Want to learn how to make any Section / Row / Module fixed? So whenever you scroll the element stays in there with you! Learn how to achieve this trick in a couple of minutes with R2D2 help!.

How to Maintain a WordPress Site Clean

Hello everyone, is time to talk about how can you clean your WordPress site for a better maintenance, optimization and security purposes in just a couple of minutes once again!

Follow MasterDivi on Facebook

Be updated with the latest tricks!