Antes de nada os muestro mi código. Se trata de una introducción a una página web. La he hecho con un video y unos textos por encima para resumir de que trata, con sus botones de redes sociales... etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Intro con vídeo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="author" content="Pelayo">
<meta name="owner" content="Pelayo">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="IMAGES/logo-siade.png">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Montserrat:300">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
}
body,
html {
width: 100%;
height: 100%;
min-height: 667px;
min-width: 100%;
}
body {
font-family: 'Open Sans', Arial, sans-serif;
position: relative;
}
#zonaIntro {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#video {
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
position: absolute;
pointer-events: none;
filter: brightness(55%);
}
.centrado-porcentual {
position: relative;
height: auto%;
width: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#cajaQuotes {
padding: 0.5% 6%;
width: 100%;
height: 40;
text-align: center;
position: relative;
}
.centrado-porcentual h2 {
margin: 0;
position: relative;
font-family: 'Montserrat', sans-serif;
font-size: 70px;
color: white;
text-transform: uppercase;
}
.centrado-porcentual h2:nth-child(2),
.centrado-porcentual h2:nth-child(3) {
display: none;
}
#cajaSep {
width: 55px;
height: 3px;
background-color: white;
position: relative;
left: 50%;
transform: translate(-50%, 0%);
}
#eu {
position: relative;
left: 50%;
transform: translate(-50%, 0%);
padding: 0.5%;
margin: 0;
color: white;
width: 300px;
}
#eu p {
position: relative;
font-size: 11px;
margin: 0;
}
#flecha {
font-size: 40px;
color: white;
position: absolute;
left: 50%;
top: 90%;
transform: translate(-50%, -50%);
}
#flecha:hover,
#flecha:active,
#flecha:focus {
text-decoration: none;
}
#RRSS {
position: absolute;
Left: 85%;
top: 90%;
transform: translate(-50%, -50%);
border-bottom: 3px solid white;
padding: 7px;
width: 90px;
}
.redes {
width: 45%;
}
.red1 {
position: relative;
float: left;
}
.red2 {
position: relative;
float: right;
}
@media (min-width: 768px) and (max-width: 1199px) {
.centrado-porcentual h2 {
font-size: 60px;
}
#eu p {
font-size: 10px;
}
}
@media (max-width: 767px) {
.centrado-porcentual h2 {
font-size: 40px;
}
#cajaSep {
height: 2px;
}
#eu {
width: 200px;
}
#eu p {
font-size: 8px;
}
#RRSS {
border-bottom: 2px solid white;
}
}
@media (max-width: 480px) {
#RRSS {
width: 70px;
}
#flecha {
font-size: 30px;
}
}
</style>
</head>
<body>
<section id="zonaIntro">
<video id="video" autoplay loop muted poster="IMAGES/videoIntro.jpg">
<source src="https://www.siade.eu/VIDEOS/cabecera.mp4" type="video/mp4"> </video>
<div class="centrado-porcentual">
<div id="cajaQuotes">
<h2 class="quotes">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<h2 class="quotes">Integer ultricies dolor ac enim blandit dapibus ac id arcu.</h2>
<h2 class="quotes">Interdum et malesuada fames ac ante ipsum primis in faucibus.</h2> </div>
<div id="cajaSep"> </div>
<div id="eu">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies dolor ac enim blandit dapibus ac id arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc ullamcorper sem non erat consequat feugiat. Donec vel facilisis est. Donec vel ullamcorper sem. Curabitur a aliquam orci. Quisque in fringilla lorem. Aenean ullamcorper euismod est, at porta ligula posuere nec. Mauris sagittis vestibulum nisi et pulvinar.</p>
</div>
</div>
<a href="#zona2" id="flecha" class="fas fa-angle-double-down" aria-hidden="true"></a>
<div id="RRSS"> <img class="redes red1" src="https://www.siade.eu/IMAGES/in.png" alt="Cuenta linkedin"> <img class="redes red2" src="https://www.siade.eu/IMAGES/tw.png" alt="Cuenta twitter"> </div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
var vid = document.getElementById("video");
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length).fadeIn(1300).delay(3400).fadeOut(1300, showNextQuote);
}
showNextQuote();
$(document).ready(function () {
setInterval(function () {
$('#flecha').animate({
top: '91%'
}, 400);
$('#flecha').animate({
top: '90%'
}, 400);
}, 0)
});
});
</script>
</body>
</html>
Mis preguntas son las siguientes:
- Cuando hago un análisis de mi sitio web, me pone que el contenido superior tarda en cargar, y supongo que es por utilizar javascript(jquery) al principio, con el cambio de textos. El video no creo que sea porque esta optimizado y ahora pesa muy poco. ¿Sería conveniente utilizar css para hacer esos cambios de texto?, y de ser así, ¿Cómo lo haría?.
- Me gustaría que esos textos, los h2, debido a la información que contengan (mas o menos palabras) no cambien de tamaño. Así no arrastraría al texto que esta situado debajo. ¿Qué debería hacer?. He pensado en meterlo todo dentro de un div y darle un tamaño fijo, pero no se hasta que punto eso será peligroso para el responsive design...
- ¿Algún consejo sobre el responsive?. Antes utilizaba queries a diestro y siniestro, ajustando diferente contenido al pixel. Al final en mi código tenía como 7 u 8 queries. He intentado hacerlo bien, y creo que estas son las "medidas estándar" que toda web responsive debe tener.
MODIFICACIÓN
- ¿Cómo podría ajustar el tiempo de cada frase, al tiempo total del video?. ¿Podría recoger la duración del video y dividirla entre tres?