Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

123
Vistas
¿Cómo configuro react-tsparticles para obtener exactamente la misma animación que la página whois.domaintools.com?

Probé mucho con las opciones del complemento react-tsparticles pero no puedo lograr tener exactamente la misma animación que whois.domaintools.com.

Cuando se inicia mi página, las partículas están en todas partes dentro de las canevas, pero en la página que menciono, el grupo de partículas sigue al mouse (OnHover).

Aquí está la configuración de mi complemento:

 <Particles id="tsparticles" init={particlesInit} loaded={particlesLoaded} options={{ fpsLimit: 60, interactivity: { events: { onHover: { enable: true, mode: ["connect","grab"], }, onClick: { enable: false, }, resize: true, }, modes: { bubble: { distance: 400, duration: 1, opacity: 0.8, size: 40, }, push: { quantity: 4, }, repulse: { distance: 200, duration: 0.4, }, }, }, particles: { color: { value: "#ffffff", }, links: { color: "#ffffff", distance: 150, enable: true, opacity: 0.5, width: 1, }, collisions: { enable: true, }, move: { direction: "none", enable: true, outMode: "bounce", random: true, speed: 3, straight: false, }, number: { density: { enable: true, value_area: 800, }, value: 80, }, opacity: { value: 0.5, }, shape: { type: "circle" }, size: { random: true, value: 5, }, }, detectRetina: true, }} />

Nota: Es posible que la página whois que doy como ejemplo/referencia no esté usando el complemento tsparticles, mi objetivo es lograr la misma representación y no copiar su configuración.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Tenga en cuenta que whois.domaintools.com utiliza un elemento de lienzo al que se hace referencia con un gancho useRef y no utiliza la biblioteca de partículas. Aunque es posible que pueda acercarse a reflejar el mismo efecto, probablemente sea imposible reflejarlo al 100%.

Llaman a su efecto Spiders y se pueden encontrar en: https://whois.domaintools.com/images/webpack-whois-landing/static/js/Components/Spiders/Spiders.js

Editar: la biblioteca de partículas proporciona algunas opciones de desplazamiento, pero ninguna que se adapte a lo que está buscando. Estos se pueden encontrar en sus documentos flotantes . Creo que si tiene la intención de usar Particles, tendrá que ceder en sus limitaciones en comparación con el componente personalizado de herramientas de dominio.

Encontré una versión muy similar de la versión de herramientas de dominio: https://codepen.io/MarcoGuglielmelli/pen/lLCxy . Nuevamente, depende de si el uso de Partículas es obligatorio o no.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda