8 fragmentos que demuestran el efecto repelente en el diseño web

Los experimentos con lienzos son la comidilla de la ciudad en estos días. Pueden verse no solo como conceptos en los juegos de desarrollo web populares, sino también como soluciones para proyectos de la vida real. Sin duda, la variedad es asombrosa: desde animaciones de partículas primitivas basadas en complementos populares hasta ideas únicas que son una fusión de herramientas modernas y probadas en el tiempo.

Hoy, llamamos su atención hacia el efecto repelente. Aunque tiene un comportamiento repulsivo, ciertamente tiene una naturaleza atractiva. Animar a los usuarios a jugar con los detalles del escenario empujándolos en varias direcciones o, en algunos casos, incluso arrasándolo todo, se convierte instantáneamente en el entretenimiento principal. Hace que la experiencia del usuario sea agradable y emocionante.

Exploremos una colección de demostraciones inspiradoras con fragmentos de código para que pueda ver la tendencia única por sí mismo.

Líneas que se repelen

A primera vista, esta demostración recuerda a un juego de cuerdas de guitarra. Mueve el cursor sobre ellos y verás la magia. Las líneas comienzan a doblarse y deformarse, formando una pequeña esfera.

El panel de opciones a la derecha le permite controlar el efecto. Puede establecer el radio del rango del mouse, agregar o reducir el número de líneas o cambiar la distancia entre las cadenas. Tenga en cuenta la física. Está bien pensado y cuidadosamente reproducido.

Mira las líneas que se repelen de la pluma de Daniel Velasquez

30.000 partículas

El efecto repelente se ve simplemente impresionante cuando se aplica a miles de puntos en lugar de líneas. Justin Windle demuestra esto en la práctica. Su proyecto icónico y tremendamente popular en CodePen presenta un panel donde se sientan cómodamente 30,000 partículas diminutas.

Están apretados juntos para crear una superficie densa. Pase el cursor del mouse sobre él y verá cómo los puntos se alejan de usted. Aunque no desaparecen de la vista, el rango del mouse los detiene. Por lo tanto, puede ver un círculo hueco relativamente grande donde los puntos forman el borde.

Ver el Pen 30,000 Partículas de Justin Windle

Partículas interactivas

Si el marco rectangular simple no inspira tu creatividad, siempre puedes juntar todos esos puntos en caracteres como lo hizo Tamino Martinius en su proyecto de partículas interactivas.

Su demostración incluye una palabra, donde cada letra se construye a partir de cientos de puntos. Soplarlos con el cursor del mouse para darle vida a las cosas. Hay un pequeño centro de control donde puedes cambiar los parámetros del experimento y ajustarlo a tus preferencias.

Vea el logotipo de partículas interactivas de Pen por Tamino Martinius

Texto a Partículas

Juguemos con el color y el tamaño para enriquecer los dos conceptos anteriores con algunos giros animados como lo hizo Louis Hoebregts en su proyecto Text to Particles.

A diferencia de la solución de Tamino Martinius, aquí los puntos tienen diferentes radios y diferentes colores. Además, puede cambiar el texto configurándolo usando la entrada. El cursor del mouse tiene un comportamiento suave y gentil que dispersa a la multitud y provoca una pequeña perturbación en el patio de recreo. Esta es una demostración realmente agradable a la vista.

Ver el Pen Text a partículas por Louis Hoebregts

Bolas y Gravedad

El efecto repelente se puede combinar fácilmente con otras soluciones basadas en la física para lograr resultados sobresalientes. Considere Bolas y Gravedad.

El nombre del proyecto lo dice todo. La gravedad, así como el efecto repelente, se encuentran en el corazón del concepto, lo que hace que la experiencia sea intrigante.

A diferencia de los ejemplos anteriores, aquí debe agarrar el círculo y usarlo como un instrumento para empujar los otros círculos. Casi puedes golpear estas coloridas bolas planas, obligándolas a moverse. Además, debes luchar contra la gravedad, lo que hace que la experiencia sea aún más emocionante.

Ver el Bolígrafo BALLS&GRAVITY de Marco Dell'Anna

Atractor

Este proyecto de Marco Dell'Anna también se basa en la gravedad. Puedes controlarlo con el cursor del ratón. Úselo para mover partículas y reorganizar su posición.

Tenga en cuenta que, aunque las partículas cambien de posición, seguirán esforzándose por volver al círculo. Así que aquí puedes ver un cursor de ratón que juega el papel de un imán y, al mismo tiempo, una herramienta para alejar los puntos (al menos, temporalmente).

Ver el atractor de bolígrafos: MatterJS de Marco Dell'Anna

Activar

Activate es un bolígrafo excepcional creado por Gerard Ferrandez. Al igual que en el ejemplo anterior, el autor también ha optado por la gravedad. En esta ocasión se combina con un comportamiento fluido y por supuesto el efecto repelente. Como resultado, el proyecto nos atrae con su apariencia juguetona y su naturaleza lúdica.

Ver el Bolígrafo activar de Gerard Ferrandez

Moar Plasma

El efecto repelente también puede ser de mucha ayuda para las animaciones de partículas. Puedes hacerlos aún más emocionantes. Eche un vistazo a Moar Plasma.

Aquí, puedes ver una animación caótica donde el cursor del mouse asusta a todas las partículas empujándolas hacia diferentes lados. No solo puedes disfrutar de la demostración, sino también interactuar con ella.

Vea el plasma Pen Moar de John Chin-Jew

Partículas nevadas

Snowy Particles es otro excelente ejemplo en el que la animación tradicional de partículas recibe un impulso. Nat, el autor de la pluma, ha utilizado dos trucos.

Primero, el cursor del mouse tiene el poder de transformar simples puntos en copos de nieve, de modo que la escena se siente genuinamente mágica. En segundo lugar, se añade un pequeño efecto repelente que dispersa ligeramente la masa nevada para que puedas ver copos de nieve característicos. Simplemente fantastico.

Ver la nieve Pen partículas.js por Nat

Ahuyentadores

Otra área en la que el efecto repelente brinda beneficios y convierte fácilmente una escena aburrida en una extravagancia son los efectos de texto. Ya hemos visto cómo las palabras creadas con mil puntos se ven sobresalientes. Es hora de convertir los puntos en líneas y darle vida a todo con el efecto repelente. Considerar Ahuyentadores como punto por caso.

El proyecto presenta una palabra donde los símbolos están hechos de líneas cortas y delgadas que se dirigen a los espectadores. De esta manera, casi puedes sentir su naturaleza volumétrica. Tome el cursor del mouse y arrástrelo por el texto, y verá cómo las líneas comienzan a bailar.

Su comportamiento es suave y agradable a la vista, aunque el texto en sí se siente un poco nítido y agudo. Además, las líneas también se mueven solas, por lo que parece que hay una pequeña brisa que balancea partes de la composición. Como resultado, puede disfrutar de una verdadera obra maestra donde el texto simple dirige el espectáculo.

Ver los ahuyentadores de bolígrafos de Rein van der Woerd

Atracción por repulsión

A pesar de que el efecto repelente se usa para alejar los detalles de la composición, sigue siendo absolutamente magnético. No puedes quitarle los ojos de encima. Instantáneamente llama la atención con su comportamiento lúdico y empuja a los usuarios a interactuar con la escena.

El efecto repelente no está solo en su lucha por conquistar a la audiencia. Colabora a la perfección con otro tipo de animaciones y efectos dando lugar a soluciones únicas y llamativas.