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: https://www.ianlunn.co.uk/plugins/jquery-parallax/
Dual licensed under the MIT and GPL licenses:
https://www.opensource.org/licenses/mit-license.php
https://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');
}
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!
Hi Andras,
Good to hear that you like it 🙂
I use Screenfly to check various devices and your site looks and fine using it.
https://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
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?
Literally within a minute I found a piece of cut off code in mine on accident, doh! Thank you for your service sir!
Hi Kacie,
Good to hear that you got it sorted 🙂
Cheers!
Lyle
is there a way to modify the parallax value that its moving faster/slower?
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
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.
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
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?
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
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
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
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…
Right on, Mike!
And you bet it buys me coffee … there’s a 24 hour Tim Horton’s across the street from my place! 🙂
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
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
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
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
I am having a problem. I followed the video religiously but when I try and save it gives me a 404 error as it tries to go to the following page https://www.upliftlearning.onlinepersona.co.za/wp-admin/admin.php?page=add-snippet . The initial part of the address is obviously the site I am working on but the remainder?
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
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
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
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.
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
The update code which has been provided, where exactly to change it?
Hi Arpit,
As that is CSS code, you can put it in Appearance > Customize > Additional CSS.
Cheers!
Lyle
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?
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
do you need elementor pro for this to really work
Hi Gavin,
No need for Elementor Pro. This works with the free version.
Cheers!
Lyle
Worked like a charm. Thanks so much!
You’re welcome, Lane 🙂
Good to hear!
Cheers!
Lyle
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!
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
how can change this code to get a fixed background parallax?
Hi Danial,
That is done in Elementor. Edit Section > Background > Background type: Image > Attachment: Fixed.
Cheers!
Lyle
//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.
This error means that you have already have a snippet with this code. Verify that you are not making a duplicate 🙂
Cheers!
Lyle
is there a way to adjust the starting vertical point in the image so that it’s not just showing the top of the image at first? I have an image that I want to use this for, but it’s showing just the tops of the heads starting out.
Hi Jeffrey,
In the Style tab for the Section > Background > Position you can change where the image is located, e.g. Center Center.
Cheers!
Lyle
Hi Lyle, this is awesome, thanks a lot!
The background positioning of the Elementor tab doesn’t seem to work here. I mean, it does move the image a little bit, but it seems to be (very) limited. That is: if I put Bottom Center for example, the starting point is just a few pixels below Top Center. Any clues on that?
Thanks again!
Hi Sergio,
You could try to adjust the values here in the code provided – the % value and the 0.8 value.
$(“.parallax”).parallax(“80%”, 0.8);
Cheers!
Lyle
Thanks a lot Lyle!
You’re welcome Sergio 🙂
Cheers!
Lyle
Hi, I tried changing the values, and the second parameter seems to effect the starting position of the background image (I ended up using -2), but the first parameter doesn’t seems to do anything that I can notice.
I’m getting a situation where the background image scrolls off the section before the next section scrolls over it thereby showing the background colour. Any ideas?
Many thanks
Pete
Hi Pete,
Not really sure to be honest. As I mentioned in the comment where I mentioned this, adjusting the second value will alter the vertical position. Unfortunately, the person who provided the code is unavailable so I unable to ask him for assistance.
Cheers!
Lyle
Works like a charm, thanks for posting!
Might be worthwhile to also note that if you are using GeneratePress, you can add the snippet by creating a wp_head hook element (Elements>New>Hook, hook=wp_head).
Works the same, and obviates the need for another plugin.
Cheers!
Hi Richard,
Thanks for the information! Always nice not to need another plugin.
Cheers!
Lyle
Thank you very much for your tutorial. I have an issue, when I scroll there is a white space appearing in top how to get rid of that?
Thanks in advance.
Hi Iresh,
You’re welcome 🙂
Not too sure about the white space without seeing the site.
Cheers!
Lyle
Lyle thanks for your work on this. I hope there’s an easy fix for this: I’m using Elementor Pro, and when I add the Code Snippet plugin, my Elementor pages will not load for editing – I get the ‘Preview Could Not Be Loaded’ error. Yikes!
Hi Greg,
You’re welcome 🙂
Yikes indeed! That is very strange. Do you mean this happens by just having the Code Snippets plugin active without any snippets?
Cheers!
Lyle
Hi Lyle,
First, thanks for this wonderful tutorial. I’m trying to add a video background on my site, but the parallax won’t work on it. Is there a way to do it?
Thank you again!
Hi Kelvin,
You’re welcome for the tutorial 🙂 Not to sure about the parallax not working on a video background as I have not yet tried it.
I will do some testing and report back.
Cheers!
Lyle
Hi Lyle,
I’ve watched several of your videos…. you’re efforts are much appreciated.
Wondering if you could hare your thoughts on this issue.
I entered the original code snippet a few months ago and just entered the Additional CSS code, but it’s still jumpy. Watch what i mean…
https://www.screencast.com/t/dVwhMGUqKzoh
Here is what I entered into the Additional CSS
https://prntscr.com/mvkxr8
Not sure if the original code has changed since I pasted it 5 months ago…or if it’s something else? Any thoughts?
Thx
Migz
Hi Migz,
I just tried this on a local test site that is using the latest Elementor (2.5.3) and Elementor Pro (2.4.7) and there is no jumping as in your screencast.
Your CSS is correct. The only things I can think of is a conflict with some of your other custom CSS or the theme. I am using Astra for the test site.
Cheers!
Lyle
I’ve discovered a slight bug with this. If you have an Elementor Accordion in a section above a parallax section and you toggle open one of the accordions, the parallax section below becomes messed up causing the image to repeat.
Can anyone else confirm this, any solutions?
Hi Andrew,
I just tried this and do not get that behavior. The parallax section displays normally. Could be something else interfering.
Cheers!
Lyle
Hi sniffle,
Thanks so much for the fix. I’ve followed your video like a wide-eyed puppy on pcp but there appears to be an issue. When I preview the site the parallax seems a little jumpy (not quite a smooth scroll). I’ve looked at the preview on the latest chrome and firefox and they both look a little jumpy. I’ve checked the code that I placed in the snippet and the code I placed in customiser. Have you heard of this issue? Would appreciate your help. I’ll put some money in your Tim Hortons fund.
Thanks,
Phil
Hi Phil,
You’re welcome for the fix 🙂
I recently tried this on a local test site with the latest E, E Pro, Astra, Astra Pro and I didn’t notice any “jumpy” issues; appeared very smooth.
Could be a cache thing for the CSS code or perhaps the theme?
Cheers!
Lyle
Thanks! Cleared cache. The issue only seems to occur on Firefox. Chrome etc are scrolling smoothly.
hello sir thank you so much for you tutorial help a lot …… God bless
Hi Cresar,
You’re welcome 🙂
Cheers!
Lyle
is there any fix to get this to resize on mobile?
Hi Andrew,
Unfortunately, not with this code. However the latest version of Elementor Pro and it’s motion effects has a parallax effect that works on mobile.
Cheers!
Lyle
Is is possible to disable this in small devices ?
Hi Arif,
By default, this should not work on mobile.
Cheers!
Lyle
Hi there, your video was excellent, but I am not sure if I already have too many plugins, etc. conflicting to make this not work. I have Elementor Pro, using with Hueman theme. I had a little SiteOrigin CSS plugin installed, which I deactived. I just pasted line 1-65 in a few times, with Parallax in name and hit Save & Activate. I get the 404 Error. Is there anything I am supposed to change in the code? I am using a page template from Hueman in my home page.
I should mention I have a child theme activated as well. THANKS!!!
Hi Christie,
It should work by just pasting in the code into a Code Snippet snippet and select run everywhere and save and activate.
Be sure to add parallax as the Class Name for the section you want this to apply to. Should make no difference if it is a child or parent theme.
Cheers!
Lyle
Really wish this worked for me. I’m using the latest version of Elementor, followed all the steps, copy and pasted code correctly, hit run snippet everywhere, and after hitting “save changes and activate”, i get an “Oops! That page can’t be found” on the next screen. Note, I have all these other plugins installed:
Code Snippets – 2.13.3
Elementor – 2.6.8
Elementor Pro – 2.6.2
Google Analytics for WordPress by MonsterInsights – 7.7.1
Instagram Feed – 1.12.2
Mortgage Calculators WP – 1.37
Toolbar Extras – 1.4.4
WPForms Lite – 1.5.4.2
Akismet Anti-Spam – 4.1.2
Please let me know if you can troubleshoot. Thanks.
Hi Eugene,
A couple of things:
– make sure you added parallax as the class name for the section in the advanced tab
– try resaving your permalinks
Cheers!
Lyle
Hello Sniffle – Outstanding workaround for this!
Unfortunately, it does not work for me very well.
At first, I experienced the “Jumpy” effect, but that was beautifully corrected after adding the CSS code that you provided-
-That is, UNTIL I noticed that there is still a “jump”, but ONLY when I move my mouse to the section either below or above the section with the parallax background. (This happens in both the editor, AND the actual site URL).
Check it out (The pic of the guy with the black T-shirt): https://womdentalmarketing.com
I was so close! I would be eternally grateful if you could help me out.
Thank you in advance…
Hi Michael,
Thank you for the compliment 🙂
Unfortunately, I cannot check out the link you provided because Sucuri has indicated that this site has been blacklisted. https://sitecheck.sucuri.net/results/https/womdentalmarketing.com
Additionally, it also shows that you are using Essential Addons as well as OceanWP addons, both of which are known to cause issues with Elementor and which could be the source of this behavior.
Cheers!
Lyle
Curious Lyle, does your parallax work on mobile view also sir?
#YOUROCK!
Hi Stirling,
Thanks! But unfortunately this does not work on mobile 🙁
Cheers!
Lyle
Hey Lyle!
Thank you so much for this wonderful tutorial. However, this isn’t working for me! When I copy in the code (I have retried this many times and it definitely seems to be correct) I click “save changes and activate” and it brings me to a page that says “This page doesn’t seem to exist” – any ideas? 🙂
Hi Jen,
I just tried this on a local test site and it’s working fine. Make sure that parallax has been added as a class name in the section’s advanced tab.
Cheers!
Lyle
Hi Jen,
I have same problem.
Did you fix it ?
Thank you.
Hi Jack,
As I mentioned to Jen, it worked fine for me on a local test site. Could be a plugin conflict.
Cheers!
Lyle
I can´t seem to get it to parallax for a section that contains a video. Is it not possible to parallax with video as the content of the section, in Elementor? What is the difference between the section holding an image, and holding another type of media, like a video? I go to the section, I go to additional css and I put in ¨parallax¨ (yes, I have the snippits plugin downloaded, yes I named the CSS class ¨parallax¨ and it is activated, all working properly). But it won´t parallax on my videos! Any answers for me? Thanks a lot!
Hi Vesta,
You are correct in that this does not work with video, nor does Elementor Pro’s Motion Effects. There may be another plugin that does so but I am not aware of any.
Cheers!
Lyle
Hi Lyle, how do I stop the the string of menu in a exactly point? I’m explain better: I would scrolling in vertical and in a exactly point a string of menu must stopped but the background image keep on scrolling in vertical.
I hope I explained myself 🙂
Thank you.
Hi Diego,
You might take a look at this plugin which offers vertical scroll: https://wordpress.org/plugins/premium-addons-for-elementor/
Cheers!
Lyle
To prevent the container size from changing height while scrolling on tablets and mobile, add these background properties to the CSS. For some reason Elementor says “Note: Attachment Fixed works only on desktop.”
/* remove transition for objects with the class ‘parallax’ */
.parallax {
transition: none !important;
background-repeat: no-repeat;
background-attachment: fixed;
}
Thanks for the info John 🙂
Cheers!
Lyle
Hi, thank you for all your hard work creating these great tutorials. Would you be aware of any solutions for creating the parallax effect for video backgrounds?
Thanks and best regards,
Doug
You’re welcome 🙂
Not sure how to do it with a video background.
Cheers!
Lyle
Thanks for the reply Lyle, after further research I found a plugin that is supposed to do it, both images and video, haven’t tried it yet though, and another one that states it will do it:
Advanced WordPress Backgrounds + the plug-in Jet Elements, from Crocoblock.
Be safe!
Cheers
Doug
Hi, I just implemented this and it works beautifully, thanks again for your instructions, it was the missing piece for my front page, saved me several hours (days!) of time and headaches, very much appreciated!
Cheers*
You’re welcome and good to hear!
Cheers!
Lyle
Hi. I have a problem. On the page, when I scroll down, this photo has a parallax effect, but when it reaches the top foot of the page, the effect stops. I don’t know if I expressed myself well, but I recorded a video.
https://youtu.be/Q0APd59i-Pc
Could be that there is not enough height set to the parallax image section.
Also, this code and video were from an older version of Elementor and I have not tested it with the latest.
Cheers!
Lyle
Hi, so glad I came across this of many hours trying!!!! THANK YOU!!
Working great on desktop….
Does the parallax effect not work on mobile devices?
Cheers
Ian
You’re welcome Ian 🙂
Unfortunately, this code does not work on mobile. Keep in mind that this is quite old and the latest version of Elementor may support it.
Cheers!
Lyle