Share Posted October 15, 2014 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> Link to comment Share on other sites More sharing options...
Share Posted October 16, 2014 On a large screen it won't start unless you resize it. 1 Link to comment Share on other sites More sharing options...
Share Posted October 16, 2014 Hey B, Another nice effect. Glad to see you put GSAP to good use and are sharing with the community. Keep 'em coming. And to elaborate on Blake's note, I'm on a 2560 x 1440 monitor and had to shrink my browser window to enable the scrolling. Carl Link to comment Share on other sites More sharing options...
Author Share Posted October 16, 2014 Hi Blake and Carl, Many thanks for the feedback! Issue solved. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now