Scroll Parallax Slider with Video Block

Video Block

Description: Sliders and blocks needn't be static. This block example use video to make the visit a moving experience. You can create more interesting, immersive and remarkable blocks.

Tags: Boxed, Block, Premium, Video, Layer Slider Examples, Split Text Animation

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.