5/5

Sticky Video On Scroll

Greetings All.

You may have seen this effect on some other sites and wonder if it was even possible with Elementor.

Well the answer is yes and very easy I might add. With no additional javascript needed just some crafted CSS.

Keep in mind for this particular method to work you will need Elementor Pro.

Let’s Begin

First we need to drag a single video widget onto the page in a single column section.

Next we need to go inside that section and apply this CSS and select the option to make the section sticky top in the motion effects.

I chose to have this sticky only on desktop.

@keyframes fade-in-up {
	 0% {
		 opacity: 0;
	}
	 100% {
		 transform: translateY(0);
		 opacity: 1;
	}
}

selector.elementor-sticky--effects {
    right: 25px!important;
    top: 70vh!important;
    width: 500px!important;
    transform: translateY(100%);
    animation: fade-in-up 0.75s ease forwards;
}
selector {
     transition: all 0.5s ease;
     
}

The above css adds some animation and position to the video once it is in its sticky state.

Here is the result:

Hope you found this useful 😀.

By Aires Dagraca

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Related Articles

Styling Your Fixed Vertical Header

In our previous post you create your very own Fixed Vertical Header so congratulations on accomplishing that task now its time to add some widgets to wow your visitors.…

How To Make Any Section Clickable

In this tutorial I am going to show you an easy & simple way to make any section clickable without the need of other add-ons. This tutorial is for those who would rather not use the CTA widget but would…

How To Hide Your Header Till User Scrolls Down

For this short tutorial I will show you how to hide your header completely until the user scrolls down a certain amount of px. So be before we begin let’s get the important stuff out of the way.…

Leave a Reply

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

Become a Premium Member and get full access to exclusive courses and templates.

Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
©2018 - 2020 Key Elements, All Rights Reserved
newsletter

Subscribe to get notified and receive a special invite.

Feedback
Powered by Elementor Pro

How happy are you with Key Elements?