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

<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> </li> <li> <div class="thumb"> <img src="https://placeimg.com/550/368/people" 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/tech" 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> </ul> </div>
.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%); } } .image3 { width: 100%; z-index: 1; } #wal-1 { background: url('https://www.whatsuplife.in/gurgaon/blog/wp-content/uploads/2014/11/cc1.jpg'); background-attachment: fixed; }
$(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"); } }); }); })

Related: See More


Questions / Comments: