Hola buen día hice una animación para mi web con css3 pero veo que tiene fallas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- menu -->
<link href="css/menu.css" rel="stylesheet">
<!-- main -->
<link href="css/main.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<div class="wrapper-hedaer">
<?php include 'php/menu.php'; ?>
<div>
<div id="uno">
</div>
<div id="dos">
</div>
<div id="tres">
</div>
</div>
</div>
</header>
<div style="height:100vh">
hola
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$(window).scroll(function(){
var top = $(window).scrollTop();
if(top > 100){
$("#bs-example-navbar-collapse-1").children("ul").children("li").find("a").css({
"padding-top": "30px"
})
$(".navbar-header").find("#miLogo").addClass("NewClasslog").removeClass("deMiLogo")
} else {
$("#bs-example-navbar-collapse-1").children("ul").children("li").find("a").css({
"padding-top": "60px"
})
$(".navbar-header").find("#miLogo").addClass("deMiLogo").removeClass("NewClasslog")
}
})
/*************boton ingles/esañol************************/
$("#btn_idioma").on("click", function(e){
event.preventDefault();
if($(this).text()=="english"){
$(this).text("español");
$(".textoespanol").css({"display":"none"});
$(".textoIngles").fadeIn( 1000 );
} else {
$(this).text("english");
$(".textoIngles").css({"display":"none"});
$(".textoespanol").fadeIn(1000);
}
})
/***********************************************************/
})
</script>
</body>
</html>
header > div > div {
position:absolute;
overflow: hidden;
margin:auto;
display: block;
height: 100vh;
top:0;
left: 0;
right:0;
/**/
background-position: top center;
background-repeat:none-repeat;
background-size: cover;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-name: cambio1;
}
@keyframes cambio1{
from{
background-image:url("../images/1.jpg");
transform: scale(1,1);
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-o-transform: scale(1,1);
-ms-transform: scale(1,1);
}
14% {
background-image:url("../images/1.jpg");
transform: scale(1.1,1.1);
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
}
30% {
/*background-image:url("../images/1.jpg");
transform: scale(1,1);*/
background-image:url("../images/2.jpg");
transform: scale(1.1,1.1);
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
}
43%{
background-image:url("../images/2.jpg");
transform: scale(1,1);
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-o-transform: scale(1,1);
-ms-transform: scale(1,1);
}
57%{
background-image:url("../images/3.jpg");
transform: scale(1,1);
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-o-transform: scale(1,1);
-ms-transform: scale(1,1);
}
71%{
background-image:url("../images/3.jpg");
transform: scale(1.1,1.1);
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-o-transform: scale(1,1);
-ms-transform: scale(1,1);
}
100%{
background-image:url("../images/1.jpg");
transform: scale(1,1);
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-o-transform: scale(1,1);
-ms-transform: scale(1,1);
}
}
Pero tiene fallas cuando se realizan las transiciones hay saltos bruscos que se ven mal, en teléfono peor aun, ¿Es por error del código?.
Aquí se puede ver el efecto:
https://evelynmonteza.com/prueba/
saludos y gracias
Hola trate de adaptar de esta forma el codigo a lo que queria pero no funciona.
var imagenes = [];
window.addEventListener('load', precargaImagenes);
function precargaImagenes() {
for (var i = 0; i < arguments.length; i++) {
imagenes[i] = new Image();
imagenes[i].src = precargaImagenes.arguments[i];
}
//Cuando se terminan de cargar
var preload = document.querySelector('body');
preload.classList.remove('hidden');
console.log("aqui vamos")
}
precargaImagenes(
"images/1.jpg",
"images/2.jpg",
"images/3.jpg"
)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- menu -->
<link href="css/menu.css" rel="stylesheet">
<!-- main -->
<link href="css/main.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="hidden">
<header>
<div>
<?php include 'php/menu.php'; ?>
<div id="jofret">
<div id="uno">
</div>
<div id="dos">
</div>
<div id="tres">
</div>
</div>
</div>
</header>
<div style="height:100vh">
hola
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
pero no hace el preloader de primero tener el boddy hidden hasta que cargan las imagenes, o el codigo esta mal?