Bidouilleur

Depuis près d’ un an, les navigateurs comme Chrome, Firefox ou encore Safari redoublent d’efforts pour améliorer sensiblement la vitesse d’exécution du JavaScript, et ceci nous offre de nouvelles perspectives comme par exemple ajouter de la 3D dans nos pages.

Je vous propose de lire un article qui montre comment créer un petit moteur 3D en JavaScript et comment l’utiliser avec jQuery.

Ce moteur est composé de 3 classes:

• La scène
• La caméra
• L’objet 3D (qui est un cube dans cet article)

Ce moteur n’utilise pas la nouvelle technologie WebGL qui gère la 3D avec des balises canvas, mais simule simplement le rendu 3D en convertissant les points 3D définis (X,Y,Z), en 2D (X,Y), la profondeur est simulée via la taille et l’opacité d’un objet.

Le moteur n’utilise pas entièrement jQuery  puisque les calculs de conversions (3D => 2D) sont déjà  lourds et l’ajout de fonction jQuery au milieu de ces calculs ne ferait que ralentir l’ animation 3D; les fonctions natives comme getElementById() ont donc été préférées pour le cœur du moteur.

Pour lire l’article c’est ici.

Pour voir la démonstration c’est ici.

Twitter ce post

Animate est une fonction de jQuery qui permet d’animer un élément du DOM en modifiant son style (couleur, taille, bordures,police,opacité…etc) dans un temps donné.

Exemple:

1
2
3
4
5
6
7
8
9

    $("#go").click(function(){
      $("#block").animate({
        width: "70%",
        opacity: 0.4,
        marginLeft: "0.6in",
        fontSize: "3em",
        borderWidth: "10px"
      }, 1500 );
    });

Vous pouvez assigner tous les styles de cette liste qui sont quantifiable (px, em, %).

Encore trop peu utilisée elle permet pourtant de donner une vraie valeur ajoutée à une animation JavaScript et ce très simplement.

Voici ci-dessous deux scripts plutôt sympa qui utilisent cette fonction:

• Menu

Article.

• Lever de rideau

Article.

Twitter ce post

SlideView est un plugin jQuery qui permet de créer un Diaporama ( slideshow).

Voici la démo.

Documentation et téléchargement.

Exemple de code jQuery :

1

$("#slideshow").slideView();

Twitter ce post

Showcase est un plugin jQuery qui permet de réaliser de jolis diaporamas d’accueil.

Pour voir les démonstrations c’est ici, pour télécharger le plugin c’est ici et la page officielle est ici.

Code :

1
2
3
4

$("#showCase1").showcase({
animation: { type: "fade",  interval: 4500,  stopOnHover: false },
navigator: { item: { width: "4px",  height: "4px" } }
});

Twitter ce post

jQuery Gestures est un plugin jQuery qui capture les mouvements de souris (clic gauche enfoncé ou non) de vos visiteurs; aussi ce système peut être intéressent pour réaliser des interfaces compatibles avec les nouveaux écrans tactiles ( de bureaux ou mobiles ).

Il détecte les différents mouvements possibles : vers la gauche, vers la droite, vers le haut, le bas, mouvements circulaires, zigzag…etc; ces mouvements deviennent ainsi des évènements .

Pour tester ce plugin c’est ici.

Exemple de code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$(function(){
 
	$('*').gestures({
 
		callback:function(gesture)
		{
			if(gesture.string == 'circle')
			{
				alert('Circled!');
			}
			else if(gesture.string == 'zig-zag')
			{
				alert('Zig-Zagged!');
			}
		}
 
	});
 
});

Twitter ce post

jPlayer est un plugin jQuery qui permet de lire des MP3 dans votre page Web!

Et là je vois la question venir : « Comment ce fait-il que Javascript se mette du jour au lendemain à lire les MP3 ?? »

Et bien en fait ce plugin se sert d’un flash invisible sur la page qui permet la lecture des MP3!

Plusieurs styles de lecteurs sont possibles :

• Lecteur simple avec gestion du son.
• Lecteur de playlist
• Lecteur texte
• Lecteur avec barre de progression (jolijoli)
• Et le dernier arrivé : Lecteur compatible avec les thèmes  jQueryUI

Pour le tester et télécharger c’est ici.

Twitter ce post

En anglais FishEye ou en français Oeil de poisson c’est cet effet qui est utilisé pour le menu de Mac OS.

Ce plugin jQuery nommé jqDock donne un effet  loupe au passage de la souris sur les icônes d’un menu.

Télécharger ce plugin.

Twitter ce post

jQuery Context Menu Plugin est comme son nom l’ indique un plugin jQuery qui va vous permettre d’intégrer à votre site un menu contextuel. Ce menu s’affichera par exemple lorsqu’ un utilisateur fera un clic droit sur votre page ou une zone définie de votre page.

Code HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<ul id="myMenu" class="contextMenu">
    <li class="edit">
        <a href="#edit">Edit</a>
    </li>
    <li class="cut separator">
        <a href="#cut">Cut</a>
    </li>
    <li class="copy">
        <a href="#copy">Copy</a>
    </li>
    <li class="paste">
        <a href="#paste">Paste</a>
    </li>
    <li class="delete">
        <a href="#delete">Delete</a>
    </li>
    <li class="quit separator">
        <a href="#quit">Quit</a>
    </li>
</ul>

Code jQuery:

1
2
3
4
5
6

$(document).ready( function() {
   $("#selector").contextMenu({menu: 'myMenu'},
      function(action, el, pos) {
         alert('Action: ' + action);
   });
});

Twitter ce post

GcColor est un plugin jQuery qui vous permet d’ agrémenter vos champs d’un color picker. Comme vous pouvez le voir ci-dessous, ce plugin est pratiquement digne de notre bon vieux photoshop.

Code jQuery:

1

$('input.color').gccolor();

A noter que ce plugin s’ appui sur un autre plugin de color picker qui se nomme tout simplement Color picker.

Twitter ce post

Le plugin Captify vous permet de légender vos photos de bien belle manière, en effet le texte de description de la photo est certes caché mais il s’ affiche au survol de la photo dans un fond en semi-transparence.En voici un avant goût ci-dessous.

Démo.

Téléchargement.

Code HTML:

1
2

<img src="image.jpg" class="captify" rel="legende1" />
<div id="legende1"> La légende de mon image .</div>

Code jQuery:

1
2
3
4
5
6
7
8
9
10
11
12

$('img.captify').captify({
		// toutes ces options sont facultatives
		speedOver: 'fast',
		speedOut: 'normal',
		hideDelay: 500,	
		animation: 'slide',		
		prefix: '',		
		opacity: '0.7',					
		className: 'caption-bottom',	
		position: 'bottom',
		spanWidth: '100%'
	});

Twitter ce post