Life is short. Do stuff that matters.
With Smart Slider 3 everyone can build amazing sliders easily.
Slider

How to create scroll parallax slider block with background video

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: , , , , ,

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.

Create a new block type slider
Create a new block type slider

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.

Parallax effect settings in Smart Slider 3
Parallax effect settings in Smart Slider 3

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.

Slide background settings
Slide background settings

Put down your layers, and give the same parallax depth to them in the layer tab.

Set the parallax depth
Set the parallax depth

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.

Animations on the layer
Animations on the layer

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.

Animation settings
Animation settings

Version Overview

Pro only
  • Video background
  • Layer animation
  • Block slider type
  • Input layer
  • Parallax effect


Similar Sliders -

Input LayerBarber – BarbersBarber – AboutSlider typography – Use font manager to create astonishing typography

Related pages