<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);
});
});
