Zoom module effect - kary4/divituts GitHub Wiki

Here is a small tutorial that explains how to get similar effect like you can see on https://www.elegantthemes.com/ homepage. You can see the CTA module that zooms when you scroll the page down.

Here are the steps:

1. To catch only certain module that we want to apply the effect to let's firstly add an additional css class to the Row that contains our CTA module (actually it can be any module you need). In my case I added cta-zoom class. If you don't quite understand how you can add some more CSS classes please refer to this tutorial: https://github.com/kary4/divituts/wiki/How-to-add-additional-CSS-classes-to-divi-modules So, any modules that will be added to the Row will have the same zoom effect.

2. Now you need to reduce the default width of your Row so it can be increased later. Fortunately you can define it under default Divi Advanced Design tab. Can you please check the attachment below to see what I exactly mean:

3. Next add the following script to the [b]wp-admin>divi>theme options>Integration>Add code to the < head > of your blog [/b]option:

<script>

jQuery( document ).ready(function() {

jQuery(window).scroll(function(){

if (jQuery(this).scrollTop() > 1544) {

jQuery('.cta-zoom').addClass('active');

} else {

jQuery('.cta-zoom').removeClass('active');

}

});

}); 

</script>

In the code above there are two important value you should change in your case:

• The custom css class you applied in the previous step. In my case it's cta-zoom. You can use your own css name. Please notice that it's not mistake the dot that is added before the cta-zoom class in the code above. It's important.

• The scroll Top value. In my case it's set to 1544. But in your case you might need to use bigger value depending on how big your page is and when exactly you want to effect to be triggered. Just play with the value. If you run the following code under your Dev Consolve you'll get the position of the element you need:

jQuery(window).scrollTop();

But before running the code don't forget to scroll to the element that you want to get the position.

4. Next add the following code to the Custom CSS field under wp admin>theme options>general settings:

#page-container .cta-zoom.active {
    max-width: 100% !important;
width: 100%;
    transition: all 0.7s 0s;
}
#page-container .cta-zoom{
     transition: all 0.7s 0s;
}

That's it.

Here is a screen cast if you need more details: http://youtu.be/0I_pm1jriV8?hd=1

Feel free to open a ticket under Elegantthemes forum if you have any questions.