Aller au contenu

Utilisez la simplicité des effets easing du Framework jQuery UI

Il s’agit de la suite du cours précédent sur les animations jQuery UI.

Cette fois, vous allez découvrir comment utiliser les effets easing du Framework jQuery UI.

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Utilisez la simplicité des effets easing du Framework jQuery UI

Bonjour à tous et bienvenu sur Développement Facile.

Vous avez eu un cours précédent sur les animations, vous avez vu tous les effets avancés de jQuery UI. Là, on continu, c’est la deuxième partie ou je vais vous montrer tous les effets easing.

Les animations – les easing

Les effets inOut, bounce, le rebondissement tout ça. Une easing ça détermine le moment de déroulement d’une animation, plusieurs scénarios sont envisageables pour une animation, de façon linéaire constante du début à la fin, démarrer lentement, accélérer sur la fin, débuter lentement, prendre de la vitesse, ralentir, aller de plus en plus rapidement, avec un effet élastique, démarrer rebondir plusieurs fois à la fin, c’est ça les effets easing.

Les animations – les modifications CSS

Pour que ce soit plus simple pour vous, je vous ai préparé dans le code source de démonstration, visuellement à quoi correspondent chaque effets easing, et vous avez différentes possibilités, addClass, removeClass, toggleClass, et switchClass, pour ajouter une classe ou supprimer une classe CSS, permuter entre deux classe CSS, vous pouvez faire tout un tas d’animations.

jQuery permet d’animer les propriétés de couleur des éléments aussi, les changements de couleurs s’effectues graduellement, vous l’avez vu dans le cours précédent.

Exemple d’effets

Je vous montre un exemple de code source, comme ça, ça va vous parler beaucoup plus simplement, donc un code source avec pour démarrer tous les effets, les différents effets easing, et donc là on ajoute le formulaire, le code est un peu plus compliqué, on ajoute par défaut ces effets-là, une méthode add easing ça ajoute les effets en fait, on peut en ajouter d’autres par exemple, on peut ajouter celui-ci si on le souhaite, tout simplement, il y a un copier/coller, voilà, avec l’effet swing, et donc là vous avez une fonction pour ajouter des effets, le champ texte ici, donc là on clique sur le champ texte il disparaît, il revient après à la fin, il re disparait, c’est un effet sur le champ texte, il est où le champ texte ? Il est là il s’appelle texte lorem et on définit sa taille CSS avec le fond, tout ce qu’il faut, le pointeur qui change et on met un effet sur la taille, on part de la taille où il est pour aller jusqu’à la taille 150 de largeur, hauteur 30 en une seconde et demie.
150 de large, hauteur 30 vous avez vu, 150 de large, hauteur 30 en une seconde demie.

Là vous avez tous les effets, on peut rajouter différents effets en plus ou on peut en supprimer si on veut comme ça, ça va vous permettre de comparer tous les effets ici, et si vous cliquez voilà, ça lance en fonction du type d’effet, ça va lancer, voilà, l’élément tout simplement.
Je le relance, la démo d’effets, vous n’aurez aucun mal à choisir les effets qui vont bien en fonction de votre site Internet, donc c’est assez facile, là vous avez tout avec des exemples pour ajouter des effets, là je joue sur la taille, vous pouvez jouer sur énormément de choses.

Votre plan d’actions !

On a fait le tour, on a vu pas mal de choses ensemble sur l’extension jQuery UI, vous avez vu avec tous les exemples, vous avez plusieurs vidéos expliquées avec du code source commenté et en français, pour vous aider, déjà, vous pouvez me poser toutes vos questions sous la vidéo, si vous avez besoin d’aide ou si vous rencontrez des difficultés, et en plus sur Développement Facile sous cette vidéo, vous pouvez télécharger le code source complet de l’exemple pour tester les effets easing chez vous sur votre site Internet, et dès maintenant je vous invite à consulter la deuxième vidéo qui contient des éléments très importants si vous voulez créer des sites web très rapidement qui soient compatibles avec tous les navigateurs, connaître jQuery, le plug-in jQuery UI, le framework Dojo, dans le détail, il y a une image vidéo 2, cliquez dessus sur l’image vidéo 2 au-dessus, ou en-dessous de cette vidéo, cliquez sur l’image vidéo 2, je vous retrouve de l’autre côté sur cette vidéo et je vous dis à très bientôt sur Développement Facile.

 

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple easing de jQuery UI

Téléchargement du code source Exemple avec les effets easing de jQuery UI

Cliquez ici pour télécharger le code source Exemple avec les effets easing de jQuery UI

Posez vos questions sur ce cours

Dites-moi dans les commentaires si vous avez besoin d’informations supplémentaires pour utiliser les effets easing du framework jQuery UI.

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Développer des Applications JavaScript Performantes — dès la semaine prochaine ?

TÉLÉCHARGEZ : Les codes sources du livre « JavaScript Facile » pour Créer VOS Applications — dès la semaine prochaine !

Cliquez ici pour tout recevoir >>