Dans ce tuto Javascript, en vidéo, vous découvrirez comment créer rapidement et facilement un module/plug-in Timeline pour le framework gratuit jQuery.

Une timeline est une échelle de temps permettant de lancer une animation à un moment T précis (comme pour les logiciels de montage vidéo par exemple). Les notions abordées dans ce tuto sont accessibles quelque soit votre niveau technique dans les langages utilisés.

Les objectifs pédagogiques de ce tuto :

  • Installer et débuter la programmation de plug-in sous jQuery
  • Utiliser les différentes méthodes d'animation avec jQuery
  • Gérer les queues d'animation de jQuery
  • Créer simplement une timeline JavaScript
  • Manipuler les tableaux Array en Javascript

Une archive .zip est fournie contenant l'intégralité du projet.

Jetez un oeil à ces autres tuto jQuery 1.7

Créer un Sticky menu qui reste visible à tout instantCréer un Sticky menu qui…
Dans ce tuto vidéo CSS3 et Jquery, en vidéo, nous allons voir…

Animer la hauteur d'un élément pour dévoiler un contenuAnimer la hauteur d'un élément…
Dans ce tuto jQuery en vidéo, nous allons voir comment animer…

Mettre en place un panneau coulissant sur votre site webMettre en place un panneau…
Dans ce tuto Jquery gratuit en vidéo, nous allons voir ensemble…

Mettre un background vidéo en full pageMettre un background vidéo…
Dans ce tuto Jquery en vidéo, nous allons voir comment ajouter…

Créer un site web avec un slider d'images en full pageCréer un site web avec un…
Dans ce tuto jQuery / CSS3, nous allons ensemble, pas à pas,…

Créer un slider et l'intégrer à votre blog WordpressCréer un slider et l'intégrer…
A l'aide d'un plugin jQuery, nous allons créer un slider pour…

Créer une lightbox simplementCréer une lightbox simplement…
Dans ce tuto Jquery en vidéo, nous verrons comment créer une…

Créer un scroll horizontal animé pour votre site webCréer un scroll horizontal…
Dans ce tuto Jquery, en vidéo, nous allons voir ensemble comment…

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto jQuery 1.7 de 41 minutes est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

mr32 , Formateur

Développeur dans une agence de communication bien connue sur le web, et entouré de graphistes avec une imagination démesurée... j'essaye de concilier au mieux technique et graphisme dans les développements web et iPhone...

En savoir plus sur mr32


Témoignage des clients de mr32

Toujours de très bon tutos !

Un excellent pédagogue, de très bons thèmes de tutos : formateur à suivre !

Super Tuto ! Très bien expliqué, les exemples aussi sont très bien !

 

D'autres tuto de mr32

Créer une bannière animée comme dans iTunesCréer une bannière animée comme dans iTunes
Dans ce tuto vidéo, vous découvrirez comment créer une bannière animée comme dans…

Initiez vous aux différents types de données en PHPInitiez vous aux différents types de données en PHP
Dans ce tuto PHP, vous découvrirez comment utiliser les différents types de donnéess…

Initiez vous à toutes les positions CSSInitiez vous à toutes les positions CSS
Dans ce tuto CSS, vous découvrirez comment utiliser les positions CSS dans vos pages…

Générer du texte en 3D avec CSSGénérer du texte en 3D avec CSS
Dans ce tuto CSS, vous découvrirez comment générer du texte en 3D avec CSS dans vos…

voir tous les tuto de mr32

Notes attribuées par les utilisateurs (7 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (9)

par linkdesignà voté :
(a acheté ce tuto - 12 février 2012)

" Incontournable pour les debutant en Jquery ! "

par pimwibà voté :
(a acheté ce tuto - 27 janvier 2012)

" Formation géniale et très bien expliquée "

par mr32
(auteur de ce tuto - 20 janvier 2012)

" Merci, si vous souhaitez aller plus loin dans les animations, je vous conseille le plug-in jQuery suivant :
http://gsgd.co.uk/sandbox/jquery/easing/ "

par lottavianià voté :
(a acheté ce tuto - 19 janvier 2012)

" Super tuto,
pouvoir travailler sans Flash, pour des projets simples, c'est vraiment le tuto qu'il faut!
Dommage, qu'il ne soit pas plus fourni (développement dans le contexte d'une ou plusieurs pages de site, avec differentes options d'anims). Mais bon faut peut-être pas trop en demander!!!
Sinon encore bravo, et s'il est ^prévu une suite, je suis preneur!!! "

par mezighà voté :
(a acheté ce tuto - 05 janvier 2012)

" Ce tuto est un MUST pout tous ceux qui viennent de flash et dont les clients ne veulent pas de d animations flash
plus particulièrement super tuto qui tombe à pic ! , je m'explique je suis développeur AS3 et pour un projet web en cours j'avais besoin de réaliser des animations sous forme de timeline ( comme TimeLineMax de greensock pour flash ) Le client ne veut absoluement pas de FLASH donc ça tombe plutôt bien ;)

Bravo pour ton travail
Oliv "

par equichevalà voté :
(a acheté ce tuto - 01 janvier 2012)

" Excellent tuto ! Merci beaucoup, je vais pouvoir faire un site animé sans Flash ! Merci encore :) "

par xavtutoà voté :
(a acheté ce tuto - 31 décembre 2011)

" riche d'enseignement ! "

par Infoprogà voté :
(a acheté ce tuto - 30 décembre 2011)

" Tutoriel très intéressant, en plus le thème est super intéressant, le formateur est clair et précis, bref un des meilleurs tutoriels qu'il m'a été donné de voir ;) "

par Infoprogà voté :
(a acheté ce tuto - 30 décembre 2011)

" Je vais le visionner ce soir mais j'ai vu le résultat final et je suis scotché :) Je reviendrais après visionnage ;) "

 

Donnez votre avis ou posez une question au formateur.

Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous

Ce tuto en résumé ...

Ce tuto jQuery 1.7 d’une durée de 41 minutes a été acheté 71 fois et a reçu une note moyenne de 5/5.

Ce tuto a été publié le 30 décembre 2011 par mr32, contributeur, ayant reçu une note moyenne de 4,6/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto jQuery Animation.

Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.

Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.

Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.

N'hésitez pas à nous contacter si vous avez la moindre question !