"lazy load section scroll effect"
Bootstrap 3.3.0 Snippet by imsachin

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <!DOCTYPE html> <html lang="en"> <head> <title>HTML</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!--[if IE]> <link href="~/Content/NewHomePage/all-ie-only.css" rel="stylesheet" /> <![endif]--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <section> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> <div class="module"></div> </section> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="custom.js"></script> <script> (function($) { $.fn.visible = function(partial) { var $t = $(this), $w = $(window), viewTop = $w.scrollTop(), viewBottom = viewTop + $w.height(), _top = $t.offset().top, _bottom = _top + $t.height(), compareTop = partial === true ? _bottom : _top, compareBottom = partial === true ? _top : _bottom; return ((compareBottom <= viewBottom) && (compareTop >= viewTop)); }; })(jQuery); var win = $(window); var allMods = $(".module"); allMods.each(function(i, el) { var el = $(el); if (el.visible(true)) { el.addClass("already-visible"); } }); win.scroll(function(event) { allMods.each(function(i, el) { var el = $(el); if (el.visible(true)) { el.addClass("come-in"); } }); }); </script </body> </html>
@import "compass/css3"; * { @include box-sizing(border-box); } section { background: #eee; max-width: 600px; margin: 0 auto; padding: 20px; overflow: hidden; } .module { width: 45%; min-height: 200px; background: white; position: relative; float: left; padding: 20px; margin-right: 4%; margin-bottom: 4%; &:nth-child(even) { margin-right: 0; } box-shadow: 0 1px 3px rgba(black, 0.2); } body { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/blurry-blue.jpg); background-size: cover; padding: 30px; } .come-in { transform: translateY(150px); animation: come-in 0.8s ease forwards; } .come-in:nth-child(odd) { animation-duration: 0.6s; } .already-visible { transform: translateY(0); animation: none; } @keyframes come-in { to { transform: translateY(0); } }

Related: See More

Light Bootstrap Dashboard PRO React
Team Design Section with Pure CSS Effect
Lazy Loading Images with placeholders
Fancy subscribe modal (md, lg) with delay functionality on page load

Questions / Comments: