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.