"animation jquery"
Bootstrap 4.1.1 Snippet by kekknka

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="main-animation"> <div class="container"> <div class="row"> <div class="col-md-12 animation"> <div class="container"> <div class="row"> <div class="col-md-12"> <!--<button class="btn btn-primary" id="animate">Iniciar animación</button>--> </div> </div> </div> <br> <div class="container show"> <div class="row panel" data-panel="1" id="panel_1" style="background-color: #fff;z-index: 2;"> <div class="col-md-8 caja1"> <h1 class="titulo-osito">ANIMACIÓN</h1> </div> <div class="col-md-4 caja2"> <div class="osito"></div> </div> <br><br> <div class="col-md-12"> <div class="caja-abajo"> <input data-next="1" class="btn btn-primary next-animation" value="Siguiente"> <input class="btn btn-success" id="animate" value="Iniciar animación"> </div> </div> </div> <div class="row panel" data-panel='2' id="panel_2" style="background-color:bisque;z-index: 1;"> <div class="col-md-12"> <div class="intro"> <h1 class="titulo-intro">ANIMACIONES PERRONAS</h1> <hr class="linea-intro"> <h1 class="subtitulo-intro">¡Con mucho estilo!</h1> </div> </div> <div class="col-md-12"> <div class="caja-abajo"> <input data-next="2" class="btn btn-primary next-animation" value="Siguiente"> <input class="btn btn-success" id="animate2" value="Iniciar animación"> </div> </div> </div> </div> </div> </div> </div> </div>
/*============ IMPORT FONTS ==============*/ @import url('https://fonts.googleapis.com/css?family=Oswald&display=swap'); @import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap'); /* ======================================= */ body{ padding: 0px; margin: 0px; font-family: 'Roboto', sans-serif; } .animation{ margin-top: 20px; } .show{ position: relative; border: 3px dashed red; padding-left: 0px !important; padding-right: 0px !important; overflow: hidden; min-height: 100vh; margin-bottom: 20px; } .panel{ position: absolute; width: 100%; height: 100vh; margin: 0px; padding: 0px; } /* PRIMERA ANIMACION */ .caja1 .titulo-osito{ top: 180px; left: -1000px; position: relative; text-align: right; font-size: 80px; background-color: #fff; padding: 3px; z-index: 10; } .osito{ background-image: url(https://media1.tenor.com/images/d8d81d0c8df88aac295990c32f29e9c9/tenor.gif?itemid=12498646); background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; left: -1200px; top: 180px; width: 100px; height: 100px; background-color: #000; } /* SEGUNDA ANIMACION */ .intro{ position: relative; } .titulo-intro{ position: relative; top: 180px; font-size: 50px; font-weight: bold; text-align: center; /* ---- animation --- */ opacity: 0; } .linea-intro{ position: relative; top: 180px; border: 2px solid black; /* ---- animation --- */ width: 0%; } .subtitulo-intro{ position: relative; font-family: 'Pacifico', cursive; text-shadow: -5px -5px 5px #aaa; top: 180px; font-size: 50px; font-weight: bold; text-align: center; /* ---- animation --- */ top: -200px; } .caja-abajo{ position: absolute; bottom: 20px; }
$(document).ready(function(){ $('.next-animation').click(function(){ var next = $(this).attr('data-next'); next = "#panel_" + next; $(next).slideUp("slow"); }); $('#animate').click(function(){ $('.titulo-osito').css("left","-1000px"); $('.osito').css("left","-1200px"); // --------------------------------------- $('.titulo-osito').animate({left: "150px",}, 1000); $('.osito').animate({left: "0px"}, 1000); // ---------------------------------------- $('.titulo-osito').animate({left: "0px",}, 1000); }); $('#animate2').click(function(){ $('.titulo-intro').css("opacity","0"); $('.titulo-intro').animate({opacity: "1",}, 1500); setTimeout(function(){ $('.linea-intro').animate({width: "80%",}, 1500); setTimeout(function(){ $('.subtitulo-intro').animate({top: "0",}, 1500); },1000); }, 1000); }); });

Related: See More


Questions / Comments: