Bootstrap Snippet animation jquery using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*============ 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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$(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);
    });
 
    
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"animation jquery"
Bootstrap 4.1.1 Snippet by kekknka

Related: See More

Questions / Comments:

"animation jquery" Bootstrap 4.1.1 Snippet by kekknka

Related: See More

Questions / Comments:

"animation jquery"
Bootstrap 4.1.1 Snippet by kekknka