JOSÉ JUANAS

Facebook Gmail Linkedin
Galleta

Cookies

Utilizamos cookies propias y de terceros para mejorar nuestros servicios.

Aviso de privacidad

Contenidos animados

Hola, estas visitando otra de mis páginas donde experimento con las propiedades CSS más vistosas a mi parecer como son, transition, animation, y transform, páginas donde explicó su sintaxis con ejemplos.

Animaciones hover y javascript

Bueno las animaciones de css, me parecen un recurso muy vistoso, pero hay que comprender, que no a todo el mundo le gustan y además pueden distraer al usuario de la verdadera intención de una página, que es ser leida ó vista con atención.

Por lo que hay recursos para implementar animaciones que solo se activan, mediante la interacción del usuario, en CSS podemos utilizar la pseudoclase hover, para activar la animación, o emplear un poco de javascript y proporcionar al usuario, unos botones, con los que manipular el estado de la subpropiedad de animation animation-play-state, que tiene dos estados running (valor por defecto) y paused (detenida).

Bueno yo abajo os he preparado un ejemplo de ambas interacciones, osea la imágen de la sonrisa tiene una animación que la puedes manipular, con los botones. Y a continuación puedes observar otro contenedor que funcionara cuando le poses el ratón encima, pero que también tiene un estado que manipulo con el javascript de los botones.

Posa el ratón aquí, y haré magia.

+
+
= Mezcla bien estos tres ingredientes y tendrás, la página web que deseas.

Como el espacio en las páginas web, suele ser un bien muy valioso, hay que aprovechar el espacio, de hay los contenedores de contenido que os presento en la siguiente sección.

Contenedores expandibles

Aquí abajo os muestro, unos ejemplos de como puedes sintetizar bastante contenido en poco espacio. Funcionan como ya os dije previamente con vuestra interacción en el :hover del elemento, osea que si quieres observarlos posa el cursor sobre ellos.

UNO HTML

HTML, siglas en inglés de HyperText Markup Language (lenguaje de marcado de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros. Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. HTML se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.

DOS CSS

CSS (siglas en inglés de Cascading Style Sheets), en español «Hojas de estilo en cascada», es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado. Es muy usado para establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web y GUIs para muchas aplicaciones móviles (como Firefox OS). El CSS es un lenguaje basado en reglas: cada usuario define las reglas que especifican los grupos de estilos que van a aplicarse a elementos particulares o grupos de ele mentos de la página web.

TRES Javascript

JAVASCRIPT (abreviado comúnmente JS) es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico. Se utiliza principalmente del lado del cliente, implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas y JavaScript del lado del servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo. JavaScript se diseñó con una sintaxis similar a C, aunque adopta nombres y convenciones del lenguaje de programación Java. Sin embargo, Java y JavaScript tienen semánticas y propósitos diferentes.

CUATRO Página web

Una Página Web es conocida como un documento de tipo electrónico, el cual contiene información digital, la cual puede venir dada por datos visuales y/o sonoros, o una mezcla de ambos, a través de textos, enlaces(link), imágenes, gráficos, audio o vídeos y otros tantos materiales dinámicos o estáticos. Toda esta información se ha configurado para adaptarse a la red informática mundial, también conocida como World Wide Web. Las páginas web o como también son conocidas las web page por su nombre en inglés se encuentran contenidas dentro de los sitios web o websites, que son mejor conocidos por los desarrolladores con el nombre de dominios, que almacenan o alojan el contenido que se desarrollan para ser visualizados o usados por el usuario.

UNO HTML

HTML, siglas en inglés de HyperText Markup Language (lenguaje de marcado de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros. Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. HTML se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado

DOS CSS

CSS (siglas en inglés de Cascading Style Sheets), en español «Hojas de estilo en cascada», es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado. Es muy usado para establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web y GUIs para muchas aplicaciones móviles (como Firefox OS). El CSS es un lenguaje basado en reglas: cada usuario define las reglas que especifican los grupos de estilos que van a aplicarse a elementos particulares o grupos de elementos de la página web.

TRES Javascript

JAVASCRIPT (abreviado comúnmente JS) es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico. Se utiliza principalmente del lado del cliente, implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas y JavaScript del lado del servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo. JavaScript se diseñó con una sintaxis similar a C, aunque adopta nombres y convenciones del lenguaje de programación Java. Sin embargo, Java y JavaScript tienen semánticas y propósitos diferentes.

CUATRO Página web

Una Página Web es conocida como un documento de tipo electrónico, el cual contiene información digital, la cual puede venir dada por datos visuales y/o sonoros, o una mezcla de ambos, a través de textos, enlaces(link), imágenes, gráficos, audio o vídeos y otros tantos materiales dinámicos o estáticos. Toda esta información se ha configurado para adaptarse a la red informática mundial, también conocida como World Wide Web. Las páginas web o como también son conocidas las web page por su nombre en inglés se encuentran contenidas dentro de los sitios web o websites, que son mejor conocidos por los desarrolladores con el nombre de dominios, que almacenan o alojan el contenido que se desarrollan para ser visualizados o usados por el usuario.

Conclusión

Espero que os haya gustado alguno de mis efectos y demostrado con ellos la capacidad de las propiedades transition, animation, y transform para dar dinamismo a una página web, sin más me despido, no sin antes recordarte que puedes contactar conmigo para cualquier sugerencia, comentario o duda, gracias por la visita.

Contacto José Juanas
Datos del mensaje
 WEBMASTER • JOSE JUANAS •