1. Fonctionnalités

Le module d'extension Jquery a_move3d crée un effet dynamique d'affichage 3D en déplaçant à des vitesses différentes les images et les blocs de texte en fonction du déplacement de la souris.

2. Téléchargement

a_move3d.js - version 1.1.1

3. Référence et licence

Ce module est diffusé sous la licence Creative Commons Attribution - Partage dans les mêmes conditions 3.0 France.

4. Usage

4.1. Données

La profondeur des éléments HTML (images, textes ou autres) à déplacer est donnée par l'attribut CSS z-index.

Ils doivent avoir un positionnement non statique, donc l'attribut CSS position doit valoir absolute, fixed ou relative.

Les éléments HTML sans z-index ou en positionnement statique (valeur static par défaut de l'attribut position) ne sont pas déplacés, sauf bien sûr par entrainement s'ils sont inclus dans un bloc qui le sera.

4.2. Appel

$(conteneur).move3d(paramètres);

Le sélecteur CSS conteneur doit désigner le bloc contenant les éléments à déplacer.

Les paramètres, tous optionnels, sont à mentionner au format Json. Voir les exemples ci-dessous.

Attention ! Les coordonnées des éléments sont enregistrées lors de l'appel de la fonction. Il est le plus souvent préférable d'inclure l'appel à la fin du chargement de la fenêtre du navigateur, y compris de son contenu :

$(window).load(function() {
  $('body').dropCaptions();
});

4.3. Paramètres

 elements : sélecteur CSS des éléments à l'intérieur du conteneur et devant être déplacés.

Valeur par défaut : 'div'

staticLevel : profondeur de référence pour le calcul du déplacement des éléments (valeur numérique entière).

Valeur par défaut : 0

kX, kY : coefficients d'amplification horizontal et vertical du déplacement des éléments (valeurs numériques).

Valeurs par défaut : 0

4.4. Calcul du déplacement des éléments

Les éléments sont dans leurs positions initiales quand le curseur de la souris est au centre du bloc conteneur.

Quand la souris est horizontalement à Δx pixels de ce point, chaque élément est décalé  de { Δx × kX × (z-index − staticLevel) / 100 } pixels. Même calcul verticalement avec Δy et kY. En français, le déplacement d'un élément est fonction :

• de l'éloignement du curseur de la souris par rapport au centre du conteneur ;
• des coefficients kX et kY ;
• de l'écart de la valeur de son z-index par rapport au niveau de référence.

Une valeur nulle entraine une absence de déplacement en X ou en Y ; une valeur négative donne un déplacement opposé à celui de la souris.

5. Exemples

Le composant p5003_free du logiciel projet_a de la plateforme AIO permet l'activation du module d'extension Jquery a_move3d.

Voici un exemple d'appel du module :

Site celia-moreau.fr

 $('#wall').move3d({"firstLevel":1,"kX":30,"kY":10});

Les images étant encapsulés dans un bloc div, le sélecteur par défaut des éléments convient.
Les images et blocs de textes étant numérotés à partir de 1, le premier élément est immobile.