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

10 Useful jQuery Plugins It seems that jQuery plugins are constantly being released, and it’s no surprise since it’s insanely popular, and for good reason. The only problem is being able to sort through them all to find the good ones. That’s why we’re always on the lookout, and we’ve found some good ones for you. Here are 10 fresh jQuery plugins that you should find useful. arbor.js Arbor is a graph visualization library built with web workers and jQuery. Mobily Map MobilyMap is a jQuery plugin (7KB) that can create a Google Maps-like, draggable interface from any image. Awkward Viewline This is a simple plugin for displaying any type of media on a straight line. liteAccordion liteAccordion is a horizontal accordion plugin that only weighs 4.5kb, and the themes don’t use any background images. Zoomy Zoomy is a quick and easy plugin that will zoom into a picture. Waypoints Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element. Reveal Subway Map Visualization Read More

jVectorMap jQuery : Les bonnes pratiques Parce que beaucoup de développeurs se frottant à jQuery ne l’utilise pas forcément comme il faut et se plaignent souvent des performances médiocres obtenues, il était temps de remettre l’église au centre du village. Ce mémo est une traduction de ce très bon article anglais. Bonne lecture ! Toujours faire une recherche à partir d’un ID Le sélecteur le plus rapide de jQuery est le sélecteur d’ID ($(‘#mon-id’)) car elle est directement mappée sur une méthode Javascript native : getElementById(). Sélection d’un élément unique Une sélection comme celle-ci est plus rapide :var traffic_button = $(‘#traffic_button’); Que celle-ci :var traffic_button = $(‘#content .button’); Sélection d’éléments multiples La sélection d’éléments multiples parcours le DOM de manière transversale, cela peut être très long et très couteux en ressources. Utiliser des balises avant les classes Le second sélecteur le plus rapide de jQuery est le sélecteur de balises ($(‘head’)). Cacher les objets jQuery (Dé)chaînez la fureur

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,

tubular, a YouTube Background Player jQuery Plugin | Sean McCambridge Design Video controls:Play | Pause | Volume Up | Volume Down | Mute Tubular is a jQuery plugin that lets you set a YouTube video as your page background. Just attach it to your page wrapper element, set some options, and you're on your way. $(page content wrapper element).tubular(options); Tubular's hello, world Assuming you're happy with the default options and you use a wrapper div with the id of wrapper, you simply attach to your wrapper div and specify the video you want to load: and Presto! A word of caution Tubular does not design your website for you. Options and defaults ratio: 16/9 // usually either 4/3 or 16/9 -- tweak as needed videoId: 'ZCAnLxRvNNc' // toy robot in space is a good default, no?

Moleskine Notebook with jQuery Booklet Today we will show you how to use and customize the brilliant jQuery Booklet Plugin by talented Will Grauvogel. We will create a virtual Moleskine notebook with latest posts from the blog. You can find the beautiful Moleskine Photoshop file by Dennern at deviantart here: My Moleskine (PSD) For the navigation arrows […] View demoDownload source Today we will show you how to use and customize the brilliant jQuery Booklet Plugin by talented Will Grauvogel. You can find the beautiful Moleskine Photoshop file by Dennern at deviantart here:My Moleskine (PSD) For the navigation arrows we used the pixel perfect PSD provided by premiumpixels.com underSimple Little Arrows (PSD) Ok, so let’s get started! The Markup The HTML structure will be made up of the booklet plugin markup which includes the div with the id “mybook”. <div class="book_wrapper"><a id="next_page_button"></a><a id="prev_page_button"></a><div id="loading" class="loading">Loading pages... Let’s take a look at the style. The CSS

8 ressources Jquery pour sites fullscreen Les sites avec un webdesign plein écran, envahissent le web. Pour la simple et bonne raison que leur mise en page est souvent simple, efficace et permet de mettre avant des visuels qui en jettent. Pour vous aider a faire de même, je vous propose 8 ressources Jquery. Bien avant l’explosion et l’utilisation massive de Jquery, le Flash était la principale technique utilisée pour réaliser des sites « fullscreen« . Les designers qui se sont tourné vers la librairie Jquery ont permis de faire avancer la technologie pour offrir des sites toujours plus rapides, toujours plus animés et prenant la totalité de l’écran du navigateur. Menu animé Jquery en plein écran Galerie fullscreen avec miniatures animées Galerie fullscreen Galerie Jquery avec miniatures Le célébre plug-in « Supersized » Jquery Jquery Fullscreener plug-in Un tutoriel CSS + Jquery Galerie / slider en fullscreen Partagez vous aussi vos ressources, je n’hésiterai pas à les rajouter à l’article !

jQuery: The Write Less, Do More, JavaScript Library Free jQuery Image Sliders Download | Graphicitvitis Nov If you want to show your images in a limited space than using a jQuery image slider is a great technique. With the help of jQuery image slider you can create interactive, lively and dynamic effects for your website. It is very popular now days because it is fast and concise. In today’s post you will find different exclusive and unique jquery image sliders plugins which will help you in displaying your images with light code. Enjoy Start/Stop Slider Demo | Download Automatic jQuery Image Slider jCarousel Lite Building a jQuery Image Scroller Sliderman.js Demos Apple Style Image Slider Exclusive Gallery Simple jQuery Image Slider Stylish Image Slider A Unique jQuery Plugin Easy To Use Image Slider Space Image Slider Make A Circular Image Galleries Fullscreen Image Gallery In this tutorial, let’s take a look to some exciting script to create galleries with the help of jQuery.

7 Free Page Flip (flipbooks) Flash & JQuery | Web Design Today Pageflip is a beautiful way to present images on your website. Its also used on many websites to present catalog. By using mouse pages can be flipped like a real book pages with realistic animations. Below are 7 free flipbook tools build with flash and jQuery. PixelWit’s Free PageFlip A very simple pagflip in flash. Free Pageflip 2.25 This free flash pageflip is not a simple images flip book but it also allows to add swf movies, transparent pages and also allows to peel any page. FlippingBook HTML Edition There is a free demo and paid version for this flipping book. Flash Pageflipping free This free version is missing lots of options from the pro version of this pageflip but still you can zoom, navigate, add swf and enable disable sound. PDF to Flash Page Flip This unique tool allows youto convert your pdf files into flash page flip book movie fro free. JFLIP is a jquery plugin which allows to convert your images into page flips. imBookFlip

jQuery : la sélection écrémée #2 jQuery : la sélection écrémée #2 Milky vous à concocté une sélection des meilleurs ressources jQuery du moment. 01 – Image | Effet avant/après Vous avez besoin de présenter vos travaux de retouches photos ? Ce plug-in est fait pour vous, il vous permettra de facilement réaliser des effets avant retouche / après retouche bluffants ! Tutoriel – Demo 02 – Portfolio | Slider & Zoom Idéal pour montrer ses créations sans perdre en ergonomie, ce tutoriel vous permettra de faire un slideshow efficace avec zoom au survol de la souris. Tutoriel – Demo 03 – Miniature | Prévisualisation Jquery Besoin d’un effet au survol d’un élément ? Tutoriel – Demo 04 – Slider | Colorés Ces sliders effets 3d peuvent certainement vous être utile dans la réalisation de graphiques ! Tutoriel – Demo 05 – Formulaire | Animé Besoin de réaliser un formulaire de connexion et/ou d’inscription ? Tutoriel – Demo 06 – Parallax | Slideshow Les parallaxes sont de plus en plus utilisés dans les site web, pourquoi pas sur le votre ?

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 Shiny Knob Control with jQuery and CSS3 Martin Angelov In this tutorial we will be writing a jQuery plugin for creating a shiny knob control. Aptly named knobKnob, this plugin will use CSS3 transformations and jQuery’s new event handling methods to give visitors of your website a new way of interactively choosing a value from a range. KnobKnob is also on Github. Update: Thanks to ranyefet the plugin now works on mobile devices [changes]. The HTML The HTML markup for the page is rather straightforward. index.html <! First we include the latest version of jQuery, transform.js which levels cross-browser support of the CSS3 transform properties we will be using, the knobKnob plugin file and script.js, which pulls everything together. The #control div is where the plugin markup will be generated. Now lets write this plugin! Shiny Knob Control The jQuery Code You can find the plugin source files in the knobKnob folder. assets/knobKnob/knobKnob.jquery.js The plugin takes a number of options as a parameter object – snap, value and turn:

Related: