1

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?

5
  • 5
    El problema que veo es que las imágenes no se cargan hasta que se necesitan, con lo que la primera vez que se hace el ciclo va a saltos. Cuando se repite el bucle, todo va suave. Deberías intentar precargar las imágenes. el 28 mar. 2019 a las 14:38
  • 2
    ¿Podrías incluir el HTML también? Así podríamos ver el problema directamente en la pregunta (si necesitas imágenes puedes usar servicios como placehold.it o lorempixel.com)
    – Alvaro Montoro
    el 28 mar. 2019 a las 14:40
  • hola Alvaro, disculpa actualice con el html. Gracias
    – jofret
    el 28 mar. 2019 a las 15:51
  • Hola pablo, gracias, algo así imaginaba, queria una opinion experta. Dime algo asi tambien lo soluciona? ihatetomatoes.net/demos/scrollmagic-templates/…. Gracias
    – jofret
    el 28 mar. 2019 a las 15:53
  • Hay algún motivo por el que tengas que hacer la animación tu y no puedas usar un slider externo? Porque esto con slick slider no te sucede, por ejemplo. el 28 mar. 2019 a las 15:54

1 respuesta 1

3

Como indica @PabloLozano en los comentarios, es la carga de las imágenes.

Según la publicación JavaScript Preloading Images (en inglés), crear una imagen con new Image(), y almacenar la variable en otra de alcance global para que el navegador no la borre de memoria, permite cargarlas.

var imagenes = [];
function precarga() {
    for (var i = 0; i < arguments.length; i++) {
        imagenes[i] = new Image();
        imagenes[i].src = precarga.arguments[i];
    }
}

precarga(
    "../images/1.jpg",
    "../images/2.jpg",
    "../images/3.jpg"
)
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);
    }
    
  }

Si la primera imagen fuera muy pesada y este método, que precargaría el resto de imagenes por ver, no la carga a tiempo, podrias poner medidas antiflickering que consiste en ocultar el body durante un periodo de tiempo para que haya cargado la primera y luego mostrarlo.

1
  • 1
    Hola Muchas gracias, quedó bien con eso, creo que puedo buscar la solucion de antiflickering para que quede 100% ok. Muchas Gracias!!
    – jofret
    el 28 mar. 2019 a las 17:54

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.