Es imposible imaginar un sitio web que no tenga elementos dinámicos. Utilizar elementos dinámicos en los sitios web se ha convertido casi en una obligación. Hoy en día buscamos sitios web más atractivos e interactivos.
Es aquí donde entran en juego las populares animaciones activadas por desplazamiento en los sitios web. Wondershare Filmora es una de las mejores empresas de desarrollo de sitios web que desarrolla sitios web con animaciones activadas por desplazamiento para clientes de todo el mundo. Wondershare Filmora anima maravillosamente elementos en scroll para los sitios web que desarrollan.
Parte 1 ¿Qué son las animaciones activadas por desplazamiento?
Las animaciones activadas por desplazamiento son una fuerte tendencia que nos acompaña desde hace muchos años. Es la forma más eficaz de animar elementos en scroll como los gráficos, textos, videos y fotos y dar vida a todos ellos mientras se desplaza por la página de un sitio web. Las animaciones de desplazamiento se utilizan para captar la atención del usuario y hacer que un sitio web sea más interesante y atractivo.
Part 2 Mejores 12 sitios web con ejemplos de animación activada por desplazamiento
A continuación se presentan los 12 mejores sitios web con ejemplos de animación activada por desplazamiento.
01Joey Bada$$ Political MC
El sitio web de Joey Bada$$ Political MC está considerado uno de los ejemplos más exquisitos de cómo las animaciones activadas por desplazamiento pueden utilizarse eficazmente para contar una historia. Este sitio web es una colaboración entre Shoes Up - La revista francesa y American MC. Se trata de un sitio web satírico y se asemeja a una campaña política. Para construir este sitio web se utilizó animación activada por desplazamiento en todo momento. El desplazamiento está diseñado de tal forma que cambia de horizontal a vertical. Cada desplazamiento ofrece muchos datos interesantes sobre las ideas políticas de Joey.
02Vincent Saïsset
Vincent Saïsset, lo primero que verás es un fondo blanco con una letra V blanca muy grande. La letra V simboliza las iniciales del artista. Hay una flecha apuntando hacia abajo que te anima a empezar a explorar el sitio web. Cuando empieces a desplazarte, verás una oleada de tipos de letra animados con una interacción monocromática. El sitio web está diseñado con transiciones de desplazamiento horizontal y vertical. También tiene una microinteracción lúdica entre las letras y el cursor.
03Home Société
El sitio web de Home Société muestra de forma asombrosa todo el trabajo de diseño de interiores de la empresa. El diseño de este sitio web es muy sencillo, pero al mismo tiempo rico en elementos gráficos, animaciones y tipografía. Los elementos animados utilizados se entrecruzan y superponen rítmicamente entre sí. Las imágenes de fondo cambian constantemente con tipos de letra llamativos. La mejor parte que lo diferencia de otros sitios web es el desplazamiento horizontal, que ofrece a los usuarios una experiencia de desplazamiento infinito.
04Sally
Esta empresa es de NYC y alquilan automóviles a Lyft, Via Juno y Uber. El sitio web de Sally puede parecer minimalista en cuanto a colores y diseños o detalles exquisitos. Pero lo que la hace cautivadora es el modelo en 3D de un vehículo y otras setenta animaciones que dan la impresión de que el vehículo está en movimiento. Es el ejemplo perfecto de cómo animar elementos en scroll, puedes mover el modelo de una sección a otra moviendo el cursor o simplemente desplazándote. Todas las transiciones utilizadas están sincronizadas de forma elocuente y no hay ningún problema en todo el sitio web.
05Yuto Takahashi
El sitio web de Yuto Takahashi es un sitio web de portafolio. Este sitio web es otro ejemplo asombroso de animaciones activadas por desplazamiento. Lo primero que se ve es un círculo giratorio formado por las palabras del nombre del artista. Entonces aparecerán unas instrucciones en las que se pide que se mantenga pulsado el ratón para acceder a las obras del artista. El tipo de letra utilizado es Serif, que rodea las fotografías. Con cada nuevo desplazamiento se puede ver una especie de animación líquida sobre las fotografías. Si se hace clic en cualquiera de las obras destacadas, se pueden ver animaciones activadas por desplazamiento en cada una de ellas..
06Editorial New
El sitio web de Editorial New es una colaboración entre Pangram Pangram Foundry y Locomotive. El tipo de letra de esta web es un reflejo de los diseños de los años 90. La web comienza con una sección parecida a un periódico que va rotando a medida que te desplazas y se detiene hasta que cubre la pantalla por completo. A continuación, encontrarás varios tipos de letra que muestran su versatilidad. También encontrarás la portada de una revista que se crea utilizando la hermosa fuente. Mientras haces clic en el botón Randomize, verás que la portada cambia y muestra la fuente en varios otros tamaños.
07Danilo De Marco
El sitio web de Danilo De Marco es una colaboración con Studio K95. Este sitio web se ha desarrollado con el fin de promocionar todas estas obras. En este sitio web, las animaciones activadas por desplazamiento se utilizan en algunas secciones concretas, pero ocupan un lugar destacado. El logotipo, junto con la fuente utilizada, está animado de forma encantadora. El vibrante color verde utilizado no te dejará despegarte de la pantalla. La tipografía utilizada es muy dominante. Y si haces clic en cualquiera de sus obras destacadas serás dirigido a la página dedicada exclusivamente a esa obra en concreto. Al desplazarse por las fotografías parecerá que se alejan.
08K24 Moscow
K24 Moscú es uno de los sitios web más cautivadores creados para un proyecto de arquitectura moderna. El sitio web evoca el espíritu del suprematismo y la vanguardia rusos. Las animaciones activadas por desplazamiento se utilizan para animar elementos al desplazarse por toda la presentación. Con cada desplazamiento, descubrirás algo nuevo. La combinación de secciones de color blanco, negro y rojo que se mueven y superponen con los cambios de tamaño crean un tipo de letra distinto. Todo ello lo convierte en un sitio web emocionante que mantiene el espíritu vanguardista ruso.
09Green Chameleon
El sitio web de Green Chameleon se creó para mostrar todos sus logros y recuerdos más preciados de 2018. Al principio de la página web, serás recibido con un gráfico de presentación y, a continuación, empezarás a explorar el sitio. Tendrás la sensación de haber entrado en una cápsula del tiempo. Podrás ver las obras mes a mes. Y cuando hagas clic en un proyecto concreto, la imagen aparecerá en el centro de la pantalla. Con ella, encontrarás información relevante debajo. El color de fondo va cambiando mientras navegas por un espacio 3D.
10Bewegen
El sitio web de Bewegen es un escaparate de animaciones, ricos contenidos e interacciones. Bewegen es un popular sistema mundial conocido por compartir bicicletas. Las animaciones activadas por desplazamiento junto con las tomas de zoom ofrecen una visión detallada de la popular bicicleta Pedelec de Bewegen. Si seguimos bajando, obtendremos información relacionada con el sistema de bicicletas compartidas y también detalles sobre cómo utilizarlo. También existe la opción de crear un sistema de bicicletas compartidas eligiendo la ciudad y el número de cabezas que se incluirán en el proyecto, así como el color y otras características de la bicicleta.
11Wtower
El sitio web de Wtower es un mundo virtual interactivo que cuenta la historia de la torre de agua más grande del mundo en el pasado: la Torre Blanca de los Urales. Este sitio web es otra increíble narración en la que la animación activada por desplazamiento encaja como las piezas de un rompecabezas. El desplazamiento te lleva a un espacio en 3D donde podrás conocer cómo se originó la torre y cuál es su estado actual. En la parte inferior encontrarás una barra de progreso que aparece cada vez que hay que entregar algún elemento útil. Además, podrás comprobar qué parte de la historia has escuchado y cuánto te queda.
12Parmigiani Fleurier
El sitio web de Parmigiani Fleurier es un sitio web de relojeros suizos. Este sitio web es también otro sorprendente ejemplo de animación en scroll. El diseño del sitio web es elegante y recatado. Mientras uno se desplaza, puede explorar toda la colección utilizando las filas situadas a ambos lados de la pantalla. Cuando encuentres el modelo que más te guste, podrás ver la información detallada que se muestra en un patrón asimétrico alrededor del reloj. También conocerás otros detalles como la caja, la esfera, la correa, el sistema de cuerda y otras especificaciones técnicas. Las animaciones utilizadas son muy sutiles y equilibradas.
Part 3 Ventajas y desventajas de estos 12 sitios web
Nombre del sitio web |
Ventaja |
Desventaja |
| Joey Bada$$ Political MC | Se han utilizado animaciones activadas por desplazamiento. El desplazamiento está diseñado de tal forma que cambia de horizontal a vertical. | Consumo intensivo de recursos. |
| Vincent Saïsset | Tiene una microinteracción que resulta entretenida entre las letras y el cursor. | El uso de los componentes es intensivo. |
| Home Société | El desplazamiento horizontal presenta una dimensión totalmente nueva que ofrece a los usuarios una experiencia de desplazamiento infinito. | El consumo de memoria es elevado. |
| Sally | Lo más cautivador es el modelo 3D del vehículo y otras setenta animaciones que dan la impresión de que el auto está en movimiento. | Consume muchos recursos. |
| Yuto Takahashi | Con cada nuevo desplazamiento, se puede ver algún tipo de animación líquida sobre las fotografías | Requiere mucho ancho de banda. |
| Editorial New | Mientras se hace clic en el botón Aleatorizar se verá que la portada cambia y muestra la fuente en varios otros tamaños. | Necesita un buen Internet. |
| Danilo De Marco | La tipografía utilizada es muy dominante. | Consumo intensivo de recursos. |
| K24 Moscow | La combinación de secciones de color blanco, negro y rojo que se mueven y superponen con los cambios de tamaño crea un tipo de letra distinto. | Requiere mucho ancho de banda. |
| Green Chameleon | Uno tendrá la sensación de haber entrado en una cápsula del tiempo. | El sitio web consume muchos recursos. |
| Bewegen | También existe la opción de que cualquiera pueda crear un sistema de uso compartido simplemente eligiendo la ciudad y el número de cabezas que se incluirán en el proyecto, al tiempo que elige el color y otras características de la bicicleta. | El uso de componentes es intensivo. |
| Wtower | Una barra de progreso en la parte inferior y aparece cada vez que hay algún elemento útil que entregar. | El sitio web consume muchos recursos. |
| Parmigiani Fleurier | Se puede explorar toda la colección utilizando las filas situadas a ambos lados de la pantalla. | Requiere muchos recursos |
Lo más importante de este episodio
● Al final de este artículo, ya has entendido en qué consisten las animaciones activadas por desplazamiento.
● También tienes la visión de por qué necesitas animaciones activadas por desplazamiento mientras desarrollas un sitio web para ti.
● El artículo también te habla de los 12 mejores sitios web de animación activada por desplazamiento que te darán varias ideas para tu próximo sitio web.
