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:
For detailed instruction's, view Solodev's Add Text Transitions to Your Hero Sliders article.
Try out a working example on JSFiddle.
The tutorial contains the following basic HTML markup.
<section class="hero-slider">
<div class="hero-slide slider_1">
<div class="slider-overlay slider-1-overlay"></div>
<div class="container">
<div class="slide-content text-white text-white">
<h2 class="h1 text-white">Create websites beyond your imagination</h2>
<p class="hidden-xs">Evolve your web experiences and create stunning, feature-rich websites.</p>
<a class=" text-white btn slide-btn" href="https://www.solodev.com/product/create.stml">Read the Story</a>
</div>
</div>
</div>
<div class="hero-slide slider_2">
<div class="slider-overlay slider-2-overlay"></div>
<div class="container">
<div class="slide-content text-white">
<h2 class="h1 text-white">Enterprise Hosting that's out of this world</h2>
<p class="hidden-xs">Pilot your website on the only platform built for the AWS Cloud</p>
<a class="btn slide-btn text-white" href="https://www.solodev.com/product/host.stml">Start for Free</a>
</div>
</div>
</div>
<div class="hero-slide slider_3">
<div class="slider-overlay slider-3-overlay"></div>
<div class="container">
<div class="slide-content text-white">
<h2 class="h1 text-white">Target and engage a universe of customers</h2>
<p class="hidden-xs">Boldy go where no marketer has gone before with a powerful platform that integrates everything</p>
<a class="btn slide-btn text-white" href="https://www.solodev.com/product/engage.stml">Start for Free</a>
</div>
</div>
</div>
<div class="hero-slide slider_4">
<div class="slider-overlay slider-4-overlay"></div>
<div class="container">
<div class="slide-content text-white">
<h2 class="h1 text-white">Web Support from launch to orbit</h2>
<p class="hidden-xs">Solodev mission control is standing by at every stage with 24/7 U.S. based support.</p>
<a class="btn slide-btn text-white" href="https://www.solodev.com/product/support.stml">Start for Free</a>
</div>
</div>
</div>
</section>
All required CSS is contained with hero-text-transitions.css
All required CSS is contained with hero-text-transitions.js
This tutorial includes the following third party resources.
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">Z
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>