Acorn Studio
Acorn Studio
We build brands and digital experiences for your business!
Who we are?
Who we are

We are a digital creative agency with offices in San Francisco, Hong Kong and Zürich. We build products that achieve better performance for your business or brand.

What we do?
Web Development
App Development
Multimedia Production
Strategy & Branding

Ken Burns

💻 Settings | 🎓 Layers | 🎉 Animations | 🏗️ Layout | 📱 Responsive | Speed

Description: Ken Burns slider using the popular panning and zooming effect on the background images, the layers have a nice hover effect, and the slides are switching automatically.

Premium: Gain access to all slider templates with a single purchase.

Minimum version: 3.5.0.0

Tags:

Settings

The Ken Burns slider is a full width slider, and fills the horizontal width of your screen. When you check the slider you can notice the slider autoplay. The slider switch their slides every 8 seconds. You can also notice the autoplay indicator on the bottom which shows when the next slide will come. It can be a great option to call the visitors attention. However, the visitors can stop the autoplay if they hover over the slider, so they can read the content if they want.

Autoplay indicator

Layers

Each slide uses the same layers: heading, image and button, and they are in a row which is the same in each slide. This row is special because if you hover over it the background color changes. How to create a hover effect for your layers? All you need is to select the layer which you would like to add a hover effect to – in this example the Row has a hover effect. After that you should go to the Layer window, and set a hover background color to your layer.

How to set hover color

Animations

The Ken Burns effect is a popular effect in web design. This effect with the slider autoplay makes the slider vivid, as you can see in this slider template. You can use this effect on any websites, it achieves a professional looking animation for the images which it is used on.

Ken Burns effect

The Ken burns slider is a good example where you can check how the actions work. You can try it if you click on the button on the first slide. You will see that the slide will switch to the next one. To achieve this, you can use link actions.

Layout

There are 3 slides in the slider, and the layers are in a row, where there is a button on the bottom part. This button has -30px bottom margin, and with using this negative margin you can put the button over your row which makes a great layout.

If you check the slider example, you will see that you can navigate in the slider in 3 ways. Firstly, you can drag to the left or right, and the slider will change. Secondly, you can use the buttons with the actions. Finally, you will see the arrows in the left and the right side of the slider, which are special, because if you hover on them, you will see the slide title of the next or previous slides.

Arrow type

Responsive

The slider is fully responsive, and looks good on any devices. If you check the mobile view you can notice the arrows are hidden. With that the content has more space, and the visitor can read it. The autoplay indicator is still visible, with that you can call the visitors attention there are more slides on the slider.

Core Web Vitals

PageSpeed Insights with Lighthouse analyzed this page on April 12, 2021. For the latest result analyze now!

98

Desktop

First Contentful Paint
0.8 s
Speed Index
0.8 s
Largest Contentful Paint
0.9 s
Time to Interactive
0.8 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0.033
92

Mobile

First Contentful Paint
1.1 s
Speed Index
1.7 s
Largest Contentful Paint
3.3 s
Time to Interactive
2.7 s
Total Blocking Time
90 ms
Cumulative Layout Shift
0

Related Post: Use the Popular Ken Burns Effect on your Slider

Related Post: Create a Unique Layer Slider with Smart Slider 3

Related Post: Use Beautiful Layer Animations in Smart Slider 3 Pro


Similar Sliders -

Conference GroupMuseum website landing pageFull Page HotelTop 5 Products