EntradaUn ejemplo de creación de un banner dinámico en html. Anuncio de banner adaptable con HTML5 y CSS3
Generador de redacción del código para el banner. La elaboración de un código de banner en línea es un procedimiento sencillo y directo. ¿Por qué necesitamos un banner en el sitio?
Agregamos un banner al sitio para anunciar productos, servicios, promoción de marca, mostrar nuestros productos.
Agregamos un banner al sitio para publicitar bienes, servicios, promoción de marca, etc.
Colocando el código del banner en el sitio, queremos resaltar algo, atrayendo así la atención.
¿Cómo se pueden utilizar los banners en la práctica?
Puede haber muchas posibilidades para utilizar la publicidad de banner. Tomemos un ejemplo de la vida real. Por ejemplo, se ha registrado en un programa de afiliados. Como parte de este programa, obtiene enlaces de afiliados con los que puede promocionar su producto.
Como regla general, junto con la promoción de productos, para aumentar sus ingresos, recibe un enlace de referencia para atraer a otros socios.
Como material del programa de afiliados, se le pueden proporcionar pancartas prefabricadas. Por lo tanto, colocando código de banners en la red, por ejemplo en su sitio web, anuncia el producto y recluta a sus propios socios.
Servicio en línea para obtener un código de banner
Con la ayuda de este generador, puede crear y preparar código HTML para su botón o banner. Si no puede escribir el código usted mismo, al completar el formulario recibirá HTML listo para usar con un solo clic, que se puede insertar en las páginas del sitio. |
La publicidad es algo necesario para cualquier sitio. Solo el costo de las herramientas publicitarias es más alto que los ingresos que generan. Ahí es cuando muchos comienzan a ser inteligentes para ahorrar al menos un poco. Para tales "tramposos" te diremos cómo hacer un banner.
Que son los banners
Un banner en Internet significa una imagen publicitaria rectangular con contenido estático o dinámico (animado). El banner puede incluir tanto texto como gráficos. El banner generalmente se proporciona con un enlace que se activa después de hacer clic en él con un botón del mouse.
El crecimiento actual de la eficacia de la publicidad en banners está asociado con el uso de la orientación contextual. Al mismo tiempo, solo aquellos bienes y servicios que están "en consonancia" con el tema del recurso se anuncian en los banners del sitio:
Sería bueno saber cómo puede hacer un banner para su sitio. Pero primero, debe comprender los tipos de banners existentes. Existen los siguientes tipos:
- Banners estáticos: consisten en una imagen estática. Son imágenes en formato JPEG o PNG. Se caracterizan por su bajo peso, lo que no afecta la velocidad de carga de la página.
- Banners animados: animación creada con GIF. Consta de varias imágenes, que se reemplazan entre sí con una frecuencia determinada. El peso del banner depende de la cantidad de imágenes que se utilicen en él.
- Flash: en este banner, la animación se basa en Flash. Puede reaccionar a las acciones del usuario.
El contenido interactivo se puede presentar en forma de un juego o un cuestionario con la adición de sonido. Los dibujos para la animación se crean utilizando gráficos vectoriales.
Hay muchos tamaños de banner diferentes para un sitio web. Pero los más populares son:
- 88 por 31 píxeles;
- 120 x 60 píxeles;
- 120 x 90 píxeles;
- 120 por 240 píxeles;
- 125 por 125 píxeles;
- 120 x 600 píxeles;
- 160 por 600 píxeles;
- 180 por 150 píxeles;
- 234 x 60 píxeles;
- 240 por 400 píxeles;
- 250 x 250 píxeles;
- 300 por 600 píxeles;
- 300 por 250 píxeles;
- 336 por 280 píxeles;
- 150 por 150 píxeles;
- 468 por 60 píxeles;
- 728 por 90 píxeles.
Signos de un banner publicitario eficaz
La efectividad de un banner publicitario colocado en un sitio depende no solo de la popularidad del sitio. En mayor medida, su eficacia depende del nivel de implementación del propio anuncio. Un banner de alta calidad debe cumplir varios criterios básicos:
- Capte la atención del usuario, pero esto no significa que el banner deba ser demasiado brillante y parpadeante. Tal publicidad irritará al visitante, no a la atención. El contenido del banner debe "insinuar" discretamente al usuario sobre su presencia. Por lo tanto, a la hora de elegir una imagen y un texto para ella, siempre se debe tener en cuenta el factor psicológico;
- Despertar interés: los banners para el sitio deben despertar el interés del usuario en el objeto de la publicidad. Un producto o servicio debe presentarse no solo con gusto, sino también de manera original. Se fomenta el uso de ingenio y humor ligeros:
- El incentivo para seguir el enlace del banner se logra debido al efecto de cierto misterio y subestimación,
incrustado en el contenido del banner. - La motivación para solicitar un servicio o comprar, en primer lugar, depende del contenido del anuncio publicitario. Debe mostrar los mejores aspectos del objeto publicitario o el beneficio que el usuario puede obtener al comprarlo.
- Si el banner está destinado a aumentar el conocimiento de la marca y aumentar su imagen, entonces el contenido publicitario debe infundir un sentido de confianza en el consumidor. Pero no provoque asociaciones negativas al mismo tiempo.
Regularidades que se deben tener en cuenta antes de colocar un banner en un sitio web:
- Cuanto más grande sea el banner, mayor será la probabilidad de que un usuario haga clic en él. Se considera que el tamaño más efectivo es de 240 por 400 píxeles;
- Los anuncios de banner colocados en la parte superior (en el encabezado) tienen el mayor efecto. También se puede colocar al costado o al final de la página, pero aquí la eficiencia es algo menor;
- Los banners animados pueden atraer rápidamente la atención del usuario: el ojo humano reacciona intuitivamente al movimiento.
Creación y colocación de un banner publicitario
Antes de insertar un banner en un sitio, debe decidir la ubicación de su ubicación. En este caso, debe tener en cuenta el tamaño del banner y el espacio libre disponible en las páginas. Una vez que haya decidido la ubicación del bloque de anuncios, puede insertar el código del banner en la página html.
El código de la mayoría de los banners coincide con el patrón:
- a href = "/ enlace al sitio del anunciante": la dirección del recurso al que se dirigirá al usuario al hacer clic en el banner;
- title = "title" - el texto que se muestra en la información sobre herramientas emergente al pasar el cursor sobre el área del banner;
- target = "_blank" - establece las reglas para mostrar el sitio web del anunciante después de hacer clic en el enlace del banner ("_blank" - se abrirá en una nueva ventana);
- rel = "nofollow": evita que los motores de búsqueda procesen este enlace;
- img src = "https: //www.site/wp-content/uploads/path to image": establece la ruta a la imagen que se muestra en el banner;
- alt = "texto alternativo": el texto que se mostrará en el banner si su imagen no está cargada.
Pero no tiene que diseñar un banner usted mismo. Para hacer esto, puede utilizar generadores en línea especiales. Para generar un código de banner en dicho servicio, debe completar varios campos y hacer clic en el botón:
O puede solicitar la creación de un banner en un estudio profesional. Entonces costará más ... Aquí están los precios aproximados:
- Desarrollo de un banner GIF ordinario: desde $ 25;
- Creación de banners basados en Flash - 70-150 $;
- Cambiar el tamaño: aproximadamente el 50% de su precio original.
Pero si eres un poco inteligente, puedes crear un banner simple tú mismo. Aquí hay un milagro después de diez minutos de manipular el código html y la imagen en Coreldraw:
Código de banner:
Si agrega un par de controladores de eventos al código un poco más, obtendrá un banner con una imagen cambiante. La imagen del banner cambia cuando pasa el cursor sobre ella.
Esto es lo que sucedió:
Código de ejemplo:
Creación de banners animados y de video.
Veamos un ejemplo de cómo hacer un banner animado usando el programa Ulead GIF Animator.
En el menú "Archivo", seleccione el elemento "Asistente de animación". En la ventana que aparece, establezca el tamaño del banner futuro. En el siguiente paso, cargue las imágenes preparadas:
Luego, se establece la velocidad de cambio de las imágenes en la animación. En una ventana pequeña, esta velocidad se muestra cambiando números.
Adaptabilidad- este es uno de los criterios importantes para los sitios que se están creando actualmente. Muchos usuarios utilizan las pantallas de los teléfonos móviles para navegar por la web. Los anuncios de banner son comunes en los sitios web y los anuncios de banner tradicionales no son flexibles. Los banners Flash y GIF animados están fijos en píxeles, por lo que no son compatibles con los diseños receptivos modernos.
Necesitamos una nueva forma de hacer anuncios publicitarios.
Nosotros necesitamos banners receptivos …
Nuevo formato para anuncios de banner
La única forma de hacer que sus banners publicitarios sean tan receptivos como nuestros diseños HTML5 es hacerlo también con HTML5. Esto puede parecer una idea loca al principio, pero les aseguro que no lo es. De hecho, los anuncios basados en HTML tienen muchos beneficios.
- Los anuncios HTML son totalmente accesibles y el marcado semántico los hace compatibles con diferentes resoluciones.
- Texto, imágenes, video, Javascript y formularios se puede utilizar en un banner como cualquier página web.
- Los banners pueden utilizar scripts de servidor dinámicos. y bases de datos, si es necesario.
- Los anuncios HTML pueden ocupar muy poco espacio en disco.
- Servir un banner es esencialmente lo mismo que un alojamiento web.
- Sin nueva tecnología para desarrolladores web- es lo mismo que el desarrollo web normal.
- y por supuesto, Los anuncios HTML5 se pueden cambiar de tamaño a cualquier tamaño mediante consultas de medios CSS3- ¡esto es exactamente lo que necesitamos para los banners receptivos!
Entonces, ¿cómo podemos crear anuncios adaptables?
El único truco es hacer que el tamaño del iframe sea dinámico con consultas de medios CSS3, lo cubriré un poco más tarde ... ¡Pero básicamente, eso es todo!
Vamos a ver cómo funciona
A continuación, se muestra un ejemplo de un anuncio HTML5 que se muestra en el tamaño habitual de 125 × 125 píxeles:
Y aquí está la misma declaración de ancho flexible:
Observe cómo reacciona el segundo anuncio cuando cambia el tamaño de la ventana de su navegador ... ¡Genial! 🙂
Los diseños receptivos requieren que los elementos de la página tengan anchos variables, por lo que los banners ahora deben cumplir con este requisito.
La altura de la pancarta realmente no importa en el diseño receptivo, por lo que podemos usar la altura que queramos. Pero elegir una altura no significa que nuestro anuncio se atasque a esa altura, ¡podemos definir varias alturas para cada anuncio!
Para mantener la compatibilidad con versiones anteriores, los anuncios adaptables deben utilizar las mismas alturas de píxeles que los tamaños de banner tradicionales.
En teoría, podríamos crear banners receptivos que funcionen con cualquier ancho o alto, pero esto no es práctico de construir o probar.
Sugiero ceñirse a un ancho mínimo de 88 píxeles y tener el siguiente conjunto de alturas predeterminadas:
- 31 px "micro"
microbarra (88 x 31) - "Botón" de 60 px
botón 2 (120 x 60)
semi banner (234 x 60)
banner completo (468 x 60) - "Banner" de 90 px
botón 1 (120 x 90)
tabla de clasificación (728 x 90) - 125px "rectángulo pequeño"
botón cuadrado (125 x 125) - 250px "rectángulo mediano"
banner vertical (120 x 240 * lo suficientemente cerca)
ventana emergente cuadrada (250 x 250)
rectángulo mediano (300 x 250) - 400px "rectángulo grande"
rectángulo vertical (240 x 400) - "Rascacielos" de 600 px
rascacielos (120 x 600)
rascacielos ancho (240 x 600)
anuncio de media página (300 x 600)
Las siete alturas de píxeles que elegí anteriormente nos brindan un buen rango vertical y, con anchos variables, cubrimos los tamaños de anuncios de banner más populares que se utilizan en la actualidad. Por supuesto, al igual que con los banners tradicionales, puede crear tamaños personalizados si los necesita.
No solo eso, sino que mi anuncio de banner de demostración cuesta menos de 25 KB (imagen HTML, CSS y JPG). ¡Este es menos que el tamaño máximo de archivo para un banner pequeño!
Pruebe estos nuevos tamaños de banner con el verificador de anuncios adaptable.
Cambiar el tamaño de los marcos con consultas de medios CSS
A veces, es posible que necesite una altura de anuncio receptiva, para eso debe cambiar el tamaño del iframe mediante consultas de medios CSS. Creo que la mejor manera de hacer esto es establecer el ancho y la altura del iframe al 100% y colocarlos en un div con dimensiones específicas establecidas en CSS. Así es como se ve:
< div id = "ad" > < iframe src = "ad.html" border = "0" scrolling = "no" allowtransparency = "verdadero" ancho = "100%" altura = "100%" style = "borde: 0;" > < / iframe > < / div > |
Y aquí está el CSS:
/ * altura predeterminada * / #ad (altura: 60px;) pantalla solo de @media y (altura: 90px) (/ * 90 píxeles de alto * / #ad (altura: 90px;)) pantalla solo de @media y (altura: 125px ) (/ * 125 píxeles de alto * / #ad (alto: 125 píxeles;))
/ * altura predeterminada * / #ad ( altura: 60px; @media solo pantalla y (altura: 90px){ / * 90 píxeles de alto * / #ad ( altura: 90px; @media solo pantalla y (altura: 125px){ / * 125 píxeles de alto * / #ad ( altura: 125px; |
Seguimiento de impresiones y clics
Lo mejor de los anuncios HTML5 es que se pueden rastrear mediante Google Analytics, al igual que en los sitios web normales.
Banner (banner en inglés - bandera, banner): una imagen gráfica de naturaleza publicitaria, similar al módulo de publicidad en la prensa. Puede ser una imagen estática o incluso texto, o puede contener elementos animados (hasta video y objetos interactivos). Como regla general, puede contener un hipervínculo al sitio web del anunciante o una página con información adicional. Las tareas del banner son las siguientes. Primero, vende el producto. Tan - atraer atención del visitante, interesar un cliente potencial con un producto o servicio anunciado, empujarlo a ir al sitio y inducir acción(Llamada a la acción). Es el CTA el objetivo final de la publicidad. Y, en segundo lugar, la función del banner es la publicidad de imagen o marca, cuya finalidad es aumentar el conocimiento de la marca y construir una imagen de marca positiva.
Tipos populares de anuncios en el sitio:
- Gráfico- un tipo simple de banner para publicidad en Internet. Consiste en una imagen de cierto tamaño y contiene un enlace a un recurso publicitario.
- Banner flash- tiene grandes posibilidades de animación, le permite transmitir mejor la información utilizando una combinación de gráficos vectoriales y rasterizados.
- Banner HTML5-combinación de elementos HTML con animaciones y buen diseño visual, adaptado a cualquier dispositivo y navegador.
Las principales diferencias entre HTML y otros tipos de banners
En comparación con otros métodos de creación de banners, las tecnologías HTML5 ofrecen una serie de ventajas para atraer a una audiencia a un recurso:
- Los anuncios en este formato se mostrarán igual en todos los dispositivos sin extensiones de navegador adicionales.
HTML5 ofrece más opciones para integrar formularios, botones de redes sociales, calendarios, mapas y otras aplicaciones en sus anuncios. - El peso ligero y el uso de menos recursos no afecta la velocidad de carga de las páginas en el navegador. Las tecnologías flash no permiten lograr este resultado.
- Para evaluar la efectividad de los banners HTML5, puede ver estadísticas en Google Analytics. Allí puede encontrar diversa información sobre invitados y clics en enlaces.
Un inconveniente importante de la tecnología flash fue el abandono gradual de grandes empresas como Apple, Mozilla y Amazon. Google fue el principal impulsor de la desaparición de Flash. Primero desactivaron las animaciones Flash en Google Chrome y luego abandonaron los anuncios Flash en sus servicios de publicidad de búsqueda, optando por HTML5.
Formas de crear banners HTML
El desarrollo de un banner comienza con la creación de una página separada y se inserta en el sitio a través de un "iframe". Existen varios métodos para desarrollar banners publicitarios para el sitio, consideraremos los más populares.
1. Cree un marco con CSS3 y JavaScript.
El marco le permite cargar cualquier documento independiente en un área de tamaños específicos. Puede ser un código HTML diferente usando estilos y scripts para la decoración. También es posible implementar un banner a través del área de "lienzo", en el que se desarrollan animaciones, dibujos, gráficos e incluso juegos utilizando JavaScript. Para acelerar el desarrollo, se permite utilizar bibliotecas de terceros, por ejemplo CreateJS.
Ventajas:
- La funcionalidad no está limitada por ningún programa, puede implementar cualquier cosa.
desventajas:
- Este proceso es bastante complicado y requiere habilidades especiales de diseño.
- Grandes costes laborales en términos de tiempo en relación con otros métodos.
2. Adobe Edge Animate
Aquellos que estén familiarizados con Adobe After Effects encontrarán la interfaz de Adobe Edge Animate muy familiar. Adobe Edge Animate tiene una funcionalidad más limitada destinada a desarrollar contenido animado simple utilizando HTML5, JavaScript y CSS3. El programa admite la importación de formatos como .svg, .png, .jpeg, .gif, HTML; soporte para formatos de video y audio.
Hay más de 30 efectos incorporados, lo que simplifica el tiempo para crear animaciones de alta calidad varias veces:
Ventajas:
- Hay muchos videos tutoriales disponibles en la Web sobre el uso del programa.
- Funcionalidad simple, la mayoría de los procesos están automatizados.
- El programa no requiere conocimientos de HTML5, JavaScript y CSS3.
- Una vez finalizado el trabajo, recibimos todos los documentos necesarios para colocar el banner en el sitio. Imágenes: una carpeta con elementos gráficos de banner, varios archivos JavaScript, html y un archivo An, para la posterior edición del archivo en el programa.
- El banner terminado es compatible con todos los navegadores modernos y aplicaciones móviles, cumple con todos los requisitos técnicos de las campañas publicitarias en Yandex y Google.
desventajas:
- La interfaz solo está en inglés.
- Desde 2015, Adobe ha dejado de desarrollar el proyecto Adobe Edge Animate, el programa no se ha actualizado desde ese momento y ha alcanzado su límite de desarrollo. Edge Animate todavía está disponible para descargar desde los archivos de Creative Cloud.
3. Adobe Animate CC
Animate CC es un producto de Adobe Flash Professional renombrado. Recientemente, la tecnología Flash ha perdido la confianza de los usuarios, el programa necesitaba un cambio de nombre y varias mejoras. Básicamente, se trata del mismo programa Flash Professional, pero en el que los archivos se guardan adicionalmente en HTML5 y JavaScript.
La interfaz es muy similar a Flash Professional, pero las capacidades de los programas difieren.
Ventajas:
- La capacidad de crear gráficos tridimensionales. Hay una herramienta de cámara que le permite capturar la profundidad del fotograma para una animación real.
- A diferencia de Edge Animate, Animate CC tiene una gran selección de pinceles vectoriales y la capacidad de trabajar con gráficos de mapa de bits.
- El programa es relativamente nuevo, por lo que Adobe está desarrollando activamente el proyecto, lanzando actualizaciones y mejorando Animate CC.
- Hay una versión en ruso.
- Opciones extendidas para exportar un archivo a formatos: JavaScript / Html, jpeg, png, oam, svg, mov, gif. Al presionar un botón, los elementos del banner se guardan en los sprites, reduciendo así el tiempo de carga del banner.
desventajas:
- La novedad del programa también es una desventaja. No hay tantos tutoriales de animación en Animate CC como en Adobe Edge Animate. Por lo tanto, el trabajo de algunas funciones debe estudiarse de forma independiente, lo que no es fácil. El programa es bastante difícil para el estudio independiente, pero puedes resolverlo.
- Algunas funciones no están automatizadas como en Edge Animate, lo que también aumenta el tiempo de creación de banners.
4. Google Web Designer
Google nos complació con un editor gratuito especialmente creado para la implementación de banners html. Google Web Designer está completamente orientado a implementar publicidad, cuyo principal sesgo se dirige hacia AdWords.
Si miramos la ventana para crear un nuevo archivo, notaremos que los tamaños de las plantillas de anuncios ya están integrados en el programa.
Ventajas:
- Interfaz sencilla.
- Disponibilidad de plantillas para publicidad en google.
- Programa completamente gratuito.
- Disponibilidad de la versión en ruso.
- Se coloca un diseño de banner receptivo, html-banner se verá genial en cualquier resolución de pantalla.
desventajas:
- La funcionalidad de Google Web Designer es lo suficientemente limitada como para crear obras maestras de animación. El programa está muy limitado por plantillas.
- Falta de programas de formación. La ayuda de Google no es suficiente para enseñar completamente la funcionalidad.
Todos los métodos presentados anteriormente no son nuevos, pero están probados. Esto significa que existe la garantía de que los html-banners creados serán moderados en la mayoría de plataformas publicitarias, ya que sus requisitos técnicos corresponden a los estándares generales.
Creemos un banner publicitario usando CSS3. Actualmente, solo los navegadores Firefox y WebKit son totalmente compatibles con las animaciones CSS3. Pero es bastante fácil hacer que el banner funcione en otros navegadores. Sin embargo, no debe esperar un gran rendimiento en todas partes (especialmente en IE 7 y versiones anteriores) al experimentar con las últimas técnicas de CSS.
Nota: Se han omitido todos los prefijos de los proveedores de navegadores para ahorrar espacio en la página. Ver código fuente.
Marcado HTML
Primero, veamos la estructura de un banner en HTML. En esta etapa, necesitamos imaginar cómo funcionará la animación:
¿Perdido?
Relájate, te ayudaremos.
Para una comprensión más profunda de la estructura de marcado, centrémonos en el barco:
Hay tres animaciones en marcha con el barco:
Deslizando el bote hacia la izquierda. Se aplica a una lista desordenada (grupo).
Imitación de un barco meciéndose en el agua. Se aplica al elemento de la lista (barco).
La aparición de un signo de interrogación. Se aplica al elemento div (signo de interrogación).
Si observa la página de demostración, puede ver que la animación del elemento de la lista (barco) también afecta al elemento div dentro de él (signo de interrogación). Además, la animación de "deslizar hacia afuera" para una lista desordenada afecta el elemento de la lista (barco y signo de interrogación).
De ahí que podamos concluir que los niños reciben animaciones de sus padres además de sus propias acciones. Ahora todo lo que queda es enumerar las estructuras padre / hijo.
CSS
Antes de comenzar a analizar cómo crear animaciones, debemos asegurar la compatibilidad con versiones anteriores de los navegadores más antiguos.
compatibilidad con versiones anteriores
Aseguraremos la compatibilidad con versiones anteriores simplemente diseñando el marcado como si no hubiera animaciones CSS en absoluto. Si alguien mira la página en un navegador antiguo, verá una imagen estática normal y no un espacio en blanco vacío.
Por ejemplo: si usa CSS? similar a lo que se muestra a continuación, habrá problemas:
/* ¡NO ESTÁ BIEN! * / @keyframe our-fade-in-animation (0% (opacidad: 0;) 100% (opacidad: 1;)) div (opacidad: 0; / * Este div está oculto por defecto - ¡oh! * / animation: nuestro -fade-in-animation 1s 1;)
Si el navegador no admite animaciones, el elemento div permanecerá invisible para el usuario.
Así es como garantizamos la compatibilidad con versiones anteriores de los navegadores más antiguos:
/ * CORRECTO * / @keyframe our-fade-in-animation (0% (opacity: 0;) 100% (opacity: 1;)) div (opacity: 1; / * Este div es visible por defecto * / animation: nuestro -fade-in-animation 1s 1;)
Ahora el elemento div se renderizará incluso si la animación no se inicia. Y en los navegadores modernos, el div se ocultará primero durante la animación.
La Fundación
Ahora sabemos cómo garantizar la compatibilidad con versiones anteriores (lo que ayudará a evitar problemas al trabajar con proyectos reales). Es hora de crear el núcleo de nuestro código CSS.
Hay 3 puntos a tener en cuenta:
Dado que el banner se utilizará en diferentes sitios, Haremos que todos nuestros selectores de CSS sean especiales. Todos comenzarán con el identificador # ad-1. Por lo tanto, intentaremos evitar la superposición de nuestro código y el código del sitio.
Ignoramos intencionalmente el retraso de la animación en instalaciones. Si usa el retraso de la animación al configurar estilos con la visibilidad de elemento predeterminada, la estructura del banner se verá interrumpida por la desaparición o reaparición repentina de partes de la imagen después de que finalice la animación. El retraso de la animación se simula mediante la duración y la configuración de los fotogramas.
Cuando sea posible use una animación para varios elementos. De esta forma, ahorramos tiempo y reducimos el tamaño del código.
Así que creemos la base de nuestro banner. Establezcamos un posicionamiento relativo para que los elementos internos se puedan colocar correctamente. También ocultará todo lo que esté fuera del elemento:
# ad-1 (ancho: 720px; alto: 300px; flotador: izquierda; margen: 40px auto 0; background-image: url (../ images / ad-1 / background.png); background-position: center; background -repetir: no repetir; desbordamiento: oculto; posición: relativa; sombra de cuadro: 0px 0px 6px # 000;)
Luego, aplicamos estilo al texto y a los campos de entrada. Llamamos a las animaciones apropiadas. También debe asegurarse de que el contenido tenga el índice Z más alto para las partes móviles para que no se superpongan:
# ad-1 #content (ancho: 325px; flotador: derecho; margen: 40px; alineación de texto: centro; índice z: 4; posición: relativa; desbordamiento: visible;) # ad-1 h2 (font-family: "Alfa Slab One", cursiva; color: # 137dd5; tamaño de fuente: 50px; altura de línea: 50px; sombra de texto: 0px 0px 4px #fff; animación: animación difuminada retardada 7s 1 salida fácil; / * Apariencia de h2 con retraso simulado * /) # ad-1 h3 (font-family: "Boogaloo", cursive; color: # 202224; font-size: 31px; line-height: 31px; text-shadow: 0px 0px 4px #fff; animation: delay-fade-animation 10s 1 easy-in-out; / * La aparición de h3 con retraso simulado * /) # ad-1 form (margin: 30px 0 0 6px; position: related; animation: form-animation 12s 1 easy-in-out; / * Easy-in-out; / * Formulario de correo electrónico deslizante con retraso simulado * /) # ad-1 #email (ancho: 158px; alto: 48px; flotador: izquierda; padding: 0 20px; font-size: 16px; font-family: "Lucida Grande", sans-serif; color: #fff; text-shadow: 1px 1px 0px # a2917d; border-top-left-radius: 5px; borde r-bottom-left-radius: 5px; borde: 1px sólido # a2917d; esquema: ninguno; caja de sombra: -1px -1px 1px #fff; color de fondo: # c7b29b; imagen de fondo: gradiente lineal (inferior, rgb (216,201,185) 0%, rgb (199,178,155) 100%); ) # ad-1 #email: focus (background-image: linear-gradient (bottom, rgb (199,178,155) 0%, rgb (199,178,155) 100%);) # ad-1 #submit (height: 50px; float: left ; cursor: pointer; padding: 0 20px; font-size: 20px; font-family: "Boogaloo", cursiva; color: # 137dd5; text-shadow: 1px 1px 0px #fff; border-top-right-radius: 5px ; border-bottom-right-radius: 5px; border: 1px solid # bcc0c4; border-left: none; background-color: #fff; background-image: linear-gradient (bottom, rgb (245,247,249) 0%, rgb ( 255,255,255) 100%);) # ad-1 #submit: hover (background-image: linear-gradient (bottom, rgb (255,255,255) 0%, rgb (255,255,255) 100%);)
Ahora diseñemos el agua y llamemos a la animación apropiada:
# ad-1 ul # water (/ * Si necesita otra animación para el agua, puede agregarla aquí * /) # ad-1 li # water-back (width: 1200px; height: 84px; background-image: url ( .. /images/ad-1/water-back.png); background-repeat: repeat-x; z-index: 1; position: absoluta; bottom: 10px; left: -20px; animation: water-back-animation 3s infinite easy-in-out; / * Simular el traslape de las olas * /) # ad-1 li # water-front (ancho: 1200px; alto: 158px; background-image: url (../ images / ad-1 / water -front .png); background-repeat: repeat-x; z-index: 3; position: absolute; bottom: -70px; left: -30px; animation: water-front-animation 2s infinite easy-in-out; / * Otra imitación de olas rompiendo. La animación se ejecutará un poco más rápido para crear un efecto de perspectiva. * /)
Diseñemos el barco y sus elementos. También llamamos a las animaciones correspondientes:
# ad-1 ul # boat (ancho: 249px; alto: 215px; z-index: 2; posición: absoluta; parte inferior: 25px; izquierda: 20px; desbordamiento: visible; animación: barco-en-animación 3s 1 salida fácil ; / * Desliza el grupo cuando comienza el anuncio * /) # ad-1 ul # boat li (ancho: 249px; alto: 215px; background-image: url (../ images / ad-1 / boat.png); position: absolute; bottom: 0px; left: 0px; overflow: visible; animation: boat-animation 2s infinite easy-in-out; / * Simula el bote flotando en el agua, similar a la animación que ya se usa en el agua. * /) # ad-1 # signo de interrogación (ancho: 24 px; alto: 50 px; imagen de fondo: url (../ images / ad-1 / question-mark.png); posición: absoluta; derecha: 34 px; arriba: -30px; animación: animación diferida retardada 4s 1 salida fácil; / * Se desvanece en el signo de interrogación * /)
Ahora diseñemos las nubes. Para estos usaremos animación con un efecto de movimiento sin fin. La ilustración demuestra la esencia de la idea:
Y aquí está el código CSS:
# ad-1 #clouds (position: absolute; top: 0px; z-index: 0; animation: cloud-animation 30s infinite linear; / * Desplaza las nubes hacia la izquierda, reinicia y repite * /) # ad-1 # cloud-group -1 (ancho: 720px; posición: absoluta; izquierda: 0px;) # ad-1 # cloud-group-2 (ancho: 720px; posición: absoluta; izquierda: 720px;) # ad-1 .cloud- 1 (ancho: 172 px; alto: 121 px; imagen de fondo: url (../ images / ad-1 / cloud-1.png); posición: absoluta; arriba: 10 px; izquierda: 40 px;) # ad-1. cloud-2 (ancho: 121px; alto: 75px; imagen de fondo: url (../ images / ad-1 / cloud-2.png); posición: absoluta; arriba: -25px; izquierda: 300px;) # ad -1. Cloud-3 (ancho: 132px; alto: 105px; imagen de fondo: url (../ images / ad-1 / cloud-3.png); posición: absoluta; arriba: -5px; izquierda: 530px; )
Animaciones
Recordatorio: A partir de este momento, nada está realmente animado. Si observa nuestro banner ahora, verá una imagen estática. Aquí es donde se crean las animaciones que se llaman en el código anterior.
Ahora démosle vida a nuestra hermosa imagen estática:
/ * La animación con retraso simulado se utiliza para mostrar varios elementos. El retraso se simula iniciando el proceso con el 80% de la animación continuando (en lugar de inmediatamente). Así es como puede simular cualquier retraso: * / @keyframes delayed-fade-animation (0% (opacidad: 0;) 80% (opacidad: 0;) 100% (opacidad: 1;)) / * Animación para mostrar una formulario con una dirección de correo electrónico y un botón. La simulación de latencia también se usa * / @keyframes form-animation (0% (opacidad: 0; derecha: -400px;) 90% (opacidad: 0; derecha: -400px;) 95% (opacidad: 0.5; derecha: 20px; ) 100% (opacidad: 1; derecha: 0px;)) / * Esta animación se usa para sacar el barco de la pantalla al comienzo del video: * / @keyframes barco-en-animación (0% (izquierda: -200px; ) 100% (izquierda: 20px;)) / * Animación para nubes. El primer grupo de nubes comienza a moverse desde el centro y el segundo, a la derecha de la pantalla. El primer grupo aparece lentamente en la pantalla, mientras que el segundo aparece a la derecha. Una vez que el grupo de la izquierda está completamente oculto, las nubes vuelven a su posición original muy rápidamente: * / @keyframes cloud-animation (0% (left: 0px;) 99.9999% (left: -720px;) 100% (left: 0px;) )) / * Las últimas tres animaciones son casi iguales, la diferencia radica en el posicionamiento de los elementos. Simulan las olas del océano rompiendo: * / @keyframes boat-animation (0% (abajo: 0px; izquierda: 0px;) 25% (abajo: -2px; izquierda: -2px;) 70% (abajo: 2px; izquierda: - 4px;) 100% (abajo: -1px; izquierda: 0px;)) @keyframes water-back-animation (0% (abajo: 10px; izquierda: -20px;) 25% (abajo: 8px; izquierda: -22px; ) 70% (abajo: 12px; izquierda: -24px;) 100% (abajo: 9px; izquierda: -20px;)) @keyframes water-front-animation (0% (abajo: -70px; izquierda: -30px;) 25% (abajo: -68px; izquierda: -32px;) 70% (abajo: -72px; izquierda: -34px;) 100% (abajo: -69px; izquierda: -30px;))
Conclusión
En este tutorial, aprendimos algunos conceptos clave:
- Los elementos descendientes reciben animaciones de sus padres además de sus animaciones.
- Al crear un banner, debe esforzarse por utilizar un identificador único para evitar la superposición de código con un proyecto CSS existente.
- La posición y el estilo de los elementos deben elegirse como si la animación no estuviera disponible para mantener la compatibilidad con versiones anteriores.
- Si es posible, debería utilizar una animación para varios elementos.