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. Commented 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. Commented el 2 oct. 2019 a las 19:50
  • Ha que te refieres?, no entiendo. Commented 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. Commented 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. Commented el 4 oct. 2019 a las 14:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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