Add Text Transitions to Your Hero Sliders

Hero sliders are some of the most interesting visual elements in website design. They give brands the ability to showcase unique visual elements. While a picture might be worth a thousand words, far fewer words are still needed on copy to bring those visual elements to life in the context of an organization's website. 

Text on hero images are like butter on bread -- or the other way around depending on which one takes priority for your marketing strategy. And while the images often take center stage for hero banners, text and text effects can add a bit more to a seemingly static hero image (or sets of images). 

Here's how to add fun, distinctive text transitions to your hero sliders: 

HTML

The HTML here specifies the slider container and then four divs for each of the sliders upon initialization.

CSS

The CSS allows for a great slider experience throughout all responsive breakpoints, as well as the transition you wish to include. Note the slick-generated '.slick-active' class, which we use to start/stop the animations.

JS

The JS here calls Slick Slider on the containing div, and some custom options from their documentation.

Want to see how this functionality could look on your site before you invest the time in coding? Try it out first in the JSFiddle below! Don't forget to adjust the browser window at a variety of sizes to see exactly how the website responds in mobile format!