Dans des tutoriels précédents, nous avions envisagé d'exploiter l'API Behance pour gérer notre propre page Web, puis, en utilisant LESS, nous avons rendu le tout présentable. Dans ce didacticiel, nous allons améliorer l'expérience des visiteurs en ajoutant un effet lightbox et des animations CSS..
Lightbox et effets d'animation
De nos jours, de nombreux sites Web de portefeuilles utilisent une lightbox pour leurs images de portefeuille. Dans ce tutoriel, nous allons appliquer la même chose à notre site Web. La jaquette d'image effectuera un zoom avant lorsque les utilisateurs cliquent dessus, ainsi que les autres images figurant dans le contenu, de manière à ce que les utilisateurs puissent voir chaque image de plus près..
Voici les outils dont nous avons besoin pour accomplir ceci:
Popup Magnific
Nous allons nous appuyer sur un plugin jQuery Lightbox appelé Magnific Popup de Dmitry Semenov. Il est léger, rapide et réactif - comme nous le voulons.
Animate.css
Nous intégrerons également une animation CSS3 pour aider notre site Web à prendre vie. Nous allons adopter quelques extraits de Animate.css, qui fournissent une formidable collection d’animations CSS3 via un certain nombre de classes en insertion pour appliquer immédiatement l’animation..
Intégrer Magnific Popup
Commençons par ajouter la feuille de style Magnific Popup à la tête étiquette.
Ensuite, nous ajouterons les scripts plus bas dans le bas de page, ce qui permettra à la page de s'afficher avant le chargement des scripts comportementaux..
Ensuite, nous devrons ajouter un HTML5 Les données attribut, data-project-id = "this.id" au figure élément qui enveloppe l'image de couverture du portefeuille, comme suit.
… #if this.covers. [404] else #if this.covers. [230] autre /si si …
Actualisez le site Web et inspectez-le via Chrome DevTools ou Firebug. Vous devriez trouver le data-project-id contient le numéro d'identification du portefeuille, comme indiqué ci-dessous.
L'élément data-project-id dans figure avec le numéro d'identification
Nous allons utiliser le Les données attribut permettant de récupérer le contenu du portefeuille sélectionné avec cet identifiant attribué ultérieurement.
Après cela, nous devrons également changer l’aspect du curseur en agrandir, comme suit:
le agrandir le curseur suggérera que l'image est zoomable; l'utilisateur doit s'attendre à pouvoir cliquer sur l'image. Cependant, le agrandir Selon MDN, la valeur n'est prise en charge dans aucune version d'Internet Explorer. Voilà pourquoi nous avons également spécifié le curseur à aiguille antérieur à curseur: zoom avant comme solution de secours pour Internet Explorer ainsi que pour les autres navigateurs qui pourraient ne pas la prendre en charge.
Faire que ça marche
Maintenant, nous allons ajouter le script pour initialiser Magnific Popup. Comme le plan ne consiste pas uniquement à afficher l'image de couverture du portefeuille, mais également à intégrer les autres images dans le contenu, le script peut paraître un peu lourd. Nous allons donc ajouter le script séquentiellement. La première chose que nous écrirons est le jQuery .sur clic') méthode. Nous n'exécuterons Magnific Popup que si l'utilisateur clique sur l'image de couverture..
$ ('# portfolio'). on ('click', '.portfolio-cover', function () // le reste du script va ici…
Ensuite, nous définirons les variables suivantes:
$ this, la cette variable fait référence à l'objet lié à la .sur() méthode.
projectID contiendra $ this.data ('id-projet') qui saisit ce numéro d'identification de la data-project-id attribut. Nous allons utiliser cet identifiant pour récupérer le contenu via l'API Behance.
beProjectContentAPI contiendra les points de terminaison API Behance pour récupérer le contenu du projet Behance.
keyName, cette variable forme le nom de clé que nous allons utiliser pour stocker les données extraites de Behance dans localStorage. Le format du nom sera behanceProjectImages- suivi du numéro d'identification du projet. Contrairement à ce que nous avons fait précédemment, nous utilisons maintenant localStorage pour stocker les données au lieu d’utiliser sessionStorage. La raison en est que nous supposons que les utilisateurs de Behance mettraient rarement à jour le contenu une fois celui-ci publié. Donc, dans ce cas, il est préférable d’utiliser localStorage, car il stockera les données de manière persistante; les données resteront dans le navigateur tant que nous ne les supprimons pas intentionnellement.
$ ('# portfolio'). sur ('clic', '.portfolio-cover', fonction () var $ this = $ (this), IDprojet = $ this.data ('id_projet'), beProjectContentAPI = 'http://www.behance.net/v2/projects/'+ projectID +'? callback =? & api_key = '+ apiKey, keyName =' behanceProjectImages- '+ projectID;
Ensuite, nous créons la fonction principale qui exécutera Maginific Popup. Nous nommerons cette fonction showGallery (). Nous appliquerons également les options suivantes dans Magnific Popup:
articles; la articles sont très importants ici. Ceci contiendra la liste des images qui seront affichées dans la Lightbox.
Galerie; lorsque nous activons la galerie, Magnific Popup ajoute des flèches pour naviguer dans chaque image..
type; nous allons utiliser l'image pour le seul type de contenu autorisé dans la Lightbox.
Ce dernier morceau est inévitable. nous devrons ajouter .magnificPopup ('open') il ouvre donc la visionneuse immédiatement après l'initialisation.
Nous n'exécuterons que showGallery () sous certaines conditions; si les données du portefeuille sélectionné sont disponibles dans localStorage, allez les chercher et exécutez le showGallery (), sinon obtenir les données de l'API avec $ .getJSON () d'abord, puis exécutez showGallery () et stockez les données dans localStorage pour une utilisation ultérieure. Comme nous l'avons fait précédemment, nous devons utiliser JSON.stringify () convertir les données en une chaîne afin de pouvoir les enregistrer dans le stockage local, nous utiliserons ensuite JSON.parse () formater les données en JSON.
Vérification des images
Ce que nous devons noter ici, c'est que le contenu extrait de l'API peut être une vidéo, une vidéo incorporée ou du texte, qui ne sont pas autorisés. nous n'acceptons que le type de contenu de l'image. Ainsi, avant de poster les données sur localStorage, nous devons ajouter le code suivant pour filtrer le contenu..
var src = []; $ .each (projectContent.project.modules, fonction (index, mod) if (mod.src! = non défini) src.push (src: mod.src););
Voici le script complet, à la fin.
$ ('# portfolio'). sur ('clic', '.portfolio-cover', fonction () var $ this = $ (this), IDprojet = $ this.data ('id_projet'), beProjectContentAPI = 'http://www.behance.net/v2/projects/'+ projectID +'? callback =? & api_key = '+ apiKey, keyName =' behanceProjectImages- '+ projectID; fonction showGallery (dataSource) $ this.magnificPopup ( items: dataSource, gallery: enabled: true, tapez: 'image'). magnificPopup ('open');; if (localStorage.getItem (keyName)) var srcItems = JSON.parse (localStorage.getItem (keyName)); showGallery (srcItems); else $ .getJSON (beProjectContentAPI, fonction (projectContent) var src = []; $ .each (projectContent.project.modules, fonction (index, mod) if (mod .src! = non défini) src.push (src: mod.src);); showGallery (src); var data = JSON.stringify (src); localStorage.setItem (keyName, data);) ;;);
Maintenant, lorsque vous cliquez sur l'image, elle doit être agrandie et affichée à la lumière:
Si vous inspectez le site Web avec Chrome DevTools, vous devriez maintenant trouver que le contenu est stocké dans localStorage..
De plus, vous pouvez naviguer à travers toutes les images du contenu en utilisant les flèches. Mais la transition est actuellement assez délicate (non?); il saute instantanément d'une image à l'autre. Rendons-le donc plus fluide et plus communicatif avec une certaine animation.?
Intégration de Animate.css
Tout d'abord, nous devrons ajouter mainClass: 'animée' et enlèvementDelay: 350 à notre fonction magnificPopup.
Dans ce code, nous avons ajouté une nouvelle classe nommée Animé à la visionneuse. le Animé classe est la classe utilisée dans Animate.css pour désigner une animation pour un élément. Cette classe serait également utile pour activer ou désactiver l’animation à votre guise; si vous voulez le désactiver, supprimez simplement le mainClass: 'animée', ligne.
Nous avons également ajouté removalDelay, qui spécifie la durée avant que la Lightbox soit complètement supprimée du DOM. Le délai ici donnera à l'animation un peu de visibilité.
Adapter les styles d'images clés
Ensuite, nous adopterons quelques images clés CSS, transformations et transitions qui forment l’effet d’animation dans Animate.css. Nous allons les convertir au format LESS en utilisant LESSHat.
Nous avons ajouté plusieurs images clés nommées fadeInRight, fadeInLeft, fadeOutRight, fadeOutLeft, fadeInDown, et fadeOutDown qui ont été traduits au format LESS avec LESSHat .images clés () Mixins.
Nous allons animer plusieurs parties de la Lightbox, à savoir: la superposition d’arrière-plan qui couvre toute la fenêtre, le contenu ou l’image de la Lightbox et les flèches de navigation..
L'animation en arrière-plan de superposition est assez simple. Il n'aura pas du tout besoin des images clés ci-dessus, il se fondra tout simplement en fondu lorsque la Lightbox apparaît et en fondu en fin de vie lorsqu'il disparaît. Voici toutes les règles de style pour réaliser cette animation.
Dans Magnific Popup, l’arrière-plan de superposition se voit attribuer une classe nommée mfp-bg. Dans ce code, nous définissons son opacité sur 0 il sera donc initialement invisible et définira également la durée de la transition pour le opacité propriété.
De plus, Magnific Popup produira un ensemble de nouvelles classes pour cibler différents états; par exemple, lorsque la Lightbox est complètement affichée, elle ajoute le prêt à la fabrication classe. Dans cet état, nous avons défini l'opacité sur 0,8. Lorsque nous avons défini la transition, cela nous donnera l’effet d’animation; l'opacité transmettra de 0 à 0,8 en 350ms.
Ensuite, lorsque la Lightbox disparaîtra, Magnific Popup affichera le suppression de MFP classe. Dans cet état, nous redéfinissons son opacité sur 0, rendre à nouveau invisible le fond de superposition.
Vous trouverez ci-dessous les règles de style qui animent le contenu de la visionneuse..
Comme l’arrière-plan de superposition, nous définissons également la durée de transition du contenu à 350ms. Nous appliquons également les images clés avec .nom-animation () Mixins. Ici, nous avons défini le contenu pour un fondu en entrée et en même temps, glissez vers le bas quand il apparaît, puis glissez vers le bas et fondu quand il disparaît..
Animation des flèches de navigation
Enfin, nous allons ajouter l'animation pour nos flèches Lightbox.
Le code ici est assez similaire à l'extrait de code qui anime le contenu. Ici, la flèche gauche apparaîtra et glissera de la droite lorsqu'elle apparaîtra, puis glissera vers la gauche et disparaîtra progressivement lorsqu'elle disparaîtra. La flèche droite fera simplement le contraire..
Conclusion
Cette série de tutoriels a été très longue! Nous avons construit avec succès un site Web de portefeuille personnel fonctionnel à partir du sol avec l’API Behance comme source de données. Pour construire notre site Web, nous avons également utilisé un certain nombre d'outils modernes tels que LESS, HandlebarsJS et Animate.css. Il est assez facile de déployer le site Web, car il ne s'agit que d'un code HTML statique. En fait, notre démo est hébergée sur une page statique GitHub. Alternativement, vous pouvez le télécharger via FTP sur un serveur Web.
Si vous souhaitez approfondir ce projet, vous pouvez ajouter, par exemple, un "filtre" permettant de trier le portefeuille en fonction de son champ de création. Vous pouvez également ajouter de beaux effets de survol. En tout cas, j'espère que vous avez apprécié la série et appris quelques astuces que vous pouvez adopter sur votre propre site web..
Share
else #if this.covers. [230]
autre
/si si
L'élément data-project-id dans figure avec le numéro d'identification 
Accentsconagua
else #if this.covers. [230] 
autre 
/si si 
