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

Aller plus loin avec les éléments de jQuery UIAller plus loin avec les éléments…
Tuto jQuery UI : Analyser et comprendre les interactions, composants…

Découverte de jQuery UIDécouverte de jQuery UI
Voici une formation jQuery UI, en vidéo signée Video2brain.…

AJAX et jQueryAJAX et jQuery
Apprenez à utiliser des données dynamiques jQuery et AJAX…

Aller plus loin avec les notions de base de jQueryAller plus loin avec les notions…
Approfondissez vos connaissances en jQuery jQuery est une librairie…

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... https://github.com/basselin

Toutes les formations de Mr32


Témoignage des clients de mr32

merci pour l'effort , un tuto super.

merci pour ton travail qui permet nous amateur d'avancer merci encore

Merci pour vos vidéos continue :)

Toujours de très bon tutos !

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

Lire les autres témoignages

 

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 (21 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (24)

par patrick45140a voté :
(a acheté ce tuto - 18 février 2014)

" SUPER GENIAL, trés bien expliqué, bravo,

et très utile "

par mr32
(auteur de ce tuto - 01 mars 2013)

" Bonjour DomZ,
Cette bannière se cale justement selon les css et non le javascript, donc si ta feuille de styles est bien calée pour ton responsive webdesign, tu n'auras aucun problème. "

par DomZ
(a acheté ce tuto - 26 février 2013)

" Excellent tuto, merci au formateur !
Une petite question cependant : ce style de bannière est-il adaptable dans le cadre d'un responsive webdesign ? Les images seront-elles redimensionnées en fonction de la taille des div ?
Merci. "

par Reikia voté :
(a acheté ce tuto - 28 août 2012)

" Super tutorial qui permet de bien comprendre le fonctionement basique du dom et des animations sous jquery ! "

par myunilivea voté :
(a acheté ce tuto - 21 août 2012)

" Je rcommande ce formateur, clair précis maitrise son sujet et très pédagogue. "

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

" Excellent tuto !
Merci "

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

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

par Gaston22fra 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 illusiona 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 wiega 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 cgodfrina 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 GIGAPILLSa 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é 644 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 !