It isn’t very hard to create a slider like this video block, yet as you see, it really gives a boost to your website’s look with the video in the background and the moving layers on it. Let’s go through its creation step-by-step.
Create a slider
The first thing you will have to do is to click on “create slider”, where you should give a name, a size, which about seems right (you can easily change it later, so don’t think too much about it), and pick the block slider type.
The block type isn’t really a slider type, but it’s rather the option, which will help you create not sliders, but blocks. So our Smart Slider 3 doesn’t really give you an option to only create sliders, but you can actually create the content of your website with it too. You can read more about this in here.
Parallax effect
That scrolling effect you see on the layers is the parallax effect. This by default reacts to the cursor of your mouse, so you should change that at it’s settings to vertical scrolling. After that every layer with parallax depth will go lower or higher based on the scrolling of your website.
Slide
Create an empty slide, and go the background tab to see it’s settings. Make sure that the expert mode is turned on to see the video options, and choose the video you want to have in the background. You should also choose a background image, because mobile phones aren’t allowing videos to automatically play, so this image would be the fallback for them.
Put down your layers, and give the same parallax depth to them in the layer tab.
Layer animation
As the last step, the button has a layer animation on it, when you move your cursor over it. You can do that by going to the button’s animations tab, and choose incoming layer animation for it.
When you are choosing the animation, scroll to the bottom, to see the layer global animation properties, where you will find the “event” row. In there you can pick our pre-defined options, like the LayerMouseEnter, which would make the trigger start, when the mouse cursor enters the layer. You should also turn on the repeatable option.
Core Web Vitals
PageSpeed Insights with Lighthouse analyzed this page on April 12, 2021. For the latest result analyze now!
Desktop
Mobile
Related Post: Why do You Need a Video Slider on Your Website?
Related Post: Create a Unique Layer Slider with Smart Slider 3
Related Post: How to Create a Cool Text Animation
