Support » Plugin: Elementor Page Builder » Parallax in Elementor

  • Benjober

    (@benjober)



    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 20 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, 7 months ago by  Vertiges.

    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 1 year, 3 months 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 🙂

    terre-terre

    (@terre-terre)

    Hey it’s me again ! xD

    Is anyone experiencing a problem with paralax since the last elementor update ?

    The calculation of the space between the top of the container and the top of the background seems to be wrong, resulting in a white space 🙁

    Investingating but didn’t figure it out yet..
    thanks

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