Support » Plugin: Elementor Page Builder » Parallax in Elementor

  • Hello! Very surprised that no parallax. How to add a parallax effect in sections and column? Tried plugin yellow pencil, but for some reason it does not work. Maybe there is a plugin that is friendly with elementor or ..?

Viewing 15 replies - 1 through 15 (of 21 total)
  • Plugin Support Boaz

    (@boazpojo)

    Hi @benjober,
    No additional plugin is needed.
    Just create a section, under Style set a background image for it and under Attachment choose Fixed.

    Yes, I know there is the fixed, but I want that kind of parallax. Here is an example:
    http://demos.artbees.net/jupiter5/new-parallax-effect/

    Plugin Support Boaz

    (@boazpojo)

    Hi @benjober,
    We don’t have a built-in effect exactly like this.
    Probably there is a plugin that can be added to Elementor.

    Jeff S

    (@12steprecovery)

    Hi @benjober

    I investigated how the Sydney theme https://en-gb.wordpress.org/themes/sydney/ got its parallax effect (see http://demo.athemes.com/sydney/) to see if it could be added to another theme using Elementor.

    I discovered that Sydney is using jQuery-Parallax https://github.com/IanLunn/jQuery-Parallax.

    So I borrowed some code from Sydney and added it to the functions.php of my child theme as follows:

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

    By adding the css selector ‘parallax’ in the Advanced tab after following @boaz instructions

    Just create a section, under Style set a background image for it and under Attachment choose Fixed.

    you’ll have the parallax effect you are looking for.

    Thanks

    Hi @12steprecovery, thanks for sharing how you added parallux. Sorry to say but I’m rather new at this so I’m wondering if you could explain it a bit more. For instance I downloaded the code at the github link but I’m not exactly sure what to do with it. I’m thinking I need to upload the 3 javascript files somewhere on my wordpress site but I’m not sure how. I hope you could enlighten me.

    Ron

    You are my hero, @12steprecovery! You’ve just saved me minutes of not hours of trial and error. Can I send you some money?! Seriously 🙂 Thanks mate.

    Hi, thanks for sharing @12steprecovery. Unfortunately, it doesn’t work with tablets and phones (but works great with desktop). I get white spaces above and/or under the background.

    Regards

    • This reply was modified 1 year, 2 months ago by  Vertiges.

    To all those wondering how to implement Jeff S’s code:

    – install and activate the Code Snippets plugin
    – create a new Snippet, paste in the code and Save and Activate with Run Snippet everywhere selected (will then display in the Elementor editor)
    – add the parallax class name in the the Sections’ Advanced tab
    – to get rid of the white spaces, do NOT add padding to the Section; instead, use a Spacer widget above (and or below) the Content in the Section

    And yes, this does NOT work on mobile; very few if any parallax implementations will.

    To see how this all works, perhaps check out a tutorial I put together on this subject:

    Cheers!
    Lyle

    Thanks Lyle, I’ll check for sure 😉

    Hi there,
    I used this method for two of my sites, worked great.

    But since elementor 1.5 the parallax don’t work as it should with the code of this thread, the background doesn’t “follow” smoothly as it should..

    Anyone experiencing the same issue ? Maybe elementor made changes on its structure idk..

    Thanks !

    Yeah, @elemntor have added a slight transition to background. I’ll post the CSS to resolve that asap. Cheers!

    The simplest solution would be to deactivate the transition for the elements that contain the class parallax. Simply add the following code to your theme’s stylesheet (style.css):

    .parallax {
        transition: none !important;
    }

    But keep in mind that this will also disable the new transitions for border, border-radius and box-shadow for these elements.

    • This reply was modified 10 months, 2 weeks ago by  cgdannie.

    @cgdannie

    BRILLIANT!!! 🙂 That works PERFECTLY!

    @terre-terre – add the CSS posted by @cgdannie and it will work fine!

    Cheers!
    Lyle

    Thanks it works 🙂

Viewing 15 replies - 1 through 15 (of 21 total)
  • You must be logged in to reply to this topic.