Efecto Sticky o Video Flotante mientras te desplazas verticalmente en una Página Web

Tutoriales

Demo Github

En estos últimos meses hemos visto en algunas redes sociales y plataformas que soportan la reproducción de videos mientras estas navegando o desplazándote hacia abajo o arriba de la página, entre ellas se encuentran Facebook y Youtube, si eres desarrollador y estas interesado en aplicar este efecto a tus proyectos, en este tutorial te enseñaremos como hacerlo, vamos con el tutorial.

Entendemos que cuando sacaron esta nueva forma de ver videos, fue para mejorar la experiencia del usuario (UX) en cada plataforma, con el paso de los meses han ido realizando mejoras en el sistema de video flotante y parece que aún lo siguen mejorando, para que tengas una idea de lo que hablamos mira el siguiente ejemplo en la plataforma Facebook (El efecto Drag and Drop no lo incluimos en este tutorial, pero lo puedes hacer, por ejemplo con la funcionalidad Draggable de jQuery UI):

Para realizar este efecto solamente haremos uso de HTML, CSS y jQuery (Librería Javascript).

Lo primero que haremos será crear los estilos CSS para darle el aspecto y estilos a nuestra vista HTML, creamos un archivo llamado estilos.css y agregamos las siguientes propiedades, puedes ver que hay comentarios en el código CSS, con estos comentarios explicamos que hace cada propiedad CSS

Bien ahora pasaremos a crear un archivo llamado app.js en donde colocaremos nuestro código jQuery con funciones para darle vida a nuestro video flotante o sticky.

Igualmente que el archivo CSS, en este archivo Javascript, colocamos comentarios en donde explicamos que hace cada línea del código

Por último creamos nuestra vista en donde se visualizarán nuestros elementos de la aplicación, también agregamos comentarios en el código HTML para especificar que hace cada elemento

Abrimos el proyecto y tenemos nuestro video flotante o Sticky

Puedes ver la Demo que colocamos al inicio del artículo y también colocamos el repositorio Github por si necesitas el código fuente.

Notas

  • Los métodos y funciones de jQuery usados en este tutorial pueden quedar inutilizables, esto no depende de nosotros si no de los Desarrolladores que dan Soporte a jQuery.
  • Con este ejemplo base puedes hacer mejoras o aplicar otras funcionalidades a tu video flotante.

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required