Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

40
Vistas
How does Google Drive create this file drag animation in their website

When dragging multiple files in Google Drive, it does the slick animation where it compresses the files into a stack and displays a counter for the files in the top right corner. The answer I am looking for isn't about the exact CSS required for the animation, but I am looking for an answer that can describe the overall process of how this is done, beginning with the dragstart DOM event. From what I know, when an element starts to get dragged, the browser takes a bitmap screenshot of the element and uses that as the drag cursor image. I also know that you can set the drag image on the dragstart event, however, how are they dynamically generating and setting the drag image with the file name in it?

google drive drag animation demo GIF (2x)

7 months ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

It's not a drag image because if you move you cursor fast enough, you'd see that its speed is trying to catch up to you: it's position: fixed elements with the top: and left: (or translate or any number of methods) being from its initial coordinates to your mouse coordinates (mousemove event), and speed being transition: top 0.2, left 0.2.

7 months 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 empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.