background preloader

ScrollReveal.js

ScrollReveal.js
Related:  Plugins Interactive

p5.js This page walks you through setting up a p5.js project and making your first sketch. If you are using the p5 editor, you can skip to the Your First Sketch section. Processing users may want to check out the Processing transition tutorial. Download and File Setup The easiest way to start is by using the empty example that comes with the p5.js complete download. If you look in index.html, you'll notice that it links to the file p5.js. Alternatively, you can link to a p5.js file hosted online. A sample HTML page might look like this: Environment You can use the code editor of your choice. Open Sublime. Click on your sketch.js file and it will open on the right where you can edit it. Open the index.html file in your browser by double clicking on it in your file manager or type: in the address bar to view your sketch. Your First Sketch In your editor, type the following: function setup() { } function draw() { ellipse(50, 50, 80, 80);} What Next?

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)

Timeline JS - Beautifully crafted timelines that are easy, and intuitive to use. Isotope Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly. Downloads Project Source Contribute Standard Select Turns This Into This Multiple Select <optgroup> Support Single Select with Groups Multiple Select with Groups Selected and Disabled Support Chosen automatically highlights selected options and removes disabled options. Single Select Multiple Select Hide Search on Single Select The disable_search_threshold option can be specified to hide the search input on single selects if there are n or fewer options. Default Text Support Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. Note: on single selects, the first element is assumed to be selected by the browser. No Results Text Support Setting the "No results" search text is as easy as passing an option when you create Chosen: Limit Selected Options in Multiselect You can easily limit how many options the user can select: Right-to-Left Support

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.

Related:  outils web