Elementor

Elementor – Parallax Section Background Image

Get the latest from
Sniffle Valve

Sniffle Valve

Consider buying Sniffle Valve a coffee  

Book a one-on-one online training session

UPDATE: Wednesday 12 July 2017

When Elementor updated to 1.5, the code presented on this page would cause a “jumping” effect when scrolling. However, user @cgdannie on the WordPress Elementor Support Forum posted this CSS snippet that cures the problem and provides the smooth parallax effect once more. Thanks!

/* remove transtion for for objects with the class 'parallax' */
.parallax {
    transition: none !important;
}
Fix for parallax jump in Elementor 1.5 and up

This tutorial shows you how to add the parallax effect to an Elementor Section background image. As of this writing, Elementor does not offer this option so this is one way to achieve this effect.

Here is the code that you need to copy and paste into the Code Snippets “Snippet” as described in the video:

Note: Source of the code provided here is from Jeff S here:

https://wordpress.org/support/topic/parallax-in-elementor/#post-8331191

function jquery_parallax() {

   ?>
    <script language="JavaScript" type="text/javascript">
		

;(function($) {

   'use strict'

    var testMobile;
    var isMobile = {
        Android: function() {
            return navigator.userAgent.match(/Android/i);
        },
        BlackBerry: function() {
            return navigator.userAgent.match(/BlackBerry/i);
        },
        iOS: function() {
            return navigator.userAgent.match(/iPhone|iPad|iPod/i);
        },
        Opera: function() {
            return navigator.userAgent.match(/Opera Mini/i);
        },
        Windows: function() {
            return navigator.userAgent.match(/IEMobile/i);
        },
        any: function() {
            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
        }
    };

	var parallax = function() {
		testMobile = isMobile.any();
		if (testMobile == null) {
			$(".parallax").parallax("50%", 0.3);
		}
	};

	// Dom Ready
	$(function() {
		parallax();
   	});
})(jQuery);

/*
jQuery Parallax 1.1.3
Author: Ian Lunn
Plugin URL: http://www.ianlunn.co.uk/plugins/jquery-parallax/

Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
*/
!function(n){var t=n(window),e=t.height();t.resize(function(){e=t.height()}),n.fn.parallax=function(o,r,i){function u(){var i=t.scrollTop();l.each(function(t,u){var l=n(u),f=l.offset().top,s=a(l);i>f+s||f>i+e||l.css("backgroundPosition",o+" "+Math.round((l.data("firstTop")-i)*r)+"px")})}var a,l=n(this);l.each(function(t,e){$element=n(e),$element.data("firstTop",$element.offset().top)}),a=i?function(n){return n.outerHeight(!0)}:function(n){return n.height()},(arguments.length<1||null===o)&&(o="50%"),(arguments.length<2||null===r)&&(r=.1),(arguments.length<3||null===i)&&(i=!0),t.bind("scroll",u).resize(u),u()}}(jQuery);

    </script>
    <?php
  
}

if (!(is_admin())) {
wp_enqueue_script('jquery');
add_action('wp_head', 'jquery_parallax');
}
Add parallax effect to Elementor Section background image

Don’t forget to add the parallax Class name in the Section’s Advanced tab.

Leave a Comment

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