En el tutorial de hoy vamos a crear un banner de animación personalizada con jQuery. La idea es contar con elementos diferentes en un cartel que animará paso a paso de una manera personalizada. Nosotros vamos a usar el plugin de jQuery y jQuery Facilitar el 2D Plugin de transformación para crear algunas animaciones ingenioso.
Las imágenes utilizadas para la demo (teléfonos móviles y Tablet PC) son por el talentoso Alex Gillis y usted puede encontrar sus maravillosas obras en Deviantart. La imagen Dell Vostro es por Steven Housden y usted puede encontrar a su alta calidad de las obras en su página de Deviantart.
Por lo tanto, vamos a empezar!
El margen de beneficio
El código HTML de la bandera será un div principal y un div de diapositivas. El div de diapositivas sólo es necesario si quieres algo bonito efecto frontera en torno a la bandera. Ahora vamos a añadir algunas zonas de la bandera. Estas zonas contienen las imágenes que se animan y salen de la bandera en función del paso actual. La primera zona se contienen todos los productos. La segunda zona que va a utilizar para el remate la publicidad y la tercera zona contará con dos títulos diferentes:
Las imágenes utilizadas para la demo (teléfonos móviles y Tablet PC) son por el talentoso Alex Gillis y usted puede encontrar sus maravillosas obras en Deviantart. La imagen Dell Vostro es por Steven Housden y usted puede encontrar a su alta calidad de las obras en su página de Deviantart.
Por lo tanto, vamos a empezar!
El margen de beneficio
El código HTML de la bandera será un div principal y un div de diapositivas. El div de diapositivas sólo es necesario si quieres algo bonito efecto frontera en torno a la bandera. Ahora vamos a añadir algunas zonas de la bandera. Estas zonas contienen las imágenes que se animan y salen de la bandera en función del paso actual. La primera zona se contienen todos los productos. La segunda zona que va a utilizar para el remate la publicidad y la tercera zona contará con dos títulos diferentes:
<div id="ca_banner1" class="ca_banner ca_banner1"> |
02 | <div class="ca_slide ca_bg1"> |
03 | <div class="ca_zone ca_zone1"><!--Product--> |
04 | <div class="ca_wrap ca_wrap1"> |
05 | <img src="images/product1.png" class="ca_shown" alt=""/> |
06 | <img src="images/product2.png" alt="" style="display:none;"/> |
07 | <img src="images/product3.png" alt="" style="display:none;"/> |
08 | <img src="images/product4.png" alt="" style="display:none;"/> |
09 | <img src="images/product5.png" alt="" style="display:none;"/> |
10 | </div> |
11 | </div> |
12 | <div class="ca_zone ca_zone2"><!--Line--> |
13 | <div class="ca_wrap ca_wrap2"> |
14 | <img src="images/line1.png" class="ca_shown" alt=""/> |
15 | <img src="images/line2.png" alt="" style="display:none;"/> |
16 | </div> |
17 | </div> |
18 | <div class="ca_zone ca_zone3"><!--Title--> |
19 | <div class="ca_wrap ca_wrap3"> |
20 | <img src="images/title1.png" class="ca_shown" alt="" /> |
21 | <img src="images/title2.png" alt="" style="display:none;"/> |
22 | <img src="images/title3.png" alt="" style="display:none;"/> |
23 | </div> |
24 | </div> |
25 | </div> |
26 | </div> |
Mira el manual completo:
Via: Tympanus
Visto en: Blog Informatico
0 comentarios:
Publicar un comentario