Introduction
A good, eye catching tagline is essential to product website. I have seen animated tagline switchers implemented before but the one that caught my eye most recently was Procurify’s. So I decided to make a couple of my own animated tagline effects. They all loop infinitely using Javascript’s setInterval function. There are 5 effects in total: Fade, Flip Vertically, Flip Horizontally, Slide and Bounce.
Animated Tagline HTML Structure
The HTML is simple and can fit your needs. Just make the span container position relative and then make the actual tagline inside position relative and display: inline-block and this way you can animate the tagline but have it still inline with the text. This will be outlined in the css portion.
<div id="home">
<div class="background"><img src="images/full-background.jpg"></div>
<h1 class="welcome">Animated tagline switcher<br>
<span class="tagline">taglines made ridiculously
<span class="tag-change">
<a class="active purple" href="">easy</a>
<a class="blue" href="">simple</a>
<a class="green" href="">fast</a>
</span>
</span>
</h1>
</div>
CSS Animations and Styles
I have commented the different sections which pertain to each individual effect. The bounce is the most complicated because it uses keyframe animations.
#home {
height: 100%;
overflow: hidden;
position: relative;
}
#home .background {
position: absolute;
height: 100%;
width: 100%;
}
#home .background img {
position: relative;
width: 100%;
}
#home h1.welcome {
position: relative;
text-align: center;
font-size: 44px;
text-transform: uppercase;
top: 30%;
}
h1.welcome span.tagline {
position: relative;
font-size: 20px;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
line-height: normal;
color: #ddd;
}
h1.welcome span.tag-change {
position: relative;
top: 0;
display: inline-block;
text-align: left;
width: 60px;
height: 19px;
}
h1.welcome span.tag-change a {
position: absolute;
top: 0;
margin: 0;
padding: 0 5px;
color: transparent;
text-shadow: none;
transition: .5s;
-webkit-transition: .5s;
}
#home h1.welcome span.tag-change a.active { top: 0; }
/* colors */
h1.welcome span.tag-change a.active.purple { color: #a870cc; }
h1.welcome span.tag-change a.active.blue { color: #36a7f3; }
h1.welcome span.tag-change a.active.green { color: #85bf00; }
h1.welcome span.tag-change a.active.red { color: #ff6b6b; }
/* Slide Vertical */
#home h1.welcome span.tag-change a.vs-out { top: 30px; }
body.slide-vertical h1.welcome span.tag-change a { top: -20px;}
/* Flip Horizontal */
body.flip-horizontal h1.welcome span.tag-change { perspective: 1000; }
body.flip-horizontal h1.welcome span.tag-change a {
transform: rotateY(180deg);
transform-origin: 25% 0;
}
body.flip-horizontal #home h1.welcome span.tag-change a.active { transform: rotateY(0deg); }
/* Flip Vertical */
body.flip-vertical h1.welcome span.tag-change { perspective: 1000; }
body.flip-vertical h1.welcome span.tag-change a { transform: rotateX(180deg); }
body.flip-vertical #home h1.welcome span.tag-change a.active { transform: rotateX(0deg); }
/* Bounce */
body.bounce #home h1.welcome span.tag-change a.active {
top: 0;
-moz-animation-name:bounce;
-moz-animation-duration:.8s;
-moz-animation-fill-mode:backwards;
-webkit-animation-name:bounce;
-webkit-animation-duration:.8s;
-webkit-animation-fill-mode:backwards;
animation-name:bounce;
animation-duration:.8s;
animation-fill-mode:backwards;
}
@-webkit-keyframes bounce {
0% { top:-70px; -webkit-animation-timing-function:ease-in; }
37% { top:0; -webkit-animation-timing-function:ease-out; }
55% { top:-17.5px; -webkit-animation-timing-function:ease-in; }
73% { top:0; -webkit-animation-timing-function:ease-out; }
82% { top:-4.9px; -webkit-animation-timing-function:ease-in; }
91% { top:0; -webkit-animation-timing-function:ease-out; }
96% { top:-1.4px; -webkit-animation-timing-function:ease-in; }
100% { top:0; }
}
@-moz-keyframes bounce {
0% { top:-70px; -moz-animation-timing-function:ease-in; }
37% { top:0; -moz-animation-timing-function:ease-out; }
55% { top:-17.5px; -moz-animation-timing-function:ease-in; }
73% { top:0; -moz-animation-timing-function:ease-out; }
82% { top:-4.9px; -moz-animation-timing-function:ease-in; }
91% { top:0; -moz-animation-timing-function:ease-out; }
96% { top:-1.4px; -moz-animation-timing-function:ease-in; }
100% { top:0; }
}
@keyframes bounce {
0% { top:-70px; -moz-animation-timing-function:ease-in; }
37% { top:0; -moz-animation-timing-function:ease-out; }
55% { top:-17.5px; -moz-animation-timing-function:ease-in; }
73% { top:0; -moz-animation-timing-function:ease-out; }
82% { top:-4.9px; -moz-animation-timing-function:ease-in; }
91% { top:0; -moz-animation-timing-function:ease-out; }
96% { top:-1.4px; -moz-animation-timing-function:ease-in; }
100% { top:0; }
}
jQuery
This takes care of the looping that keeps the effect cycling forever. set the interval time in the 2nd field in the setInterval function (in milliseconds).
(function($){
$(function(){
var animation_speed = 500;
if ($('body').hasClass("slide-vertical")) {
var tid = setInterval(tagline_vertical_slide, 2500);
}
else {
var tid = setInterval(tagline_fade, 2500);
}
// fade style
function tagline_fade() {
var curr = $("h1.welcome span a.active");
curr.removeClass("active");
var nextTag = curr.next('a');
if (!nextTag.length) {
nextTag = $("h1.welcome span a").first();
}
nextTag.addClass("active");
}
// vertical slide
function tagline_vertical_slide() {
var curr = $("h1.welcome span a.active");
curr.removeClass("active").addClass("vs-out");
setTimeout(function(){
curr.removeClass("vs-out");
}, animation_speed);
var nextTag = curr.next('a');
if (!nextTag.length) {
nextTag = $("h1.welcome span a").first();
}
nextTag.addClass("active");
}
function abortTimer() { // to be called when you want to stop the timer
clearInterval(tid);
}
// Background adjustments
if ($(window).height() > $(window).width()) {
$("#home .background img").css({'width': 'auto', 'height': '100%'})
}
}); // end of document ready
})(jQuery); // end of jQuery name space
The post Animated Tagline Switcher appeared first on webdesigncrowd.com.