There’s so much happening on each slide of this slider. There’s no surprise we named it Scene Slider. Each slide is its own stage wanting to grab the attention of the visitor. The slider is a full width slider, which autoplays. Apart from the autoplay feature, you can switch slides by swiping, using the arrows or the text bullets at the bottom. The arrow has a quite special effect on mouse over. Another arrow, with a dark color pushes aside the transparent, normal arrow.
The first slide combines split text animation with a handful of layer animations. Every layer, including texts and images shows up with a nice effect. Probably the coolest looking effect is what the two small headings have. They rotate in from the opposite sides, creating a spectacular result. The second slide has no fewer animations than the first. Every layer moves to the slider with a cool animation. This slider has a special split text animation, too. Both layers have the effect, but it is more interesting on the second. The text rotates in word by word, which gives a nice touch to the slide. The third slide might have less layers, than the first two had, but they, too, have animation.
We built this slider using Smart Slider 3’s two editing modes, Canvas and Content mode. Content mode makes sure the content is enjoyable on any device. It prevents the texts from shrinking so much that they become illegible. It also makes sure that they don’t get too big on large screens. For this reason, we’ve used Content mode to add text to the slides. Since layer animations support both editing modes, the special effects work fine on the text layers. Canvas mode allows placing layers anywhere within the slide area. This makes Canvas mode the perfect choice for decoration, like creating such specially placed layers.
Core Web Vitals
PageSpeed Insights with Lighthouse analyzed this page on April 12, 2021. For the latest result analyze now!
Desktop
Mobile
Related Post: Use Beautiful Layer Animations in Smart Slider 3 Pro
Related Post: How to Create a Cool Text Animation
Related Post: Configure Slider Autoplay and Create Automatically Rotating Slider
