15 efectos impresionantes con JS y CSS3
Hola diseñadores, ¿habéis llegado al punto en que vuestro cerebro se niega a funcionar más?
Si tiene y está buscando ideas para hacer que los sitios web se conviertan en la próxima gran novedad después de Canción de fuego y hielo (la serie Juego de tronos para la población que no lee libros) sin devanarse los sesos, consulte estos 15 CSS3 efectos que hemos redondeado para usted.
¡Desde tutoriales hasta ofertas, le ofrecemos 15 efectos asombrosos que transformarán los sitios web de blah a wow!
Efecto de paralaje
¿Ha navegado por el sitio web de ihatetomatoes que celebra los 25 años de Nintendo Game Boy? ¿Dónde también llegaste a jugar algo de Tetris?
¿ O tal vez navegó a través del sitio web de Rimmel asombrado por la brillantez de los elementos que aparecen contra un fondo colorido de modelos?
El efecto 3D-esque que parece ser todo un delirio en el diseño ahora se llama técnicamente Efecto Parallax. A los diseñadores les encanta jugar con esto, pero debes ser sutil y estratégico, ya que puede resultar contraproducente y terminar creando un desorden.
El efecto Parallax o el desplazamiento Parallax es el resultado de que el fondo se carga a una velocidad más lenta que el primer plano, lo que crea una apariencia más 3D. ¿Suena como mucho trabajo? No es para alguien que trabaja de manera inteligente, obtenga un tema de Parallax completamente listo en Cyberchimps.
Efecto Ken Burns
El realizador de documentales fue pionero en el concepto de panorámica y zoom en una imagen estática. El diseñador gráfico usó este efecto abundantemente y es posible que incluso lo haya encontrado en muchos sitios web.
El efecto no solo guía los globos oculares, literalmente, hacia donde desea que esté el enfoque, sino que también agrega un toque de intensidad a una imagen. ¿Recuerdas haber visto una película en la que se mostraba una fotografía antigua en la pantalla y el narrador habla sobre algo en la imagen, mientras el marco se desplaza lentamente y se acerca a ese tema?
El efecto Ken Burns se ha vuelto bastante popular y con razón, ya que le da un lavado de cara instantáneo a cualquier sitio web aburrido.
No tienes que esforzarte al máximo para cambiar el aspecto de tu sitio web. A veces, tan solo eliminar la opción de los hombres viejos y aburridos puede ayudar.
En su lugar, elija una elegante opción de navegación circular o semicircular que ayude a mostrar una serie de opciones de menú. Algunos diseñadores solo incluyen esto para los botones para compartir en las redes sociales, pero te sorprendería su versatilidad.
Desde la consola de música obvia y los íconos para compartir en las redes sociales, hasta el menú principal y los íconos de perfil, hay muchas maneras de aprovechar esto.
¿No quieres romperte la cabeza creando este efecto CSS3 desde cero? Consigue uno como regalo de promoción de DealFuel.
Mostrar/ocultar panel de inicio de sesión
Los paneles deslizantes se usan comúnmente en estos días, pero eso es principalmente para aligerar la carga de demasiadas pestañas. No hay suficientes diseñadores que experimenten con el potencial de esta opción, porque los paneles deslizantes pueden ser beneficiosos de muchas maneras.
Muestre temas de contenido, cree una apariencia ordenada, mejore la estética o simplemente sea diferente de los sitios web de diseño convencional. El panel de inicio de sesión Mostrar/Ocultar es imprescindible para todos los sitios web de WordPress, ofrece una descripción general del panel con múltiples opciones de menú una vez que inicia sesión. Conozca más sobre este panel aquí.
Formulario de inicio de sesión deslizante
Otra opción del panel de inicio de sesión que se desliza para revelar más contenido es un gran movimiento cuando desea que los suscriptores ingresen un poco más de información que solo la dirección de correo electrónico y el nombre, pero al mismo tiempo no quiere abrumarlos.
Reduciendo el espacio también, definitivamente echa un vistazo a esto, ya que sería útil cuando estés creando sitios web con temas minimalistas.
Cintas 3D y efectos 3D
Si todavía te sientes intimidado por el efecto Parallax y temes equivocarte, comienza poco a poco. Use cintas 3D, diferentes tonos y sombras para crear una ilusión general de profundidad en su sitio web, generando así un efecto 3D.
Las cintas 3D en sí mismas se ven absolutamente increíbles. Úselo para resaltar una parte del sitio web o en un documento de certificación oficial que desee colocar, esto aumentaría el atractivo visual general de la página.
Sepa cómo crear el efecto usando CSS3 en pvmgarage.
Efecto de flujo de cobertura
Utilizado predominantemente en sitios web basados en libros, definitivamente ha visto este efecto en su dispositivo Mac o Apple cuando navegaba por las imágenes. El efecto Coverflow muestra una serie de elementos, como portadas de libros, donde puede deslizar el dedo hacia la izquierda o hacia la derecha para ver la portada, obtener algunos detalles emergentes y seleccionarlos.
¿Esto suena interesante? ¿Te gustaría implementar esto en un proyecto? Si es así, entonces definitivamente explore esta pieza.
Transiciones CSS3
Los diseñadores que juegan de manera inteligente en lugar de duro saben que no se necesita mucho para agregar mojo a su sitio web, un cambio de tema aquí, algunos elementos de sombra y sombreado allí y realmente puede transformar su página. Otra forma de hacerlo es animando el contenido de su página a través de transiciones CSS3.
Desde el espaciado entre letras hasta la sombra del texto, juegue todo lo que quiera para ver qué se adapta mejor. Además, aquí hay un gran obsequio que comprende una amplia gama de efectos de transición.
Animación CSS3 con temática de nieve
¿Aún te estás recuperando de las secuelas de la temporada navideña? Las animaciones CSS3 con temas de nieve no solo tienen un toque festivo, sino que también funcionan muy bien para ciertos sitios web como el de una marca de helados.
Es rápido y fácil de usar y puede cambiar el aspecto de su sitio web o página de blog para complementar un tema o una temporada.
Animación
Las animaciones pueden hacer maravillas para los sitios web, incluso si se hacen sutilmente. Llama la atención y también ayuda con las conversiones, ya que la atención se dirige a la llamada a la acción.
O simplemente, se suma al valor nominal de una página, si nada más. Aquí hay algunos efectos de animación especiales geniales que puedes ver.
Efecto tipográfico
¿Probablemente has visto esas publicaciones de citas de Instagram con el aspecto de texto grabado? Así es como se ve el efecto Letterpress y también se está volviendo bastante popular en el diseño web.
Esto tiene una sensación de mecanografiado inverso, pero exhibe un aspecto elegante y elegante. Definitivamente recomendado si lo tuyo es una publicación en línea o un blog. Además, si desea dar un toque de profesionalidad sin tener que ser todo un C-suite, esto ayudaría. Aquí hay un tutorial sobre cómo puede usar el efecto tipográfico con CSS3.
círculo invertido
Un poco de información no solo no hace daño a nadie, sino que también podría ser la USP del sitio web. Un sitio web como el que arroja datos aleatorios con cada actualización podría convertirse en una especie de galería con imágenes que tienen un pequeño mango, que cuando se hace clic se abre para mostrar algunas curiosidades divertidas.
Pero incluso en sitios web regulares, un círculo giratorio es de mucha importancia. Comprime la información, por lo que no tiene una página repleta de texto. Y también tiene una sensación 3D genial. Aquí hay un tutorial sobre cómo crear un círculo giratorio.
Menú Mega
Probablemente los haya visto en sitios web de comercio electrónico donde se deben colocar muchas categorías en la página de destino, pero sin crear una barra de menú abarrotada.
La opción Mega Menú también es imprescindible para la industria de la educación. ¿Tiene un sitio web universitario que muestre todos los cursos principales, información de admisión, resultados de los estudiantes y mucho más?
El Mega Menú puede ayudar a ordenar, crear una opción de barra de menú más nítida y elegante y no confundir a los lectores para que hagan clic en la opción incorrecta debido a las opciones de menú más largas y congestionadas. También puede obtener una gran cantidad al obtener Mega Menu receptivo de forma gratuita.
Galería de acordeón
Hay dos formas de mantener a los lectores interesados en su sitio, promocionar contenido poderoso y llamar su atención sobre dicho contenido poderoso. Una página estática puede llamar la atención del lector, pero algo interactivo como una Galería de Acordeón captará la atención del lector.
Las galerías de acordeón, ya sea que elija exhibir su mejor pieza de cartera o llamar la atención sobre su producto más vendido, siempre funcionarán. Solo tiene 6 segundos para captar la atención del lector y mantenerlo en la página, utilice la galería Accordion para captar y mantener su atención en su sitio web durante mucho más tiempo. Aquí hay un excelente complemento adaptable de Accordion Gallery que puede obtener de forma gratuita.
Caja ligera
¿Qué tan importante es una galería de cuadrícula? Si eres fotógrafo, artista o simplemente bloguero, podría significar tu próximo gran trabajo.
¡Una galería de cuadrículas muestra todas tus mejores piezas! Desde la impresionante toma de la puesta de sol en lo alto de una colina hasta ese intenso retrato callejero, sorpréndalos, corra la voz o simplemente intútelos a ganar un contrato, una galería de cuadrícula podría ser su mejor currículum.
Como diseñador, esto es algo que no solo debe considerar para el trabajo de su cliente sino también para su propio sitio web. Haz que tu trabajo defienda por ti y avala tu destreza creativa, una galería de cuadrículas vale su peso en oro.
Pero lo obtienes gratis en este trato, ¡así que ve a buscarlo ahora!
¿Cuál de estos le recomendarías a un amigo?