AccueilActualitésRessourcesSlider : Créer et télécharger un » awesome slider » pour vos créations en CSS3 / Javascript Ressources Slider : Créer et télécharger un » awesome slider » pour vos créations en CSS3 / Javascript Publié le 07/04/2011 Partager cet article : Partager sur Facebook Partager sur Twitter Partager sur Linkedin Share on pinterest Voici un tuto expliquant comment rendre fonctionnel un Slider, avec celui de Sébastien GABRIEL comme exemple, en utilisant du CSS3 pour simplifier le javascript. Introduction Dans ce tutoriel vous découvrirez comment intégrer un slider simplement en CSS3 et JavaScript, avec un timer pour les transitions. Avec l’arrivée de Firefox 4, tous les grands navigateurs ont maintenant dans leur version la plus récente le support du CSS3. Pour fêter ça, je propose un petit tuto pour expliquer comment faire un slider avec le moins de javascript possible et du CSS3. Pour mon exemple (que vous pouvez essayer ici avec l’encart bleu et là sinon), nous allons utiliser un des slider les plus simple que je n’ai jamais intégré le slider de Sébastien GABRIEL, que vous retrouverez à cette adresse. Ma source est disponible en fin d’article, je conseille de la télécharger et de la suivre en même temps que l’article, les explications risquent d’être un peu faibles sinon. Voir la démo | Télécharger Le Vif du sujet Bon, première étape, on personnalise les textes, les images, puis on découpe le .psd. Ensuite, on intègre. Jusque là, facile. HTML/CSS Maintenant, un peu de réflexion: Comment gérer les images et leur déplacement? Et bien, nous allons créer une sorte de visionneuse, à partire d’un <ul>. Nous créons notre ul, lui donnont une taille suffisante, et nous mettons toutes les images (de bien jolis oiseaux fournis par GINET Vincent) dans des <li>. Il ne nous reste plus qu’à mettre les li en float, supprimer les margin/padding, et nous voilà avec une belle banderole. Pour ne voir qu’une seule image, on ajoute un mask avec un overflow:hidden; et le tour est joué. Deuxième grande interrogation : comment changer l’image affichée? Et bien, nous allons décaler la banderole avec la propriété left, en fonction de la classe du slider (« image1 », « image2 », …) pour afficher l’image désirée. Pour les transitions, nous utilisons les nouvelles propriétés du CSS3, à savoir transition-property et transition-duration. Javascript Et enfin, comment changer d’image ? Un bête timer javascript comme setInterval() ou setTimeout() fait très bien l’affaire. Il nous suffit de lui donner une fonction (par exemple une fonction pour changer la classe du slider, que nous apellerons changeImage), et un temps (en millisecondes) avant d’executer l’action. Ce qui nous donne, par exemple, setTimeout(« changeImage() »,1000);. Il nous reste plus qu’à faire en sorte que la fonction change d’image, et de gérer tout les cas possible (si nous avons atteint le bout de la banderole, on retourne au début, …), et nous y sommes! Le résultat est un slider avec le strict minimum en javascript, et modifiable simplement en CSS et HTML. La source est disponible ici, et abondament commentée. Enjoy! Découvrez également 10 Slides de qualité pour animer vos Web design By Benjamin Sanchez Laisser un commentaire Annuler la réponseVotre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *Comment Nom * E-mail* Site web Enregistrer mon nom, mon e-mail et mon site dans le navigateur pour mon prochain commentaire.
Ressources Stockio.com votre nouvelle banque de ressources gratuites pour les vidéos, typographies, icônes et photographies Publié le 22/09/2017
Ressources 20 packs d’éléments graphiques à télécharger gratuitement autour de Star Wars Publié le 02/12/2015