CSS3 – Créer un slideshow automatique et contrôlable Si vous suivez le compte @NoupeMag sur Twitter (ça marche aussi pour mon compte), vous avez certainement vu passer mon slideshow en CSS3 datant de l’an dernier. Ce n’était pas ma première tentative de slideshow comme le présentent ces premier et second travaux datant de mai 2010. Ce tutoriel ne s’adresse pas aux débutants, il vous faudra un minimum de connaissances techniques pour vous y retrouver dans les tronçons de code qui vont suivre. Cependant, le code commenté reste – je l’espère – accessible. Avant propos La page de démonstration du slideshow full CSS3 vous propose des fichiers sources en téléchargement, profitez-en, notamment si vous souhaitez récupérer les images. Les codes CSS fournis ici sont légèrement différents de ceux fournis dans l’archive zippée téléchargeable. Les codes CSS3 présents sur ce tutoriel ne tiennent pas compte des préfixes parfois nécessaires (-webkit-, -moz-, -ms-, -o-) pour une question de gain de place dans le code. Les défauts des versions précédentes
Fullscreen Video Slideshow with BigVideo.js A tutorial about how to create a slideshow-like fullscreen video background using BigVideo.js, a jQuery plugin for big background video. View demo Download source(Please note that the ZIP file does not contain any video files due to their size.) BigVideo.js is a jQuery plugin that makes it easy to create fit-to-fill background video on a web page. In this tutorial, we’ll be creating a page that shows a series of video screens, showcasing the free HD stock video footage and animated backgrounds available on Beachfront B-Roll. Before we get started, give some thought as to whether using this technique at all is appropriate for your project. The first thing you’ll need to do is get video content. The Markup First, let’s do the markup for the page: We have a header on the center of the screen. The CSS Before we get into the video, we need to style the page. Since navigation will be handled by a single big next button, we set the body overflow to hidden. Note the data-video attribute. Tidying up
Scattered Polaroids Gallery A flat-style Polaroid gallery where the items are scattered randomly in a container. When a specific item is selected, it will move to the middle while the other Polaroids will make space for it by moving to the sides. Optionally, an item can have a backface which will be shown by flipping the Polaroid when clicking on the current navigation dot again. View demo Download source Today we’d like to share a little gallery experiment with you. We use the following structure for the gallery: The “photostack-start” class can be used to show an initial overlay on the gallery container. The div with the class “photostack-back” can be used to insert some more info for the backside of the Polaroid. The shuffle iteration count (the amount of times we want all Polaroids to move around before the next item becomes current) can be controlled with the data-attribute data-shuffle-iteration. Take a look at some screenshots of the gallery: I hope you like this gallery idea and find it inspirational :)
Un Infinite slideshow en quelques lignes de jQuery Un Slideshow sur une page d’accueil, c’est joli, c’est à la mode, mais c’est souvent lourd à intégrer. Il vous faudra des compétences certaines en jQuery, ou utiliser des plugins déjà prêts. Aujourd’hui je vous propose un tutoriel pour créer un infinite slideshow en quelques lignes de code. Je vous ai promis, via Twitter, un « dossier-tutoriel » sur la création d’un slideshow de A à Z avec quelques options sympa. Cet article ne fait pas partie du dossier, il n’a pas grand chose à voir, il s’agit simplement de vous présenter une solution enfantine avec une petite dose de HTML, CSS et jQuery. L’effet infinite Cet effet donne l’impression que votre slideshow ne se termine jamais, il tourne en boucle indéfiniment sans jamais revenir en arrière. À chaque fois qu’une image vient d’être vue et laisse place à l’image suivante, elle est placée en fin de liste afin de créer une boucle sans fin. La structure de base Une division contenant une liste d’images suffira pour notre tutoriel. Exemple :