jVectorMap jQuery Twinkle, un plugin qui attire l’attention - Megaptery Twinkle est un plugin jQuery qui permet d’attirer l’attention de vos visiteurs sur certaines parties de votre site web. Le principe de l’outil repose sur des cercles animés avec jQuery et générés soit via l’élément HTML5 canvas, soit via des propriétés CSS3. Faites scintillez vos éléments HTML Le plugin possède une API assez complète avec méthodes, options, et effets. Les cercles « lumineux » peuvent être utilisés sur un ou plusieurs éléments HTML. Par défaut, Twinkle s’utilise comme ceci : Les options Plusieurs paramètres peuvent être utilisés. widthRatio : ratio horizontal de l’animationheightRatio : ratio vertical de l’animationdelay : délai avant que le premier effet soit déclenchégap : délai entre deux effetseffect : nom de l’effet utiliséeffectOptions (radius, color, etc) : options pour un effet personnalisé Les effets Twinkle possède nativement quelques effets mais vous pouvez construire facilement vos propres effets en utilisant le paramètre effectOptions. Exemples
foobar - a notification bar that doesn't suck! How To Setup Demos All Options FAQ Changelog How to setup Firstly, extract all the files and then upload to your server. Next, include the foobar javascript file together with jquery in your head tag. Also include a link to the foobar CSS stylesheet. Now initialize the bar when the page has loaded, by placing some code in the head tag of your page. <script type='text/javascript' > $(function(){ $.foobar('Hello World!') Or override the default foobar options by using something like this code instead: Demos There are some major ways to change how the foobar looks and works. Inline VS Fixed Positioning A Fixed foobar will always be placed at the top of the page and it will not move, even if the window is scrolled. Fixed Demo View source An Inline foobar will also be at the top of your page, but it will form part of the normal flow of the page. Inline Demo View source Different Display types The foobar can be displayed in 4 different ways. Expanded Display Demo View source Other Demos View source
jQuery.fracs · larsjung.de To use the core lib just include jquery.fracs-0.12.0.js. The outline feature can be found in jquery.outline-0.12.0.js and depends on the core lib (you'll need to include both files). Fractions To retrieve the fractions of an element use: var fracs = $(selector).fracs(); this will return an object of type Fractions. Or bind a callback function: function callback(fracs: Fractions, previousFracs: Fractions) { ... // context variable *this* will be the corresponding HTMLElement ...}; $(selector).fracs(callback); The callback function will be called whenever fracs and previousFracs are unequal. $(selector).fracs('check'); Outline Add a canvas to your document (use a fixed position to keep it in viewport)
10 Awesome Techniques and Examples of Animation with jQuery jQuery can pretty much do anything you can think of. All you need is a creative imagination and some time to learn the simple and intuitive API. In this article, we share with you some innovative uses of jQuery in animating web design elements. 1. This example by Dutch web developer Gaya Kessler features an impressive animation effect of cartoonish smoke emanating from factory smoke stacks. Live Demo: Smoke Effect 2. Sam Dunn of the web development duo, Build Internet, wrote a tutorial on how to create an animated landscape using transparent PNG images. Live Demo: Animated Postcard 3. In this tutorial, you will learn how to animate image elements in a smooth and fluid manner. Live Demo: Realistic Hover Effect 4. The creators of the site youlove.us shares their code (and explanation) for making a seamless vertical scrolling CSS background; featured on the site’s header. Live Demo: youlove.us (web page header) 5. Live Demos: Freestyle Sample, Image Sequence Sample, Fade Text Sample 7. 8. 9.
New Creation: jQuery Runloop Plugin TL;DR links for the eager: Earlier this week I was working on a project that involved one larger animation during which several separate animations would trigger, but not all at the same time, and not all on the same elements. As jQuery provided insufficient functionality to suit my needs, I went on a hunt across the Web in search for a runloop plugin, with these requirements: Alas, my traipsing across the Web yielded no results. Want a demo before reading on? Basic usage Runloop is not a common jQuery plugin in that it is not chainable. There is one very important thing to keep in mind: jQuery Runloop only supports keyframes at 5% intervals, and only at 10% intervals if you give it a duration of < 500ms! The reason for this is that it runs one .animate() call on a div in nodespace, triggering at every step. Now, making a custom animation stack with jQuery Runloop is quite easy. <! A full documentation of all the features will be available on the Runloop github page soon.
Image Desaturate jQuery plugin Latest version: 0.7 (changelog) Stable version: 0.6 (changelog) Prev. version: 0.5.2 Example jQuery plugin page Contact: miksir@maker.ru This plugin used for replace image by gray version. 30 Fantastic New jQuery Plugins With jQuery now being used in over 40% of all web sites, the demand for up-to-date and feature-rich plugins has never been greater. Thankfully, the community has always met its popularity head on by offering a constant influx of new jQuery plugins that constantly push the boundaries of functionality even-further. We haven’t actually had a good look at plugins in quite a while, so today, we thought we would bring you up-to-date with some of the latest and greatest. CodeExplorer CodeExplorer is an enitrely unique code formatting plugin that will not only format the code with colors and spacing, but will also display it in an entire folder structure. Subway Map Visualization Plugin The amazing Subway Map Visualization plugin allows you create, interactive subway map visualizations with HTML. Website Tour with jQuery Website Tour with jQuery allows you to, as its name clearly states, create a tour on a website with jQuery. jQuery Embedded Help System Flurid – The Fluid CSS Grid Isotope MobilyMap
quickleft.github.com/ql_zoom/ I've created a new jQuery plugin to handle image zooming, like you find on many e-commerce sites. Unlike many of the zoom plugins I've found, this one uses the mystical power of the forbidden Canvas Element to accomplish much of it's dirty work. It also takes advantage of Ben Alman's $.throttle() plugin to keep events bound to mouse-move in check. It relies on a larger source image by default, which is loaded asyncronously and then translated onto the canvas element, which guides the zoomed selection. If you don't have a larger image, that's ok too. Here's how to invoke it: $('.image-container').ql_zoom(options); ...where `options` is an object containing parameters.
jamescryer.github.com/grumble.js/ Originally written for Huddle.com, grumble.js provides special tooltips without the usual limitations of north/east/south/west positioning. A grumble can be rotated around a given element at any angle, all 360 degrees. Any distance can be specified. Any CSS style can be applied. There's auto-magic size adjustment for use with localised text. FX queues for animating multiple grumbles. grumble.js is currently written as a jquery plugin and can be found on Github Examples The following code animates a set of grumbles, click here to see it in action. No textDifferent styleWith close buttonEnlarged for text Can I haz callbacks? The darkside of grumble.js grumble.js exposes three methods, 'show', 'hide' and 'adjust'. Warning: Clicking on this link may damage your UX. What is this magic? grumble.js uses buzzwords like CSS3 and 'maths' to position itself exactly where you want it. Credit due Big thanks to everyone involved in creating the idea and design of grumble.js (aka.
Rollover jQuery Mon portfolio Mon titre Ici une petite description