Search the Community
Showing results for tags 'infinity scroll'.
Found 2 results
-
Hi there! I want to implement a marquee effect in this existing script with left or right-direction options. and I also want features for example if the user drags this slide right to left after that this will automatically marquee right to left and if the user drags this slide left to right after that this will automatically marquee left to right. Can you please help me with this? Note: all existing feature also works fine just need the marquee effect with left and right scrolling feature. Thanks!
-
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>
