Tutorials Advanced Uploading Techniques — Part Two Continuing from our last tutorial, we discuss how to automatically pause and resume your uploads using the online and offline events. Advanced Uploading Techniques — Part One Uploading large files or over slow connections makes your uploads vulnerable. Web Audio API — Part Two Continuing from our previous tutorial, we now introduce the concepts of position, convolution and impulse responses. Web Audio API – Part One The Web Audio API is one of two new audio APIs designed to make creating, processing and controlling audio within web applications much simpler. requestAnimationFrame Learn the secret to silky-smooth JavaScript animation! Create an iPad optimised game HTML5 canvas is of course brilliant. Three.js part 1 – make a star-field Remember FastKat? Make an explosive firework display Creating fireworks using the HTML 5 canvas: both awesome and fun to do. Box2D JavaScript tutorials by Seth Ladd 31 days of canvas tutorials by Keith Peters
Protovis Protovis composes custom views of data with simple marks such as bars and dots. Unlike low-level graphics libraries that quickly become tedious for visualization, Protovis defines marks through dynamic properties that encode data, allowing inheritance, scales and layouts to simplify construction. Protovis is free and open-source, provided under the BSD License. It uses JavaScript and SVG for web-native visualizations; no plugin required (though you will need a modern web browser)! Protovis is no longer under active development.The final release of Protovis was v3.3.1 (4.7 MB). This project was led by Mike Bostock and Jeff Heer of the Stanford Visualization Group, with significant help from Vadim Ogievetsky. Updates June 28, 2011 - Protovis is no longer under active development. September 17, 2010 - Release 3.3 is available on GitHub. May 28, 2010 - ZOMG! October 1, 2009 - Release 3.1 is available, including minor bug fixes. April 9, 2009 - First release on Google Code. Getting Started
Online JavaScript beautifier jQuery Easing Plugin Description A jQuery plugin from GSGD to give advanced easing options. Please note, the easing function names changed in version 1.2. Please also note, you shouldn't really be hotlinking the script from this site, if you're after a CDN version you could do worse than try cdnjs.com Download Download the following: Example Click on any of the yellow headers to see the default easing method in action (I've set as easeOutBounce for the demo, just because it's obviously different). Select easing types for the demo first one for down, second one for up. The Clicker Updates 12/11/07 1.3 jQuery easing now supports a default easing mode. 04/10/07 1.2 Updated to include all methods from Robert Penners easing equations. 28/06/07 1.1.1 Updated the method to not overwrite the newly renamed 'swing', or the new 'linear' style coming in 1.1.3. 22/06/07 Rewritten the above to include callback syntax, nothing else has changed. Advertisements Need reliable hosting for your blog? Credits Donate Usage Default Custom
2D fluid dynamics It β delay fps Fluid dynamics. Cold and heavy fluid is blue and hot fluid is red. This script makes 2 It iterations every time step to calculate pressure. The Navier-Stokes equations for the fluid velocity u and the equation for temperature T of the fluid are: ∂t u = -(u·∇) u - (1/ρ)∇p + ν∇2u + f , ∇·u = 0 , ∂t T = -(u·∇)T + D∇2T + S .where ν is the kinematic viscosity of the fluid, ρ ≡ 1 is its density, p is pressure, S is the thermal source, f = (0, -βT) is the force term, β is buoyancy. This application is simple and funny (not sure if it is accurate and efficient). But I think that 3D ink droplet dynamics simulation is more suitable for WebCL :) Yang Chenglin sent me kindly this remark "I think when you advect something on staggered grid, different velocities should be used for different values. It is a good explanation of the droplet asymmetry! One more JS based Oliver's simple fluid dynamics simulator.
Textillate.js textillate.js A simple plugin for CSS3 text animations. Download on Github About Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text. Usage Simply include textillate.js and it's dependencies in your project to start creating unqiue effects. Credits Textillate.js is built on top of the simple, yet amazingly powerful animate.css and lettering.js libraries. Playground Grumpy wizards make toxic brew for the evil Queen and Jack. Dependencies Textillate.js depends on the following libraries: jQuery animate.css, by Daniel Eden lettering.js, by Dave Rupert
10 Super JavaScript Animation Frameworks JavaScript allows you to do a wide range of animations and effects that would otherwise be very hard to achieve with minimal overheads. Below is a list of JavaScript animation frameworks that will allow you to rapidly develop animations with ease. Have fun! Related Posts: 1. Raphaël Is a small JavaScript library that should simplify your work with vector graphics on the web. Source + Demo 2. Is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets. Source + Demo 3. script.aculo.us Provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly. SourceDemo 4. Is an experimental library which allows you to perform a variety of operations on images using just a bit of JavaScript. SourceDemo 5. moo.fx Is a superlightweight, ultratiny, megasmall javascript effects library, to be used with prototype.js or the mootools framework. Source + Demo 8. 10.
Tutorial - GitHub Seriously.js Tutorial Loading Seriously.js scripts The first step to use Seriously.js is to load up the necessary scripts. You'll need both the Seriously.js core code as well as any effects you'll need. <! You can load your scripts inside the head element, but it's often a good idea to load them at the end of the page so the browser can render some of your content before waiting for the scripts to load. Seriously.js is smart enough that you don't need to load seriously.js before loading the script code, but you are responsible for making sure that all these scripts are loaded before any of your custom code creates any Seriously objects. When you finally deploy your work, you may want to put all these scripts in a single file and minify it so that it loads up really fast. Source media and target canvas Now you're going to need some video or images for Seriously.js to process. We also need a <canvas> element on which to draw the results. Connecting it all up Apply your first effect A Shortcut
Raphaël—JavaScript Library jQuery SVG SVG (Scalable Vector Graphics) is a modularized language for describing two-dimensional vector and mixed vector/raster graphics in XML. It is a W3C Recommendation currently at version 1.1. SVG is a language for describing two-dimensional graphics in XML. SVG is implemented natively in Firefox from version 1.5, Opera from version 8.5, Safari from version 3.0, and in IE from version 9.0. This plugin allows you to manipulate the SVG from JavaScript. Download and include the jQuery SVG CSS and JavaScript in the head section of your page. Alternatively, you can use the minified version of the code: jquery.svg.min.js (18.7K vs 56.6K, 5.7K when zipped). Attach an SVG canvas to a <div>. Then respond to the load completion and start working with it. You can remove the SVG functionality if you no longer need it. For IE prior to version 9, you need one of the SVG browser plugins to render the documents (such as the Adobe SVG viewer or the Renesis Player). $.svg.addExtension('graph', SVGGraph); Animate
jsAnim - Free JavaScript Animation Library SVGKit Home Awesome Bubble Navigation with jQuery In this tutorial we are going to create a bubbly navigation with jQuery. The idea is to have some round navigation icons that release a bubble when hovering over them. We will use the jQuery Easing Plugin for a even nicer effect. View demoDownload source In this tutorial we are going to create a bubbly navigation with jQuery. Ok, so let’s get started. The Markup The HTML will consist of a main div that we will give the class navigation and the id nav. As an example, we just show the first two items here. Further elements inside of the item element are the image for the bubble, the icon as link element, the heading and the list of links. The CSS Let’s take a look at the styling. Now, we will use absolute positioning for the item: Since we gave the div two classes, we will now define the respective positions for each navigation item. The link elements of the icons will have the following general style: And we can again define each icon of the respective element: The JavaScript And that’s it!
Coding A HTML 5 Layout From Scratch - Smashing Magazine Advertisement HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the ‘best markup’ trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project. As developers we shouldn’t get into pointless discussions of which markup is the best. While it is true HTML5 and CSS3 are both a work in progress and is going to stay that way for some time, there’s no reason not to start using it right now. So today we’re going to experiment a little with these new technologies. Use Graceful Degradation techniques and technologies to keep things in place for legacy browsers.Use Progressive Enhancement techniques and technologies to be up to date with the latest trends.Use HTML5 alongside a rising technology: Microformats.Have a clear vision of some of the most exciting new features HTML5 and CSS3 will bring. It’d be a good idea to have a read at some of these articles first: Before we begin… 1. 2. <! The header <!