Ifvisible.js Crosbrowser & lightweight way to check if user is looking at the page or interacting with it. Check out the Demo or read below for code example or Check Annotated Sorce // If page is visible right nowif( ifvisible.now() ){ // Display pop-up openPopUp();} Handle tab switch or browser minimize states ifvisible.on("blur", function(){ // example code here.. animations.pause();}); ifvisible.on("focus", function(){ // resume all animations animations.resume();}); ifvisible.js can handle activity states too, such as being IDLE or ACTIVE on the page ifvisible.on("idle", function(){ // Stop auto updating the live data stream.pause();}); ifvisible.on("wakeup", function(){ // go back updating data stream.resume();}); Default idle duration is 60 seconds but you can change it with setIdleDuration method ifvisible.setIdleDuration(120); // Page will become idle after 120 seconds
CSS3 Animate It | Animate Elements as you Scroll Sequencing If you want to have a set of animations start one after the other then you can set a sequence time in ms using "data-sequence" then define the order with "data-id". <div class='animatedParent' data-sequence='500'><h2 class='animated bounceInDown' data-id='1'>It Works!</h2><h2 class='animated bounceInDown' data-id='2'>This animation will start 500ms after</h2><h2 class='animated bounceInDown' data-id='3'>This animation will start 500ms after</h2></div> Offset This will make the make the CSS animation either start before or after it has entered the viewport by the specified ammount. <div class='animatedParent'data-appear-top-offset='-300'><h2 class='animated bounceInDown'>It Works! Animate Once Adding this will make sure the item only animates once and will not reset when it leaves the viewport. <div class='animatedParent animateOnce'><h2 class='animated bounceInDown'>It Works! Animation Speed <div class='animatedParent'><h2 class='animated bounceInDown slowest'>It Works! Delay (New)
ScrollMagic - The jQuery plugin for magical scroll interactions. Isotope Native Form Elements WOW.js Free Tools for Structuring & Optimizing Your CSS Code Frontend development has become more streamlined and quicker than ever before. Modern standards allow developers to create magnificent effects with just a few lines of code. But even beyond W3C specs are many online tools & webapps that make development a relatively painless procedure. The following tools have been made by developers, for developers, with the intention of expediting the development process. 1. Here’s a great example of simple and practical rolled into one neat web application. This is perfect for unifying your own stylesheets and for de-compressing minified CSS into a readable format. 2. E-mail newsletters are still going strong and prove to be a useful method of mass communication. For example, some e-mail clients strip CSS styles from the heading of a newsletter. SASS is a CSS preprocessor meant for saving time during CSS development. SASS and the more recent SCSS are based on the same underlying engine. 5. Neat freaks and code lovers will simply adore ProCSSor. 6. 7.
Infinity.js A ListView is a container that moves content in and out of the DOM on the scroll event. ListViews help keep repaint times of expensive pages down (and scrolling smooth) by making sure that there are never too many elements onscreen at a single time. ListViews excel at speeding up long lists of complex HTML elements, where new content is frequently appended to the end and existing content is rarely removed. ListViews are simple, and have several caveats: they can't be nested inside each other, and they can't have heights set via CSS. Note Because Firefox implements the unspecified behavior of <img> tags without src attributes differently than other browsers, if you're lazy-loading images inside of a ListView you should set their display to either block or inline-block, or Firefox will report the wrong height data to Infinity.