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 😀.

Related Articles

Styling Your Fixed Vertical Header

In our previous post you create your very own Fixed Vertical Header so congratulations on...

How To Make Any Section Clickable

In this tutorial I am going to show you an easy & simple way to...

How To Hide Your Header Till User Scrolls Down

For this short tutorial I will show you how to hide your header completely until...

How To Create A Fullscreen Scrolling Website

In this tutorial we will be recreating the flow and feel found on Shake Design...

Leave a Reply

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

Feedback
Powered by Elementor Pro

How happy are you with Key Elements?

newsletter

Subscribe to get notified and receive a special invite.