Apple iMac Scrolling Effect for Divi Image Module

by | Sep 9, 2016 | 19 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 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 !important;
 width: 764px !important;
 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 !important;
 background-size: 764px 613px !important;
 backface-visibility: hidden !important;
}
.mac.intro {
 position: fixed !important;
 width: 2548px !important;
 z-index:9999 !important;
 height: 2052px !important;
 -webkit-background-size: 100% auto !important;
 background-size: 100% auto !important;
 margin: 0 !important;
 top: 0 !important;
 left: 50% !important;
 margin-top: -300px !important;
 margin-left: -1274px !important;
 -webkit-transform-origin: 50% !important;
 -ms-transform-origin: 50% !important;
 transform-origin: 50% !important;
}
/***************** 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();
 $("div.intro").addClass( "proverka-3");
 $(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! ?

Pin It on Pinterest

Shares
Share This