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)
Unheap - A tidy repository of jQuery plugins ScrollMagic - The jQuery plugin for magical scroll interactions. 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.
Useful JavaScript Libraries and jQuery Plugins For Web Developers Advertisement If you have a problem and need a solution for it, chances are high that a JavaScript library or jQuery plugin exists that was created to solve this very problem. Such libraries are always great to have in your bookmarks or in your local folders, especially if you aren’t a big fan of cross-browser debugging. A JavaScript library isn’t always the best solution: it should never be a single point of failure for any website, and neither should a website rely on JavaScript making the content potentially inaccessible. Progressive enhancement is our friend; sometimes JavaScript won’t load properly, or won’t be supported — e.g. users of mobile devices might run into latency issues or performance issues with some JavaScript-libraries. Often large all-around JavaScript libraries such as jQuery might be an overkill, while tiny JavaScript micro-libraries could serve as good, “light” alternatives for a particular problem. Quick Overview: Web Forms and Input Validation Little Time-Savers