"Text Zooming Effect"
Bootstrap 3.3.0 Snippet by selvasekhar

1
2
3
4
5
6
7
8
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="banner_animate">
<h1>Text Zooming Effect</h1>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.banner_animate h1 {
font-size: 88px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #ffd964;
margin: 0;
padding: 90px 0 25px 0;
transform-origin: 50% 100%;
text-shadow: 2px 2px 2px #333;
animation-duration: 3s;
animation-name: fade;
animation-timing-function: cubic-bezier(.71,.55,.62,1.57);
}
.banner_animate a {
font-family: Cambria, Cochin, serif;
font-size: 16px;
color: #333;
padding: 5px;
border-radius: 5px;
background-color: #A6D2FF;
transition: background-color .2s ease-out;
}
.banner_animate a:hover {
background-color: #EEE;
}
@keyframes fade {
from {
opacity: 0;
transform: scale(.9, .9);
}
to {
opacity: 1;
transform: scale(1, 1);
}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: