software1

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


Los experimentos con lienzo son la charla de la ciudad hoy. Pueden verse no solo como conceptos en los populares parques infantiles para desarrolladores web, sino también como soluciones para proyectos reales. La variedad es sin duda sorprendente: desde animaciones de partículas primitivas basadas en complementos populares hasta ideas únicas que combinan herramientas modernas y probadas.

Hoy nos gustaría llamar su atención sobre el efecto repulsivo. Aunque tiene un comportamiento repelente, ciertamente tiene un carácter atractivo. Anime a los usuarios a jugar con los detalles del escenario empujándolos en diferentes direcciones o, en algunos casos, arrastrándolos a todos. Esto se convierte inmediatamente en el principal entretenimiento. Hace que la experiencia del usuario sea entretenida y emocionante.

Exploremos una colección de demostraciones inspiradoras de fragmentos de código para que puedas ver por ti mismo la tendencia única.

The Web Designer Toolbox

Número ilimitado de descargas: ¡1,000,000+ Temas, complementos, activos de diseño y más!

Esta demostración es una reminiscencia de una serie de cuerdas de guitarra a primera vista. Mueve el mouse sobre él y verás la magia. Las líneas comienzan a doblarse y deformarse, formando una pequeña bola.

Use el botón de radio a la derecha para controlar el efecto. Puede establecer el radio del área del mouse, agregar o reducir el número de líneas o cambiar el espacio entre cadenas. Tenga en cuenta la física. Está bien pensado y cuidadosamente reproducido.

Ver bolígrafo Líneas repelentes por Daniel Velasquez

El efecto repulsivo simplemente se ve fantástico 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 extremadamente popular para CodePen presenta un panel que acomoda cómodamente 30,000 pequeñas partículas.

Están muy juntos para crear una superficie densa. Mueva el puntero del mouse arriba, y verá los puntos que se le escapan. Aunque no desaparecen de la vista, son retenidos por el alcance del mouse. Por lo tanto, verá un círculo hueco relativamente grande en el que los puntos forman el límite.

Ver bolígrafo 30,000 partículas por Justin Windle

Si el marco rectangular simple no inspira tu creatividad, puedes hacerlo. Recoge todos estos puntos en caracteres, como Tamino Martinius en su proyecto interactivo Partícula "ha hecho.

Su demo contiene una palabra en la que cada letra se compone de cientos de puntos. Sopla con el puntero del mouse para condimentar las cosas. Hay un pequeño centro de control donde puede cambiar los parámetros del experimento y adaptarlos a sus preferencias.

Ver bolígrafo Logotipo de partícula interactiva por Tamino Martinius

Juguemos con el color y el tamaño Enriquezca los dos conceptos anteriores con algunos giros vivos, como lo hizo Louis Hoebregts en su proyecto Text to Particles ha hecho

En contraste con la solución de Tamino Martinius, los puntos aquí tienen diferentes radios y diferentes colores. También puede cambiar el texto configurándolo escribiendo. El puntero del mouse tiene un comportamiento suave y apacible que disipa a la multitud y provoca una pequeña molestia en el patio de recreo. Esta es una demostración realmente sensacional.

Ver Bolígrafo Texto a partículas por Louis Hoebregts

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

El nombre del proyecto lo dice todo. La gravedad y el efecto repulsivo forman el corazón del concepto y hacen que la experiencia sea fascinante.

En contraste con los ejemplos anteriores, tienes que agarrar el círculo aquí y usarlo como un instrumento para alejar los otros círculos. Casi puedes golpear estas coloridas bolas planas, forzándolas a moverse. También debes combatir la gravedad, lo que hace que la experiencia sea aún más emocionante.

Ver el lápiz BOLAS Y GRAVEDAD de Marco Dell y Anna

Este proyecto de Marco Dell & # 39; Anna también está reconstruyendo la gravedad. Puede controlarlo con el puntero del mouse. Use esta opción para mover partículas y reorganizar su posición.

Tenga en cuenta que si bien las partículas cambian de posición, todavía están ansiosas por volver al círculo. Entonces, aquí ve un puntero del mouse que desempeña el papel de un imán y, al mismo tiempo, una herramienta para alejar los puntos (al menos temporalmente).

Ver bolígrafo Atractor – MatterJS por Marco Dell y Anna

Activate es un bolígrafo excepcional de Gerard Ferrandez. Similar al ejemplo anterior, el autor ha optado por la gravedad. Esta vez se asocia con comportamiento líquido y, por supuesto, el efecto repelente. Como resultado, el proyecto nos atrae con su aspecto bullicioso y su estilo lúdico.

Ver el pin activar por Gerard Ferrandez

El efecto repelente puede ser muy útil en animaciones de partículas también. Puedes hacerlo aún más emocionante. Echa un vistazo a Moar Plasma.

Aquí puedes ver una animación caótica en la que el mouse disuade todas las partículas empujándolas en diferentes páginas. No solo puedes disfrutar de la demostración, también puedes interactuar con ella.

Ver Bolígrafo Plasma Moar por John Chin-Jew

Snowy Particles es otro gran ejemplo que da un impulso a la animación tradicional de partículas. Nat, el autor de la pluma, ha usado dos trucos.

Primero, el puntero del mouse puede convertir puntos simples en copos de nieve, haciendo que la escena se sienta realmente mágica. En segundo lugar, se agrega un pequeño efecto repelente que extiende las masas de nieve fácilmente para que pueda ver sorprendentes copos de nieve. Simplemente fantastico.

Ver Particle.js Snow por Nat

Otra área donde el efecto repulsivo trae beneficios y transforma fácilmente una escena aburrida en extravagancia son efectos de texto . , Ya hemos visto cómo las palabras que consisten en mil puntos se ven geniales. Es hora de convertir los puntos en líneas y condimentar las cosas con el efecto repulsivo. Considere el repelente como un punto en el caso.

El proyecto contiene una palabra en la que los símbolos consisten en líneas cortas y delgadas que se alinean con los espectadores. De esta manera, casi puedes sentir su naturaleza volumétrica. Pase el mouse sobre el texto y verá que las líneas comienzan a bailar.

Su comportamiento es suave y atractivo, aunque el texto en sí se siente un poco agudo y agudo. Además, las líneas también se mueven solas, haciendo que parezca que una pequeña brisa afecta partes de la composición. Como resultado, puede disfrutar de una verdadera obra maestra en la que un texto simple reproduce el espectáculo.

Ver bolígrafo Repelentes por Rein van der Woerd

Atracción por repulsión

Aunque el efecto repulsivo se usa para alejar los detalles de la composición, sigue siendo absolutamente magnético. No puedes quitarle los ojos de encima. Se destaca instantáneamente por su comportamiento lúdico y alienta a los usuarios a interactuar con la escena.

El efecto repulsivo no está solo en su lucha para ganar la audiencia. Funciona perfectamente con otros tipos de animación y efectos, creando soluciones únicas y llamativas.



Control de obras 3000 de Cea Ordenadores

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