"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

Awesome Landing Page
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: