Dans ce tuto vidéo, vous découvrirez comment créer une bannière animée comme dans iTunes, très facilement avec jQuery (framework javascript gratuit) pour votre site internet.

Les points abordées pour notre tuto Bannière Animée :

  • Création de la couche HTML, CSS, et Javascript
  • jQuery : Manipulation DOM
  • jQuery : Utilisation des CSS, des animations et des boucles
  • jQuery : Utilisation des évènements
  • Amélioration et finalisation de l'interface avec CSS3

Une archive zip est fournie contenant l'intégralité du projet, ce qui vous permettra de rapidement prendre en main le script et de suivre facielement cette vidéo!. A la fin de cette formation Jquery, vous serez en mesure de mettre en place sur votre propre site cette bannièr animée ou caroussel !

Jetez un oeil à ces autres tuto jQuery

Menu déroulant en jQueryMenu déroulant en jQuery
Dans ce tuto en vidéo, vous verrez comment réaliser un menu…

Réalisation d'un slideshow Réalisation d'un slideshow…
Dans ce tuto jQuery gratuit, nous allons apprendre à réaliser…

Plugin Jquery placeholderPlugin Jquery placeholder
Dans ce tuto Jquery en vidéo, vous verrez comment utiliser…

Plugin Jquery jRumblePlugin Jquery jRumble
Dans ce tuto Jquery en vidéo, nous verrons comment utiliser…

Formulaire de contact AJAX avec PHP et JqueryFormulaire de contact AJAX…
Dans ce tuto AJAX en vidéo, nous réaliserons un formulaire…

Styliser un formulaire avec CSS3 et validation en JqueryStyliser un formulaire avec…
 Dans ce tuto CSS et Jquery, nous verrons comment styliser…

Système de commentaires avancéSystème de commentaires avancé…
 Dans ce tuto PHP en vidéo, nous verrons comment réaliser…

Système de vote façon YouTubeSystème de vote façon YouTube…
Dans ce tuto AJAX en vidéo, vous apprendrez à réaliser un…

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto jQuery de 33 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

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…

Protéger vos emails contre le spam sur votre site internetProtéger vos emails contre le spam sur votre site internet
Ce tuto Javascript vous présentera une méthode pour protéger une adresse e-mail qui…

voir tous les tuto de mr32

Notes attribuées par les utilisateurs (18 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (19)

par FionaCharmantà voté :
(a acheté ce tuto - 08 mars 2012)

" Excellent tuto !
Merci "

par Walterskinnerà voté :
(a acheté ce tuto - 11 janvier 2012)

" Ce tuto est vraiment super bien fait et clair.
Merci beaucoup au formateur.
"

par Gaston22frà voté :
(a acheté ce tuto - 06 décembre 2011)

" 5/5 "

par mr32
(auteur de ce tuto - 20 septembre 2011)

" Bonjour, je vous invite à consulter le site jQuery et à comparer les différences entre ces deux versions. De là, vous pourrez réadapter le script.
http://docs.jquery.com/Release:jQuery_1.2 "

par masprod
(a acheté ce tuto - 19 septembre 2011)

" la version coté serveur de jquery preinstallée est la 1.2.6.
le code javascript.js est il compatible avec cette version ?

mercibien "

par masprod
(a acheté ce tuto - 19 septembre 2011)

" comme je le disais dans le post précédent, je n'arrive pas a installer le carousel sur ma boutique...
une librairie jquery est déja préinstallé coté serveur ...
peut il y avoir conflit?
"

par masprod
(a acheté ce tuto - 18 septembre 2011)

" bonjour,
jai acheté votre tuto ..nickel bien réalisé et explications claires ...
par contre j ai du mal a l integrer dans le template de ma boutique e commerce ....
Je n'arrive pas a savoir comment faire pour appler les fichiers .js et ou placer les lignes dans le header
<script type="text/javascript" src="../js/jquery-1.5.2.js"></script>
<script type="text/javascript" src="../js/javascript.js"></script>
merci "

par masprod
(a acheté ce tuto - 18 septembre 2011)

" bonjour,
je n'arrive pas a integrer la banniere dans une boutique e commerce ...
pas de souci pour css et html mais je n arrive pas a appeler le js ... "

par mr32
(auteur de ce tuto - 16 septembre 2011)

" Etrange... les fichiers sources sont pourtant bien présents dans ma fiche, et d'autres utilisateurs s'en servent sans aucun problème. "

par illusionà voté :
(a acheté ce tuto - 15 septembre 2011)

" Bien mais pas de fichier sources.... "

par madaniso
(a acheté ce tuto - 22 juillet 2011)

" J'ai mis mes images sur votre package ça marche. Donc je vais décortiquer tout ça demain.
Merci pour votre aide et votre rapidité de réponse ! "

par mr32
(auteur de ce tuto - 22 juillet 2011)

" Il y a forcément quelque chose sinon ça marcherait... Les urls sont-elles bonnes ? Firebug indique-t-il une erreur ? ( le package joint fonctionne, ceci peut aider à trouver le soucis ) "

par madaniso
(a acheté ce tuto - 22 juillet 2011)

" Bonjour, je viens de commencer à coder. Je suis coincé au niveau de l'affichage de la grande image, donc partie CCS, juste avant le placement du bouton.
Les miniatures sont posées correctement, mais quand je tape le code pour les grands formats, je me retrouve avec une slide complètement blanche, je ne sais pas où passe les miniatures du code précédent.
Le bouton quand à lui descend bien en bas du slide, j'ai regardé mon code plusieurs fois, il est bon. "

par Vincentbv
(a acheté ce tuto - 11 juillet 2011)

" Super tuto, merci mr32 ! :)

Bonnes explications, code très propre et bonne dynamique de voix.

Merci ! "

par wiegà voté :
(a acheté ce tuto - 16 juin 2011)

" j'ai pu aprécier le fait de réaliser à l'aide de ce tutoriel ma bannière jquery. Je regrette en revanche qu'il n'y ait pas plus d'approfondissmeent dans les expliactions du code. Je me suis finalement retrouvé à recopier comme un mouton les codes présentés. Dommage car cette vidéo est intéressante. "

par thierry21
(a acheté ce tuto - 07 mai 2011)

" C'est bien "

par mr32
(auteur de ce tuto - 05 mai 2011)

" Pour modifier les liens, il suffit de modifier les balises <a href="#blabla">....</a>
Et notamment de remplacer "#blabla" par "http://www.ton-lien.fr" "

par cgodfrinà voté :
(a acheté ce tuto - 05 mai 2011)

" impecc merci beaucoup.... je n'ai pas vu au mettre les liens par contre... si la personne décide de cliquer sur une des images :-) - voilà merci j'ai appris de nouvelles choses :-) bonne continuation et j'espère qu'il y en aura d'autres :-) "

par GIGAPILLSà voté :
(a acheté ce tuto - 05 mai 2011)

" Très bien expliqué, avec une voix sympa qui n'endort pas. merci "

 

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 d’une durée de 33 minutes a été acheté 483 fois et a reçu une note moyenne de 5/5.

Ce tuto a été publié le 3 mai 2011 par mr32, contributeur, ayant reçu une note moyenne de 4,6/5 pour l’ensemble de ses vidéos, dans les catégories Tuto jQuery webdesign et 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 !