Este artículo describe cómo implementar una página de inicio de sesión con un video de fondo atractivo. La ventana del navegador se puede ampliar a voluntad y tanto el video de fondo como el componente de inicio de sesión en primer plano se pueden adaptar perfectamente. llene siempre la ventana y el componente de primer plano siempre podrá estar centrado, el contenido del vídeo siempre se conservará al máximo y se podrá obtener el mejor efecto visual
Este artículo describe cómo implementar una página de inicio de sesión con un video de fondo genial, la ventana del navegador se puede estirar a voluntad, el video de fondo y los componentes de inicio de sesión de primer plano se pueden adaptar perfectamente, el video de fondo siempre puede llenar la ventana, el componente de primer plano siempre está centrado, el contenido del video es Siempre se conserva al máximo y se puede obtener el mejor efecto visual. Y basado en el grupo familiar Vue.js 2.0. El efecto específico se muestra en la siguiente figura:
El efecto final se puede ver al final del artículo.
1. Métodos de implementación existentes de páginas web de videos de fondo
Existe un buen sitio web "Coverr" en el extranjero, que proporciona tutoriales completos y recursos de video para ayudar a los desarrolladores de aplicaciones para el usuario a crear fondos geniales. La página de inicio del video y el ejemplo del efecto del sitio web se muestran a continuación:
El tutorial es el siguiente:
De la imagen y mi práctica, se pueden extraer los siguientes puntos:
Este tutorial utiliza jQuery. Como queremos usar Vue.js, jQuery se puede reemplazar por completo.
Los códigos CSS y JavaScript de este tutorial son demasiado redundantes.
Ejecute el ejemplo directamente y descubra que el efecto no es bueno. Cuando la ventana del navegador se estira a voluntad, el video de fondo no puede ajustarse perfectamente "aparecerán bordes negros y otros defectos", y el efecto no es bueno. como se esperaba.
2. Diseñe una página web con videos de fondo perfecta
Primero cree un proyecto usando vue-loader basado en la herramienta de andamio vue-cli. Una vez completada la construcción, cree ".vue. ", como archivo de plantilla de la página de inicio de sesión, los detalles específicos no se repetirán. El contenido de esta sección se limita al archivo .vue.
2.1 Plantilla HTML
En función de las necesidades, la plantilla HTML proporcionada por Coverr se ha modificado ligeramente. Los resultados son los siguientes:
<. /p> < source src="PATH_TO_MP4 " type="video/mp4"/> El navegador no admite la etiqueta de video. Se recomienda actualizar el navegador. El navegador no admite la etiqueta de video. Se recomienda actualizar el navegador.
La etiqueta de vídeo es una etiqueta HTML5 estándar que proporciona dos formatos de vídeo y un marcador de posición de imagen. El vídeo de fondo se reproducirá automáticamente después de cargarlo.
La plantilla original proporcionada por Coverr se puede depurar directamente. La página solo muestra imágenes pero no puede reproducir videos. Este problema se resuelve usando la directiva v-if de Vue.js.
2.2 CSS
El código CSS de la plantilla original se ha simplificado enormemente. El código CSS modificado es el siguiente:
.video-container {
posición: relativa;
altura: 100vh;
desbordamiento: oculto;
}
.video-container .poster img,
.video-container video {
z- index : 0;
posición: absoluta;
}
.video-container .filter {
índice z: 1; /p>
posición: absoluta;
fondo: rgba(0, 0, 0, 0.4);
}
Desde la mayoría de los estilos han sido modificados globalmente por el proyecto, solo hay tres estilos dedicados a esta plantilla. La breve descripción es la siguiente:
El contenedor p llena la ventana del navegador
La máscara p. se encuentra encima del vídeo para funcionar como una máscara.
2.3 Código JavaScript
La parte más importante del código anterior es el monitoreo del evento de cambio de tamaño del objeto de ventana. Cuando cambia el tamaño de la ventana, el programa modifica simultáneamente el tamaño del vídeo y enmascara el dominio para que el lado más estrecho del vídeo siempre llene la ventana del navegador, mientras que los lados largos se cortan uniformemente en los lados izquierdo y derecho.
Al hacer esto, el video no se estirará. El centro del video siempre se ubica en el centro del navegador. Cuando la ventana del navegador se estira a voluntad, el contenido del video siempre se conserva. al máximo y puede obtener el mejor efecto visual.
El efecto final es el siguiente:
Lo anterior es lo que compilé para todos, espero que sea útil para todos en el futuro.
Artículos relacionados:
Cómo implementar un retraso DIV de unos segundos antes de desaparecer o mostrarse en JS/jQuery
Cómo implementar un cuadro de diálogo de ocultación temporizada en jQuery
Utilice js nativo para realizar vínculos de tres niveles entre provincias y municipios