Bootstrap Snippet click scroll using HTML CSS Bootstrap Javascript

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 ---------->
 <link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet">
 <div class="page" id="page_1" data-next="page_2" style="background-color: #fcf9ea;background-image: url(https://cdnmundo2.img.sputniknews.com/images/107781/83/1077818377.jpg);">
       <div class="container">
           <div class="row">
               <div class="col-md-6">
                   <img src="https://cdn140.picsart.com/268642769009211.png?r1024x1024" width="150%;" alt="" class="img-galaxia">
               </div>
               <div class="col-md-6">
                   <div class="contenido">
                        <h1>Galaxias</h1>
                        <hr>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio repellat reiciendis vero aliquid explicabo eligendi doloremque quaerat perspiciatis aliquam impedit fugiat a minima, sint nostrum consequuntur nam. Tempora, magni doloribus.</p>
                   </div>
               </div>
           </div>
       </div>
    </div>
    <div class="page" id="page_2" data-next="page_3" style="background-color: #badfdb;display: none;background-image: url(https://emtstatic.com/2017/12/iStock-485367030.jpg);">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="contenido">
                        <h1>Planetas</h1>
                        <hr>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio repellat reiciendis vero aliquid explicabo eligendi doloremque quaerat perspiciatis aliquam impedit fugiat a minima, sint nostrum consequuntur nam. Tempora, magni doloribus.</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <img src="https://vignette.wikia.nocookie.net/warhammerrejects/images/1/13/Strineo.png/revision/latest?cb=20170218164822" width="150%;" alt="" class="img-planeta">
                    <img src="https://vignette.wikia.nocookie.net/halo/images/9/9d/PlanetReach.png/revision/latest?cb=20130104200402&path-prefix=es" width="20%;" alt="">
                </div>
            </div>
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
html, body {
    margin:0;
    padding:0; 
    height:100%;
}
.page{
    width: 100%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    overflow:hidden;
}
h1{
    color: #fff;
    font-size: 50px;
    font-family: 'Righteous', cursive;
}
hr{
    background-color: #fff;
    font-family: 'Righteous', cursive;
}
p{
    color: #fff;
    font-family: 'Righteous', cursive;
    font-size: 20px;
}
.img-galaxia{
    position: relative;
    width: 300%;
    top: -150px;
    left: -130%;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
$(window).ready(function(){    
    $('.page').click(function(){
        var id = "#" + $(this).attr('data-next');
        $(id).slideDown('slow');
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"click scroll"
Bootstrap 4.1.1 Snippet by kekknka

Related: See More

Questions / Comments:

"click scroll" Bootstrap 4.1.1 Snippet by kekknka

Related: See More

Questions / Comments:

"click scroll"
Bootstrap 4.1.1 Snippet by kekknka