1

Tengo 4 Elementos en html en una columna de todo el ancho y alto del <div class="container"> , necesito que con jquery me anime los 4 elementos, con una animación de entrada de los 4 elementos primero el bienvenido, se desvanece y luego se pone arriba dentro de la columna, luego entra el logo y se traslada a la izquierda, luego viene la firma y este va a la derecha y por último entra el logo de la escuela y va a la derecha despues de la firma, esa es toda la animación. Lo estoy haciendo con bootstrap 3 y en wordpress, y en este wordpress tengo visual composer con un theme desactualizado llamado: scent no soporta guttenberg, y poseo dos elementos para esa animación el html puro y el js puro que introducen código dentro del <body>, y también tengo la posibilidad de dar un ID o un CLASS a los elementos.

Esto es lo que tengo por el momento:

    <!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!--BOOTSTRAP CSS LIBRARY-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!--BOOTSTRAP CSS LIBRARY-->
    <link rel="stylesheet" href="css/estilos.css">
    <title>Animacion de Entrada Grupo Empresarial SKY</title>
  </head>
  <body>
    <div class="container-fluid fondo">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
          <img src="img/bienvenido.jpg" alt="imagen-bienvenido" id="bienvenido" class="bienvenido-css">
          <img src="img/logo.png" alt="imagen-logo" id="logo" class="logo-css">
          <img src="img/firma.jpg" alt="imagen-firma" id="firma" class="firma-css">
          <img src="img/escuela.png" alt="imagen-academia" id="escuela" class="escuela-css">
        </div>
      </div>
    </div>


    <script src="js/app.js"></script>
    <!--BOOTSTRAP JS LIBRARY-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <!--BOOTSTRAP JS LIBRARY-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </body>
</html>

La hoja de js:

    $( document ).ready(function() {
  $(#bienvenido).show();
  $(#bienvenido).animate({top:"+=100px"},2000);
  $(#logo).show();
  $(#logo).animate({ right: "+=100px" }, 2000 );
  $(#firma).show();
  $(#firma).animate({left:"+=100px"},2000);
  $(#escuela).show();
  $(#escuela).animate({left:"+=200px"},2000);
});

La hoja de CSS:

.fondo{background-color: white;}
.logo-css{display:none;z-index:0;width: 260px;height: 260px;}
.firma-css{display: none;z-index:0;}
.escuela-css{display: none;z-index:0;}
.bienvenido-css{display:none;z-index:0;}

Eso es todo lo que tengo por el momento actualmente estoy completando por medio de la documentación de jquery, css, html. Solo necesito que me guíen el resto lo hago yo.

1 respuesta 1

4

Primero, tu código JQuery tiene unos pequeños detalles, cuando llamas un elemento por su id, necesitas encerrarlo entre comillas por ejemplo $("#bienvenido").show();, de lo contrario te va a dar error.

Para que la funcion animate funcione correctamente, tus elementos html necesitan tener la propiedad position:relative o position:absolute, de lo contrario no podrán animarse.

Por ultimo, para que tus animaciones se ejecuten unas después de otras necesitas anidar las funciones, para que una vez terminada una, ejecute otra.

$( document ).ready(function() {
  $("#bienvenido").show();
  $("#bienvenido").animate({top:"+=100px"},2000, function() {
    $("#logo").show();
  	$("#logo").animate({ right: "+=100px" }, 2000, function() {
    	$("#firma").show();
  	    $("#firma").animate({left:"+=100px"},2000, function() {
      	  $("#escuela").show();
  		  $("#escuela").animate({left:"+=200px"},2000);
      });
    });
  }); 
});
.fondo{background-color: white;}
.logo-css{display:none;z-index:0;width: 260px;height: 260px; position: relative;}
.firma-css{display: none;z-index:0;position: relative;}
.escuela-css{display: none;z-index:0;position: relative;}
.bienvenido-css{display:none;z-index:0;position: relative;}
<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!--BOOTSTRAP CSS LIBRARY-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!--BOOTSTRAP CSS LIBRARY-->
    <link rel="stylesheet" href="css/estilos.css">
    <title>Animacion de Entrada Grupo Empresarial SKY</title>
  </head>
  <body>
    <div class="container-fluid fondo">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
          <img src="img/bienvenido.jpg" alt="imagen-bienvenido" id="bienvenido" class="bienvenido-css">
          <img src="img/logo.png" alt="imagen-logo" id="logo" class="logo-css">
          <img src="img/firma.jpg" alt="imagen-firma" id="firma" class="firma-css">
          <img src="img/escuela.png" alt="imagen-academia" id="escuela" class="escuela-css">
        </div>
      </div>
    </div>


    <script src="js/app.js"></script>
    <!--BOOTSTRAP JS LIBRARY-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <!--BOOTSTRAP JS LIBRARY-->
  </body>
</html>

Espero y te de el apoyo que necesitas.

Tengo otra cuestion mejor publico el codigo.

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!--BOOTSTRAP CSS LIBRARY-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!--BOOTSTRAP CSS LIBRARY-->
    <link rel="stylesheet" href="css/estilos.css">
    <title>Animacion de Entrada Grupo Empresarial SKY</title>
  </head>
  <body>
    <div class="container-fluid fondo">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 tableroEncabezado">

        </div>
      </div>
      <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-12 tableroLogo">

        </div>
        <div class="col-lg-4 col-md-4 col-sm-12 tableroFirma">

        </div>
        <div class="col-lg-4 col-md-4 col-sm-12 tableroEscuela">

        </div>
      </div>
    </div>
    <!--IMAGENES
    <img src="img/1.jpg" alt="imagen-bienvenido" id="bienvenido" class="bienvenido-css">
    <img src="img/2.png" alt="imagen-logo" id="logo" class="logo-css">
    <img src="img/3.jpg" alt="imagen-firma" id="firma" class="firma-css">
    <img src="img/4.png" alt="imagen-academia" id="escuela" class="escuela-css">
    -->
    <!--IMAGENES-->
    <!--BOOTSTRAP JS LIBRARY-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <!--BOOTSTRAP JS LIBRARY-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

el JS:

$(function() {
  //imagenBienvenida();
  animacionPorCeldas();
});

//Animacion con animate
/*function animacion(){
 $("#1").animate({top:"+=100px"},2000, function() {
   $("#2").animate({ right: "+=100px" }, 2000, function() {
       $("#3").animate({left:"+=100px"},2000, function() {
       $("#4").animate({left:"+=200px"},2000);
     });
   });
 });
}*/
//Animacion con animate

function animacionPorCeldas(){
  $(".tableroEncabezado").append("<img src='img/1.jpg' alt='imagen-bienvenido' id='bienvenido' class='bienvenido-css'>").fadeIn();

  //$("#1").fadein("",function(){

  //}).animate({
    //right:"+=400px",
    //height:"300px",
    //width:"300px"
  //},5000);
}

//function imagenBienvenida(){
  //$(".tableroEncabezado").append("<img src='img/1.jpg' alt='imagen-bienvenido' id='bienvenido' class='bienvenido-css'>");
  //$(".tableroLogo").append("<img src='img/2.png' alt='imagen-logo' id='logo' class='logo-css'>");
  //$(".tableroFirma").append("<img src='img/3.jpg' alt='imagen-firma' id='firma' class='firma-css'>");
  //$(".tableroEscuela").append("<img src='img/4.png' alt='imagen-academia' id='escuela' class='escuela-css'>");
//}

el css:

.fondo{background-color: white;}
.logo-css{width: 260px;height: 260px; position: relative;}
.firma-css{position: relative;width: 260px;height: 260px;}
.escuela-css{position: relative;width: 260px;height: 260px;}
.bienvenido-css{position: relative;}

El punto es este como hago para agregar el elemento tableroEncabezado y con un fadeIn?

$(".tableroEncabezado").append("<img src='img/1.jpg' alt='imagen-bienvenido' id='bienvenido' class='bienvenido-css'>").fadeIn();

Gracias por la aclaracion.

11
  • Gracias por la ayuda, de inmediato probare el codigo. el 2 oct. 2019 a las 17:20
  • Como hago para poner en una sola columna varios objetos y que no escalen sino que esten uno superpuesto sobre otro. el 2 oct. 2019 a las 19:50
  • Ha que te refieres?, no entiendo. el 2 oct. 2019 a las 22:40
  • Es decir necesito poner varias imagenes en un solo contenedor pero que no se esparcen sino que se agrupen en un solo espacio, y ya despues que se muevan por animacion. el 3 oct. 2019 a las 21:44
  • Perdon pero me toco editar lo que habia puesto como respuesta...cual era la pagina que me habias compartido, esta vez si podre verla de inmediato, estoy laborando. el 4 oct. 2019 a las 14:53

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.