Elementor Scrolling Effect

Posted on |



Elementor Pro v2.5 unleashes a brand new Motion Effects feature. It’s a mighty set of tools that allows you to create magnificent scrolling and mouse animations, including sophisticated parallax effects. Bringing life to your WordPress website has never been easier. Scrolling Effects: Parallax, Blur & More. This tutorial is all about Elementor parallax - the simplest way to do it. After watching this tutorial you will know how to use Parallax Scroll Effect with. As you start scrolling down, you’ll notice that there’s already a parallax effect. This is because the background image for the hero section is set to fixed. Even in the free version of Elementor, you should be able to tweak some basic settings like this to mimic a parallax effect.

Description

Sticky Header Effects for Elementor adds useful options that are missing from the “sticky” header feature introduced in Elementor Pro 2.0. Giving users the option to change the background color and height when the visitor starts scrolling down the page. This allows for a “transparent” menu effect that can become any color, semi-transparent or solid, once the visitor begins to scroll.

This plugin is cross-browser compatible and fully responsive. Meaning it will work on all browsers as well as tablets and mobile devices.

This plugin is meant to be an add-on to Elementor Pro page builder as it’s not a standalone plugin.

Features

  • Options panel built-in to Elementor Pro’s advanced section options. – Settings are right where they should be without cluttering up your workspace.
  • Apply options on scrolling – The scrolling distance for the Sticky Header Effects to be applied is responsively adjustable for the best results in any situation.
  • Transparent Header – Uses position to move header section down on top of the page. No need for problem causing negative margins.
  • Header Background Color – Options for header after scrolling with full HEX, RGBA, and Color Name support.
  • Bottom Border – Allows user to change the color and thickness of the bottom border upon scrolling.
  • Shrink Header – An effect which changes section min-height to maximize space and achieve a slim style without losing functionality.
    (Remember that the “shrink” effect is limited by the height and padding of the header content. See the F.A.Q.)
  • Shrink Logo – Ability to adjust the logo height after scrolling
    *Change Logo Color – Change the logo image color before or after the user scrolls. Useful for switching header design from monocromatic to full color
    *Blur Background – Add a modern blur effect to a semi-transparent header background color after scrolling
    *Hide Header on Scroll Down – Hides the header if scrolling down, and shows header if scrolling up. Has selectable distance to start the effect

Elementor Scrolling Effect Not Working

Pro Features Coming Soon

Elementor Scrolling Effect

  • Replace logo – Change logo image entirely
  • Entrance animations – Slide-in and fade-in animations with animation duration
  • Hide elements – Hide or show header elements after scrolling
  • Box shadow – Add or remove box shadow effect upon scrolling with color, horizontal, vertical, blur, and spread controls
  • Menu toggle animations – Entrance and exit animations for the mobile hamburger menu
  • Split menu – Menus that will split to allow center logo
Scrolling

Elementor Scrolling Effects

Donate

Enjoy using Sticky Header Effects? Please consider making a donation
Every donation helps the continued development, maintenance, and support for this plugin.
Thank you very much your support!

Elementor Scrolling Effects Viewport

Installation

Minimum Requirements

  • WordPress 4.9 or greater
  • PHP version 5.4 or greater
  • MySQL version 5.0 or greater

Installation Instructions

Elementor Scrolling Effect Free

  • Make sure that you have installed Elementor Pro Page Builder. This is not a stand-alone plugin and ONLY works with Elementor Pro.
  • Install the plugin through the WordPress plugins screen directly or download the plugin and upload it to the plugin folder: /wp-content/plugins/.
  • Activate the plugin through the installation screen or the “Plugins” screen in WordPress
  • You can find Sticky Header Options for Elementor under a sections “Advanced” tab, directly under “Sticky Effect”.

FAQ

Why isn’t the “shrink” effect working?

The header cannot shrink smaller than the objects inside of it!

The “shrink” effect is restricted by the size of the content in the header section. Such as logos, images, menus, widgets, and also all of the padding and margins of those elements. This also inclused the padding and margins of the sections and columns themselves.

To get the best “shrink” effect use these settings:
* Set the top and bottom padding to 0px on your sticky header section, column, and elements inside of it.
* Set a custom logo and other image height(you can leave the width blank for “auto”).
* Set the header section height to “min height” and adjust it to your desired height.

Basically what happens is that the content of the header is “too tall” to shrink down anymore.

Is this a standalone Plugin?

Elementor Scrolling Effect Sticky

No. You cannot use Sticky Header Effects for Elementor by itself. It is a plugin for Elementor Pro.

Does it work with any WordPress theme?

Yes. It will work with any WordPress theme that is using Elementor Pro as a page builder.

Will this plugin slow down my website speed?

Sticky Header Options for Elementor is light-weight and you can also use only the options you want to use on your website for faster performance.

Reviews

there are simply too many bugs and many simple things that don't work.The idea is good the execution is poor.Actually what this plugin offers should be standard in Elementor.I would have given it 5 stars, however after trying on many occasions and each time being met with bugs, I will give it 2 stars.I'll keep testing it, and when future updates bring improvement, I will update my reveiw.
Effects

  • Hi,

    When installed with elementor plugin, the scrolling effects doesn’t work well. Please check the issue in this video.

    The “About” and “Blog” has the ID from elementor page builder. The “Contact” has the ID coded in HTML.

    It works well with “Contact” but not with others.

    Can it be fixed?

  • Help me please!
    The problem is that two menu items are highlighted at once. It is necessary to highlight only one of them while scrolling through the page
    how to fix: http://prntscr.com/kmi40s
    site: http://makaroni.design-time.com.ua/
    I use: Elementor Pro, oceanwp, Page scroll to id

    Is there still no option to turn off the elementor-enabled smooth scroll?

    I don’t have elementor on all my pages and prefer to code my own smooth scrolling, so I would love to permanently turn off Elementor smooth scrolling.

    This seems to be plugin specific advice for “page scroll to id” plugin. I am not using this plugin.

    I just want a settings option inside Elementor to disable Elementors smooth scroll to id.

  • The topic ‘Scroll effects conflicts with Elementor scrolling’ is closed to new replies.