Create Better Divi Headers

Apple iMac Scrolling Effect for Divi Image Module

by | Sep 9, 2016 | 50 comments

A few days ago I came across a help request in one of the Divi users Facebook groups posted by a group member who wanted to implement this cool scrolling effect (the author has removed the original demo) on his Divi website. This is a really nice iMac scrolling effect and I thought it was worth trying to implement it for Divi.

At first it looked difficult(as usually ;) ) but actually it took me much less time to accomplish than I was expecting. Below you can check out the demo by clicking the demo button and then try to implement it yourself by following simple instructions of this post.

First of all we need to add two image modules into a single column row at the top of the page:
Do not set images for these image modules but only set animation as “No Animation” and add the ID and CSS classes in the Custom CSS tab of module settings as follows:
That’s all for image modules, now we need to add the following CSS snippet into the Custom CSS field by going to Divi -> Theme Options – > General -> Custom CSS or add it into the style.css file of the child theme:
/*** Start ***/
.mac {
    height: 613px;
    width: 764px;
    margin: 1240px auto 100px !important;
    background: white url("https://raw.githubusercontent.com/balajmarius/Apple-iMac-Parallax/master/assets/images/bg.jpg") no-repeat 0 0;
    -webkit-background-size: 764px 613px;
            background-size: 764px 613px;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}
.mac.intro {
    position: fixed;
    width: 2548px;
    z-index:9999;
    height: 2052px;
    -webkit-background-size: 100% auto;
            background-size: 100% auto;
    margin: -300px 0 0 -1274px !important;
    top: 0;
    left: 50%;
    -webkit-transform-origin: 50%;
        -ms-transform-origin: 50%;
            transform-origin: 50%;
}
/*** End ***/
And then add this jQuery script into the Add code to the < body > field by going to Divi -> Theme Options – > Integration -> Add code to the < body >(don’t forget to enable body code first):
<script type="text/javascript">
(function($) {
    
    var el = $('.intro');
    var mac = $('#mac');
    var offset = mac.offset();
    var windowHeight = $(window).height();
    
    $(window).on('scroll', function() {

        var windowTop = $(window).scrollTop();
        var scrollPercent = (offset.top - windowTop) / offset.top;
        var scale = 'scale(' + scrollPercent + ')';

        el.css('transform', scale);

        if (windowTop >= 940) {
            el.hide();
        } else {
            el.show();
        }
    });
    
})(jQuery);
</script>
That’s all, enjoy this cool effect on your site!

Hope you’ll find this tutorial useful. Feel free to share your thoughts and suggestions below and don’t forget to share this post with your friends!

Subscribe To Our Newsletter

Join our mailing list to download Divi freebies and get notified of our discounts, latest news and updates.

You have Successfully Subscribed! Please confirm your email address.

Divi MadMenu Coming Soon!

Join our mailing list to get notified when the Divi MadMenu module is released! Check out the sneak peek...

You have Successfully Subscribed! Please confirm your email address.

Get FREE Divi Layouts

Download 20+ Divi templates for FREE!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Cyber Monday Is Coming!

Subscribe to get notified when the SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!