Aujourd’hui, nous allons créer une page Web qui utilise non pas un mais trois diaporamas distincts réunis pour ressembler à un élément sérieusement dynamique. Cet effet est parfait pour tout portfolio de designer ou de photographe.
En cours de route, nous utiliserons des langages HTML, CSS et jQuery extrêmement basiques. Ouvrez un éditeur de texte et suivez-le pour créer le vôtre!
Inspiration
Récemment, je parcourais notre superbe galerie de designs et découvrais le portefeuille de photographies de Jessica Kripp, présenté ci-dessous. J'ai été immédiatement impressionné par le type de mur de diaporama de photos qui occupait la page d'accueil.
Ici, nous n’avons pas seulement un, mais trois diaporamas de photos distincts exécutés indépendamment, mais conçus de manière synergique comme une seule unité. C'est un effet vraiment cool que je n'ai jamais vu auparavant. C'est peut-être un peu gourmand en processeur, mais c'est quand même assez amusant.
Aujourd'hui, nous allons en construire un pour voir comment cela se passe. Nous utiliserons HTML, CSS et jQuery, mais ne vous laissez pas intimider, c'est très simple et conviendra parfaitement aux débutants.
Étape 1: HTML de base
La méthode la plus simple pour aborder ce projet consiste à obtenir le travail de conception et de mise en page de base avant de commencer à jouer avec JavaScript. Cela signifie que nous allons concevoir la page avec des images statiques, puis revenir en arrière et ajouter la fonctionnalité de diaporama.
Pour commencer, créez un conteneur de base suivi de trois div, contenant chacun une image. Je sais, nous commençons déjà à être un peu lourd, mais le plugin jQuery que nous utiliserons plus tard pour le diaporama nécessite que chacune de ces images ait son propre conteneur parent.
Ensuite, nous appelons les divs photos. La chose la plus importante ici est que je règle le flotteur de smallPhoto1 à gauche et celui de smallPhoto2 à droite. Cela garantira qu'ils circulent correctement et se heurtent les uns contre les autres (si vous avez toujours des problèmes de mise en page, essayez un div de clearfix). J'ai également ajouté des valeurs de hauteur pour chacun. À long terme, cela ne semble pas être nécessaire, mais j'avais quelques problèmes de mise en page à ce stade sans eux.
Étape 2: Aperçu
Après le CSS ci-dessus, votre page doit être belle et nette, avec un arrière-plan sombre et une grille de photos serrée, comme indiqué dans l'aperçu ci-dessous.
Étape 3: Outils tiers
Maintenant que notre page est pratiquement terminée en ce qui concerne la mise en page, il est temps de vous préparer à rendre la page plus dynamique. Pour ce faire, nous devrons charger deux outils JavaScript.
Le premier est une bibliothèque qui ne nécessite aucune introduction. jQuery est l'extension JavaScript préférée de tout le monde. Elle facilite généralement la vie, que vous créiez des animations complexes ou que vous recherchiez simplement un meilleur moyen de cibler des éléments spécifiques.
Pour être sûr d'avoir la version la plus récente de jQuery, je passe toujours à ScriptSrc, où vous cliquez simplement sur un bouton pour copier le lien de la dernière version dans votre presse-papiers.
Le véritable moteur de nos diaporamas aujourd'hui sera jQuery Cycle, un plug-in qui facilite énormément la création de diaporamas jQuery à la volée.
Nous verrons comment l'implémenter à l'étape suivante. Pour l'instant, vous pouvez inclure le script suivant dans votre en-tête.
Moderniser
Si, comme moi, vous aimez utiliser HTML5 et CSS3, vous voudrez également ajouter Modernizr pour vous assurer que tout reste aussi compatible que possible avec IE.
Étape 4: Donner vie aux diaporamas
Implémentation de jQuery Cycle est super facile. Il existe une multitude d'options et d'effets, mais pour les besoins actuels, nous allons utiliser un minimum de fonctionnalités disponibles.
Pour commencer, affinons un peu notre code HTML. jQuery Cycle cherchera n'importe quoi avec la classe de? slideshow? et créer un diaporama de ses enfants. Pour ce faire, nous ajoutons la classe diaporama à nos trois divisions d’image et ajoutons deux images supplémentaires à chacune. Cela fera en sorte que chaque image passe par trois itérations.
Ajoutons maintenant un peu de style. Nous allons donner à l'arrière-plan la même couleur que le titre pour plus de cohérence et ajouter un peu de rembourrage pour lui donner du poids. De plus, j’ai réglé la position sur absolu et lui ai donné une marge négative pour qu’elle ressorte du diaporama un peu à gauche.Enfin, j'ai ajouté une ombre de base pour l'afficher sur différentes couleurs.
Le problème ici est que, même si la balise est plus haute dans la hiérarchie HTML, elle finit par être recouverte par le diaporama. Vous pouvez seulement en avoir un aperçu entre les diapositives:
C'est assez facile à résoudre avec un peu de magie z-index. Il suffit de définir le z-index de la balise à? 1? et celle du bigPhoto div à? -1 ?. Cela fera en sorte que la balise se trouve au-dessus du diaporama.
Produit fini: démonstration en direct
Avec ça, nous avons tous fini! N'hésitez pas à regarder la démo en direct pour voir notre création en action.
Conclusion
Chapeau bas au concepteur derrière le site de Jessica pour l'idée géniale de combiner plusieurs diaporamas. La duplication de cet effet a constitué un excellent tutoriel sur l’utilisation de HTML, CSS et JavaScript pour créer des diaporamas simples mais étonnants.
Assurez-vous d'aller au-delà de l'exemple ci-dessus et expérimentez différentes dispositions et effets. Évidemment, plus vous ajoutez de diaporamas, plus votre page s’enlis, mais sinon, vous n'êtes limité que par votre créativité!