background preloader

jQuery & CSS Sprite Animation Explained In Under 5 Minutes

Today we’re going to take a look at sprite animation. There’s been a lot of talk this year about the future of technologies like Adobe’s Flash and for good reason – with the performance of JavaScript frameworks having come so far since they were first conceived, it’s now possible to create equally as powerful animations and effects without needing to use any third party plugins.In today’s screencast I’m going to show you what a sprite is and just how easy it can be to create an entire animated scene using jQuery, CSS & Sprites. You’ll also get to see some pretty cool out-in-the-wild examples of jQuery Sprite Animation in action, so why not check it out in my screencast below! Demos and text are available for anyone that wants to read/see them in the rest of the post. View Demo Download Source Today’s animations are created using a really useful jQuery plugin called Spritely. Basic Example using Pan() How complex your animations can get really depend on what you’re trying to achieve. Related:  Java / jQuery

Documentation | Spritely Spritely is a simple plugin with only two key methods, sprite() and pan() both of which simply animate the background-image css property of an element. The difference between the two is that a 'sprite' image contains two or more 'frames' of animation, whereas a 'pan' image contains a continuous image which pans left or right and then repeats. Typically, in either case, you would use a png file (with or without transparency) for this. You might wish to use a transparent gif for Internet Explorer 6, though it probably won't look as good. Your html elements must already be the correct size you want the sprite to appear, but the background image will typically be larger than the html element, and the spritely methods reposition the background image within the html element. For documentation in languages other than English, please see Unoffical Documentation. Please note: there is a problem with the current version of Mobile Safari on the iPad Quick start What's new in version 0.6? For example,

35 jQuery Animation Tutorials Creative designers can do some amazing things with jQuery. A wide variety of animation effects are possible, and these 35 tutorials provide excellent learning resources for anyone who is wanting to brush up their skills in this area. You’ll find tutorials for creative animated navigation menus, as well as for other types of animation that use jQuery instead of Flash. Looking for hosting? WPEngine offers secure managed WordPress hosting. jQuery: The Write Less, Do More, JavaScript Library Beautiful advanced jQuery background image slideshow A couple of weeks ago, I received an e-mail from a guy named Patrick. He just visited the website from Philadelphia and wanted to know how to create the slideshow header that's on top of the page. Since I was also impressed by the effect, I took the time to recreate this effect myself. Our focus is the background image slideshow (including the text), not the other things (like the dropdown menu). With the use of transparent PNG's, some HTML, pretty nifty CSS and jQuery, we can make this technique work. It features changing text and playback controls. Start up your HTML/CSS/jQuery editor and let's see how you can create this effect yourself! The idea To understand what we need to make, I created a simple reference image. Now that we truly know what we need to create, we can start coding! First things first: I'm normally not a big fan of empty HTML elements which only purpuse is to be a handle for JavaScript. Having said that, this is the HTML I came up with. <div id="header"><! jQuery

jQuery Quicksand plugin Quicksand Reorder and filter items with a nice shuffling animation. Activity Monitor 348 KB Address Book1904 KB Finder 1337 KB Front Row 401 KB Google Pokémon 12875 KB iCal 5273 KB iChat 5437 KB Interface Builder 2764 KB iTuna 17612 KB Keychain Access 972 KB Network Utility 245 KB Sync 3788 KB TextEdit 1669 KB Demo seems sluggish? Disable CSS3 scaling and try again. Isn’t it cool? Download Version 1.4 Demos & Docs Fork on GitHub Powered by jQuery – Made by @razorjack from agilope, icons design by Artua Design by @riddle Using jQuery Stop Goals: Animate wide on mouseEnter Animate back on mouseLeave No matter what, perform a complete wide/back cycle Not queue up animations on multiple hovers Be smooth NOT Using .stop(); The smoothness of this is perfect, but the animations queue up. Using .stop(true, false); Fairly smooth, but animations don't finish if you mouse off too quickly. Using .stop(true, true); Animations finish, but it's jerky. Don't Queue Not using stop at all, you can set the animiation to not queue, but it behaves the same as .stop(true, false) Callback Test Set a variable when animation is running, test for that variable before starting new animation, set it back during a callback event. Animated Test Filter out elements currently being animated before starting new animation Dequeue Test for presence of class (set upon hover and removed on mouseOut animate callback) before staring new animation.

30 jQuery Plugins for Amazing Website Design There are many jQuery plugins and applications that can be used in improving websites, regardless of the niche and topics being covered. So many that it can be overwhelming and confusing to choose as to which jQuery plugins should be used for your advantage. Despite that you wanted to spend much time in finding out what works best for you or your site, the luxury of time is usually not available, which makes website improvement pursuits set aside or taken for granted on most occasions. However, there are those that stand out, those best jquery plugins that instantly gives impact and revolutionary changes for your online pages. So whether you are looking for something that’s functional, user-friendly, or easy to use, these 30 jQuery plugins for amazing website design would prove to be more than useful to you. You May Like This : Parallax Scrolling Tutorials, Free jQuery Sliders and Free jQuery Carousel Plugins 1. jQuery Nested 2. jResponsive 3. 4. scrollNav.js 5. 6. jQuery Github 7. 8. 9.

SCM Music Player - seamless music for your website 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

How to use the Jquery Easing Plugin - JavaScript Atoms | JavaScript Tutorials, Tips, and Code Examples A Brief Introduction Although JQuery animations are absolutely amazing, they can sometimes be a bit plain without the help of a few plugins. It is argued among JavaScript junkies as to which library or plugin results in the best looking animations, but the simplicity of the JQuery easing plugin makes it a popular choice among many. Part 1: What is easing? Plain and simple, easing is the “smoothing out” of an animation. 1.2: Adding the easing plugin The plugin is included with the downloadable folder that comes with this tutorial, and is called easing.js. <title> JQuery easing demo </title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="easing.js"></script><script type="text/javascript" src="main.js"></script></head> We’ll be writing our code, as usual, in the main.js file. 1.3: The bouncing ball Our first example of easing will be of the ease-out-bounce function. 1.4: The expanding elastic square A Few Last Words Download Source Files

Raphaël—JavaScript Library Tooltipster - The jQuery Tooltip Plugin Styling your tooltips with a custom look ⇑ Tooltipster makes it very easy to go from one of the packaged themes and customize a few properties of your choice. To do so, we recommend that you create a so-called "secondary theme" which will override some properties of a packaged theme. Create a new css file and include it in your page. For your secondary theme to be applied, provide an array of themes instead of just one. Changing the size of the arrow might be the only challenging customization but it's doable! Updating a tooltip's content ⇑ It's easy as pie to update a tooltip's content - whether it's open or closed. $('#myelement').tooltipster('content', 'My new content'); // or when you have the instance of the tooltip: instance.content('My new content'); Tooltipster plays a subtle animation when the content changes. Using AJAX to generate your tooltip content ⇑ One great use for this is to grab dynamic content for your tooltips via AJAX. Forcing or disabling sides ⇑ Predefined behaviors

Related: