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

Note: To copy any code presented in these tutorials, hover over the code and select the Toggle RAW Code iconΒ raw code icon

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!

NOTE: This is CSS and can go in Dashboard > Appearance > Customize > Additional CSS or in Simple CSS if you are using that plugin.

/* remove transition for objects with the class 'parallax' */
.parallax {
    transition: none !important;
}

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

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

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');
}

39 thoughts on “Elementor – Parallax Section Background Image”

  1. Andras Ferencz

    Lyle, I love this parallax code. Thank you for sharing!

    I found an interesting issue and I’m hoping you can help me resolve it.

    I’ve built a simple portfolio site at ranoutof.ink and my home page has a parallax section in it. It works fine on my 13-inch MacBook Pro. But when I use the developer’s responsive design check tool in Safari and Chrome, an extra space is added at the top (and sometimes bottom) part of the parallax background image.

    [This section is either blank or contains the repetition of the image – depending on whether it’s set to repeat or no-repeat.]

    This happens only in certain resolutions, even though I think I use use a large enough image (1372 Γ— 2020).

    Do you have any idea what might be causing this?

    Thank you in advance!

    1. Sniffle Valve

      Hi Andras,

      Good to hear that you like it πŸ™‚
      I use Screenfly to check various devices and your site looks and fine using it.
      http://quirktools.com/screenfly/
      It looks OK too in responsive design in Chrome dev tools on Win 10, so perhaps a Mac OS thing?
      Cheers!
      Lyle

  2. Hi there! Thanks for posting this! It’s working on my page, but the parallax feels minimum, like it scrolls an inch then stops the motion effect as you continue to scroll.
    Any idea what could be effecting this?

  3. Literally within a minute I found a piece of cut off code in mine on accident, doh! Thank you for your service sir!

    1. Hi Julius,
      I tried adjusting the .3 value that is shown in the code. A lower value, e.g. .1 slows it down and a larger one, .8 speeds it up. However, this also changes the vertical position of the content, so you may need to adjust that within Elementor or custom CSS.
      Cheers!
      Lyle

  4. Good night, i’m trying to use the code following the video but it gave me the next error:

    Don’t Panic
    The code snippet you are trying to save produced a fatal error on line 1:

    DISEVAL – Use of eval is forbidden
    The previous version of the snippet is unchanged, and the rest of this site should be functioning normally as before.

    Please use the back button in your browser to return to the previous page and try to fix the code error. If you prefer, you can close this page and discard the changes you just made. No changes will be made to this site.

    1. Hi Elio,
      Sounds as thought the code was not copied correctly. Try it again and review it against the what is on the site to make sure it’s the same with no extra spaces, etc.
      Cheers!
      Lyle

      1. I’m having the same issue. I’ve copied everything correctly, I’ve checked it about 10 times. Any ideas as to what could be wrong?

        1. Hi Camille,
          Could be a couple of things:
          1. did you add parallax as the CSS class name to that section?
          2. do you have enough content UNDER that section so that you are able to see the effect when you scroll? You will not see the effect without sufficient content below the section that has this enabled.
          Cheers!
          Lyle

  5. Hi Lyle-
    Thanks for sharing; the code works like a charm! Almost on all browsers.. πŸ™
    Safari and Chrome checked out, but on Firefox 62.0.2 (64bit) I’ve noticed a weird lag on my background image as I scroll down. It looks as if the parallax is “lagging behind” the scroll for about a second. Any idea how to fix it?
    I’ve already changed the code snippet value from 0.3 to 0.8 for faster response. Seems like it has no effect on FF…
    Please help…. :/

    -mike

    1. Hi Mike,
      You’re welcome and good to hear that it works on ‘almost’ all browsers πŸ™‚
      Did you add the CSS that is shown at the top of the page in the Update section? This cured the problem that it sounds like you are having.
      Cheers!
      Lyle

      1. I did now. Sloppy me…
        You were so right. It worked!
        Can’t thank you enough, Lyle!
        Does ‘buy Sniffle Valve coffee’ really do what it say it does? Bcs I’d love to show my appreciation somehow…

        1. Right on, Mike!
          And you bet it buys me coffee … there’s a 24 hour Tim Horton’s across the street from my place! πŸ™‚

      2. Hey there,
        I seem to be having the same problem. Where do I insert the code that you have mentioned to get rid of the problem? I don’t get what you mean by the ‘update’ section

        1. Hi Vinayek,
          The Update section it at the top of the page where is says “UPDATE: Wednesday 12 July 2017” :
          As that section mentions, it is a CSS snippet so you can put it in Dashboard > Appearance > Customize > Additional CSS.
          Cheers!
          Lyle

  6. Hi Lyle,
    Thanks for sharing the code and tutorial about BG parallax effects, very very cool and useful , but I have a delicate question to ask you and you understand,
    if it is better to use the child theme or the code snippet ?, I do not trust to insert code on a plugin that goes to write on the php templates of the main theme.

    I use the child theme and how can I implement the code on the child theme? or can I use both? both the child and the code snippet?

    I await your answer thank you very much

    Gian

    1. Sniffle Valve

      Hi Gian,
      There is no issue with using Code Snippets for this as the plugin stores the snippets in the database and does not modify any files whatsoever. This is where I put all of my snippets of this sort.
      Do NOT use both; one place or the other.
      Cheers!
      Lyle

    1. Sniffle Valve

      Hi Gavin,
      Where exactly are you saving when this occurs?
      If you have copied the code, lines 1 through 65 and pasted it into a new Code Snippets snippet and then selected Run Everywhere then Save and Activate it should work.
      Not sure where or how that URL is getting generated.
      Cheers!
      Lyle

  7. Hi SV

    where in the body of the main code do i add

    /* remove transtion for for objects with the class ‘parallax’ */
    .parallax {
    transition: none !important;
    }

    ?

    please can u help

    1. Sniffle Valve

      Hi Gihan,
      As you’ll note in the text above the code, it is a CSS snippet so it can go in Dashboard > Appearance > Customize > Additional CSS.
      Cheers!
      Lyle

  8. Hey, this has been really helpful. Thank you so much. But also, are there any more codes that we might use to add a little animation or if you know any website that provides such kind of animation codes. Like for example, background image floating in from a side or something like this.

    1. Hi Arpit,
      You’re welcome πŸ™‚
      I’m not aware of any plugin or site that would provide for that sort of animation. If I come across any, I’ll post back here.
      Cheers!
      Lyle

    1. Hi Arpit,
      As that is CSS code, you can put it in Appearance > Customize > Additional CSS.
      Cheers!
      Lyle

  9. This is great. I’m just not able to get it to work on mobile for some reason. It works beautifully on desktop (and it appears to work when viewing mobile version in Elementor) but the effect isn’t happening in mobile safari and mobile chrome. Any ideas why?

    1. Hi Dave,
      This is the default behavior for parallax on mobile. Not sure why, just is. There are some third party plugins which fix this but at the moment, I can’t recall what they are. A Google search for WordPress Elementor parallax mobile turns up a lot of suggestions.
      Cheers!
      Lyle

  10. I have that dreaded jump in my parallax effect after installing the code. (Which was super cool and easy, thanks to your video!) I tried to install the snippet with the fix, but I don’t know where to put it. It gave me an error with the “.” in line 2. How and where do I install the fix? Thanks in advance for helping a newbie!

    1. Hi Amy,
      I apologize for not making it more obvious that the “jump” code type is CSS and does not go where the other code goes. I will update the site to this effect.
      That CSS can go in Dashboard > Appearance > Customize > Additional CSS.
      Cheers!
      Lyle

    1. Hi Danial,
      That is done in Elementor. Edit Section > Background > Background type: Image > Attachment: Fixed.
      Cheers!
      Lyle

  11. //Elementor v2.3.4
    //Elementor Pro v2.2.3

    Don’t Panic
    The code snippet you are trying to save produced a fatal error on line 60:

    Cannot redeclare jquery_parallax() (previously declared in /home/noq69k6efytv/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(355) : eval()’d code:49)
    The previous version of the snippet is unchanged, and the rest of this site should be functioning normally as before.

    Please use the back button in your browser to return to the previous page and try to fix the code error. If you prefer, you can close this page and discard the changes you just made. No changes will be made to this site.

    1. This error means that you have already have a snippet with this code. Verify that you are not making a duplicate πŸ™‚
      Cheers!
      Lyle

Leave a Comment

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