research

UI tabs

http://keith-wood.name/uitabs.html

Tabs with smaller non-selected tabs.

tabs-smaller .ui-tabs-nav li { 
            margin-top: 0.6em; 
            font-size: 80%; 
        } 
        tabs-smaller .ui-tabs-nav li.ui-tabs-selected, 
        tabs-smaller .ui-tabs-nav li.ui-state-active { 
            margin-top: 0em; 
            font-size: 100%; 
        }

pixijs.com

https://www.packtpub.com/books/content/making-games-pixijs

velocity.js

Velocity is an animation engine with the same API as jQuery’s $.animate(). It works with and without jQuery. It’s incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined.

thecodeplayer.com - Pure CSS3 animated clouds background

Clouds that move.

High Performance Animations

We’re going to cut straight to the chase. Modern browsers can animate four things really cheaply: position, scale, rotation and opacity. If you animate anything else, it’s at your own risk, and the chances are you’re not going to hit a silky smooth 60fps.

Tom Wiltzius - Accelerated Rendering in Chrome - The Layer Model

note that this entire article is discussing a core piece of Chrome’s rendering architecture that’s changing very fast.

Jake Archibald - We’re Gonna Need A Bigger API!

If you’re performing visual updates with JavaScript, then you should be using requestAnimationFrame. It synchronizes itself to real screen updates, giving you as much time as possible to get everything ready for rendering.

David Walsh - Create a CSS Flipping Animation

One CSS effect somewhere in between is the CSS flip effect, whereby there’s content on both the front and back of a given container. This tutorial will show you show to create that effect in as simple a manner as possible.

David Walsh - CSS Background Animations

Background animations are an awesome touch when used correctly. In the past, I used MooTools to animate a background position. Luckily these days CSS animations are widely supported enough to rely on them to take over JavaScript-based animation tasks. The following simple CSS snippet animates the background image (via background position) of a given element.

the-art-of-web.com - CSS: Animation Using CSS Transforms

The animations presented below involve setting up a transformation to take place in response to a mouseover or other event. Then, rather than applying the effect instantly, we assign a transition timing function which causes the transformation to take place incrementally over a set time period.

the-art-of-web.com - CSS: Using floats to layout content

the use of CSS properties such as float and clear is increasing. But it’s clear that many webmasters have little or no idea on how they actually work or the variety of ways in which they can be used.

This article focuses on the layout of content within a page, but the same rules can be applied for layout of the website itself. We start with the simplest case and work towards the more complicated.

justinaguilar.com - CSS3 Animation Cheat Sheet

The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated.

The CSS3 Animation Cheat Sheet uses CSS3 @keyframes and works on all the latest browsers (that’s IE 10). Using CSS3 @keyframes, you don’t have to worry about positioning the element to accomodate the animations - it will animate into place. Also for users with older browsers, the animated element will be visible and in place, even if the animation doesn’t trigger. Below are instructions on how to get started.

robots.thoughtbot - CSS Animation for Beginners

In this post we’re going to walk through the basics of CSS animation. You can follow along and view the CSS code for the example animations in this post.

davidwalsh.name - Detecting CSS Animation Completion with JavaScript

The only reason this is a somewhat involved task at this point is the need to account for browser prefixes. The transitionend event and animationend is what standardized browsers require but WebKit-based browsers still rely on prefixes so we have to determine the prefix for the event, then apply it:

Imagine how much in JavaScript code you can save by avoiding a JavaScript library for this. The duration, fill-mode, and delay can all be set via CSS, so your JavaScript stays lightweight. Major win!

Mozilla CSS Docs

Cascading Style Sheets, most of the time abbreviated as CSS, is a stylesheet language used to describe the presentation of a document written in HTML or XML (including various XML languages like SVG or XHTML). CSS describes how the structured element must be rendered on screen, on paper, in speech, or on other media.

elated.com - Removing, Replacing and Moving Elements in jQuery

Tutorial by Matt Doyle Published on 8 June 2010

Learn how to use jQuery to easily remove elements from the page, replace elements, and move elements around.

quackit.com - css page

CSS (Cascading Style Sheets) allows web authors to apply styles to their web pages. More importantly, CSS enables them to do this independently of the HTML that makes up each web page.

Therefore, as a web author, you can code your HTML without having to be concerned with what each HTML element is going to look like. You can change the look later using CSS.

You’ll find a wealth of information about CSS right here on Quackit. Read the CSS Tutorial, learn all the CSS properties that you can use, or just go straight to the code for some good old “cut & paste”!

jQuery-Keyframes at github

jQuery-Keyframes allows dynamic generation of CSS3 keyframes with callback events and other niceness. Overview

With the rise of CSS3 and HTML5, we see more and more usage of fancy features like transformations, translations, rotations and scaling. jQuery has a very nice built in $(selector).animate() function which allows for easy setup of these animations. However, jQuery’s animate() does not support multiple keyframes. jQuery.Keyframes helps you accomplish just that.

jQueryKeyframes plugin Keyframes.Pathfinder

This plugin for jQuery.Keyframes generates complex movement paths.

jQueryKeyframes plugin Keyframes.Spritesheet

Keyframes.Spritesheet is a plugin for jQuery.Keyframes that easily generates css3 keyframes for elements using animated spritesheets.

stylie CSS animation page

CSS animation made easy!

Stylie is a fun tool for easily creating CSS 3 animations. Quickly design your animation graphically, grab the generated CSS and go!

w3schools - CSS3 Animations

CSS3 animations can replace animations created by Flash and JavaScript in existing web pages.

mozilla.org - Using CSS Animations

CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints along the way.

rekapi

A keyframe animation library for JavaScript

rekapi at github

jQuery code
        $("#textinput").keydown(function(e) {
            e.keyCode; // this value
        });

jQuery code
        $('body').keyup(function(e){
           if(e.keyCode == 8){
               // user has pressed backspace
               array.pop();
           }
           if(e.keyCode == 32){
               // user has pressed space
               array.push('');
           }
        });

jQuery code
        $(document).ready( function() {
          $('#inputid').bind('keypress', function(e) {
            //space bar
            if (e.which == 32){
              e.preventDefault();
              alert('space');
            }
            //backspace
            if (e.which == 8) {
              e.preventDefault();
              alert('back space');
            }
          });
        });

HTML5 CSS img Animation