Si quieres aprender a crear banners animados con css3 y html aquí encontrarás la forma de hacerlo paso a paso. Cada vez más el flash va perdiendo paso en web y dejando paso al html5 y al css3, por medio de los cuales cada vez es posible realizar más efectos similares al flash. Hoy te traigo el proceso para hacer un banner animado con css3 y html.
En la web del autor podeis ver una demo de un banner en vertical y otro en horizontal, al igual que descargar el código fuente.
Código html
<div id="ad-1">
<div id="content">
<h2>Lost at sea?</h2>
<h3>Relax - we've got your rudder.</h3>
<form>
<input type="text" id="email" value="Email address..." />
<input type="submit" id="submit" value="Guide me" />
</form>
</div>
<div id="clouds">
<ul id="cloud-group-1">
<li class="cloud-1"></li>
<li class="cloud-2"></li>
<li class="cloud-3"></li>
</ul>
<ul id="cloud-group-2">
<li class="cloud-1"></li>
<li class="cloud-2"></li>
<li class="cloud-3"></li>
</ul>
</div>
<ul id="boat">
<li>
<div id="question-mark"></div>
</li>
</ul>
<ul id="water">
<li id="water-back"></li>
<li id="water-front"></li>
</ul>
</div>
Código CSS
#ad-1 #clouds {
position: absolute;
top: 0px;
z-index: 0;
animation: cloud-animation 30s infinite linear; /* Scrolls the clouds off to the left, resets, and repeats */
}
#ad-1 #cloud-group-1 {
width:720px;
position: absolute;
left:0px;
}
#ad-1 #cloud-group-2 {
width: 720px;
position: absolute;
left: 720px;
}
#ad-1 .cloud-1 {
width: 172px;
height: 121px;
background-image: url(../images/ad-1/cloud-1.png);
position: absolute;
top: 10px;
left: 40px;
}
#ad-1 .cloud-2 {
width: 121px;
height: 75px;
background-image: url(../images/ad-1/cloud-2.png);
position: absolute;
top: -25px;
left: 300px;
}
#ad-1 .cloud-3 {
width: 132px;
height: 105px;
background-image: url(../images/ad-1/cloud-3.png);
position: absolute;
top: -5px;
left: 530px;
Animaciones
/* An animation with a simulated delay used to fade in multiple elements. We've achieved a simulated delay by starting the fade in process 80% of the way through the animation (instead of starting the process immediately). We can use this technique and increase the animation duration on any element to reach the desired delay duration: */
@keyframes delayed-fade-animation {
0% {opacity: 0;}
80% {opacity: 0;}
100% {opacity: 1;}
}
/* An animation that will slide in our email address form. We've spiced this animation up by overshooting the desired position and sliding it back - this creates a nice elastic effect. As you can see, this animation also uses a simulated delay: */
@keyframes form-animation {
0% {opacity: 0; right: -400px;}
90% {opacity: 0; right: -400px;}
95% {opacity: 0.5; right: 20px;}
100% {opacity: 1; right: 0px;}
}
/* This is as basic as an animation gets. Only two keyframes and no simulated delay. This animation slides the boat in from the left when the ad begins: */
@keyframes boat-in-animation {
0% {left: -200px;}
100% {left: 20px;}
}
/* Here's our really cool cloud animation. The first group of clouds will start off aligned in the center with the second group off to the right of the screen. While the left group of clouds is sliding off the screen to the left, the right group will begin to appear on the right side of the screen. As soon as the left group is completely off the screen, the clouds will reset (very quickly) to their original positions and repeat: */
@keyframes cloud-animation {
0% {left: 0px;}
99.9999% {left: -720px;}
100% {left: 0px;}
}
/* These last 3 animations are all basically the same - the only difference being the position of each element. They will emulate the bobbing effect of an ocean: */
@keyframes boat-animation {
0% {bottom: 0px; left: 0px;}
25% {bottom: -2px; left: -2px;}
70% {bottom: 2px; left: -4px;}
100% {bottom: -1px; left: 0px;}
}
@keyframes water-back-animation {
0% {bottom: 10px; left: -20px;}
25% {bottom: 8px; left: -22px;}
70% {bottom: 12px; left: -24px;}
100% {bottom: 9px; left: -20px;}
}
@keyframes water-front-animation {
0% {bottom: -70px; left: -30px;}
25% {bottom: -68px; left: -32px;}
70% {bottom: -72px; left: -34px;}
100% {bottom: -69px; left: -30px;}
}
Link | Banner animado con css3
Puedes estar al día de nuestras novedades a través de redes sociales o de rss.
