Bootstrap Snippet scroll down move content up using HTML CSS 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.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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="container">
    <div class="row slideanim">
        <ul class="list-grid-ul">
                <li>
                    <div class="thumb">
                        <img src="https://placeimg.com/550/368/animals" alt="gallery image or whatever" />
                    </div>
                    <div class="data">
                        <div><b>This is the title</b></div>
                        <div>01/01/2017</div>
                        <div>Lorem ipsum ding dong dang yo!</div>
                    </div>
                </li>
                <li>
                    <div class="thumb">
                        <img src="https://placeimg.com/550/368/arch" alt="gallery image or whatever" />
                    </div>
                    <div class="data">
                        <div><b>This is the title</b></div>
                        <div>01/01/2017</div>
                        <div>Lorem ipsum ding dong dang yo!</div>
                    </div>
                </li>
                <li>
                    <div class="thumb">
                        <img src="https://placeimg.com/550/368/nature" alt="gallery image or whatever" />
                    </div>
                    <div class="data">
                        <div><b>This is the title</b></div>
                        <div>01/01/2017</div>
                        <div>Lorem ipsum ding dong dang yo!</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
 .slideanim {
        visibility: hidden;
    }
    .slide {
        animation-name: slide;
        -webkit-animation-name: slide;
        animation-duration: 3s;
        -webkit-animation-duration: 2s;
        visibility: visible;
    }
    @keyframes slide {
        0% {
            opacity: 0;
            -webkit-transform: translateY(70%);
        }
        100% {
            opacity: 1;
            -webkit-transform: translateY(0%);
        }
    }
    -webkit-keyframes slide {
        0%;{
        opacity: 0;
        -webkit-transform: translateY(70%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
    }
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(){
  // Add smooth scrolling to all links in navbar + footer link
  $(".navbar a, footer a[href='#myPage']").on('click', function(event) {
    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();
      // Store hash
      var hash = this.hash;
      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 900, function(){
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
  $(window).scroll(function() {
    $(".slideanim").each(function(){
      var pos = $(this).offset().top;
      var winTop = $(window).scrollTop();
        if (pos < winTop + 700) {
          $(this).addClass("slide");
        }
    });
  });
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"scroll down move content up"
Bootstrap 4.0.0 Snippet by srinuyadav509

Related: See More

Questions / Comments:

"scroll down move content up" Bootstrap 4.0.0 Snippet by srinuyadav509

Related: See More

Questions / Comments:

"scroll down move content up"
Bootstrap 4.0.0 Snippet by srinuyadav509