Search the Community
Showing results for tags 'infinity scroll'.
Found 1 result
-
Infinity Scrolling: load the image when it’s (about to appear) in viewport. Excellent for loadspeed. To show the loaded image with nice effect, we use GreenSock! Link to demo http://front-end.codes/gsap/infinity/ <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta author="Benny Polak"/> <title>Infinity Scrolling</title> <style> body { margin: 0; padding: 0; } #information { position: fixed; width: 100%; padding-top: 10px; padding-bottom: 10px; font-size: 11px; background-color: #333; color: white; border-bottom: 1px solid black; font-family: tahoma, arial; z-index: 999; } #infinity-container { padding-top: 150px; position: relative; width: 353px; height: auto; margin: 0 auto; } p { margin-left: 40px; } .newImage { opacity: 0; } </style> </head> <body> <!-- HTML --> <div id="information"> <p>Dev: Benny Polak<br /> <strong>Infinity Scrolling with GreenSock</strong><br /><br /> Try it: scroll down<br /><br /> Images loaded and deployed in the DOM: <span id="image-count"></span></p> </div> <div id="infinity-container"> <!-- Images will be deployed here by JavaScript --> </div> <!-- // HTML --> <!-- JavaScript --> <script type="text/javascript" src="js/greensock/TweenMax.min.js"></script> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script> (function($){ var InfinityScroll = new Object(), m_ = 'model', v_ = 'view', c_ = 'controller'; InfinityScroll.model = { imageWidth: 353, imageHeight: 256, totallImages: 26, lastLoaded: 0 } InfinityScroll.view = { loadNextImage: function() { InfinityScroll[m_].lastLoaded++; var imageId = Math.floor(Math.random() * 1E20); if (InfinityScroll[m_].totallImages >= InfinityScroll[m_].lastLoaded) { InfinityScroll[v_].insertImage(imageId); TweenMax.to($("#image-"+imageId), 2, { opacity: 1, rotation: 360, ease: Back.easeOut, transformOrigin: "left top" }) } }, insertImage: function(imageId) { $('<img class="thisImage newImage" style="width: '+InfinityScroll[m_].imageWidth+'; height: '+InfinityScroll[m_].imageHeight+'; " id="image-'+imageId+'" src="images/'+InfinityScroll[m_].lastLoaded+'.jpg">').appendTo($("#infinity-container")); $("#image-count").text(InfinityScroll[m_].lastLoaded); } } InfinityScroll.controller = { init: function() { InfinityScroll[c_].trackClient(); }, trackClient: function() { var totalImagesHeight = $(".thisImage").length * InfinityScroll[m_].imageHeight; var currentViewport_bottom = ($(window).height() + $(window).scrollTop()) if ( totalImagesHeight < currentViewport_bottom ) { var missingImages = parseInt( ( (currentViewport_bottom - totalImagesHeight) / InfinityScroll[m_].imageHeight ) * 2); for (var i = 1; i <= missingImages; i++) { if (InfinityScroll[m_].totallImages >= InfinityScroll[m_].lastLoaded) { InfinityScroll[v_].loadNextImage(); // insert one image - no tweening } } } setTimeout(InfinityScroll[c_].trackClient, 10); } } $(document).ready(InfinityScroll[c_].init); })(jQuery) </script> <!-- // JavaScript --> </body> </html>
