Share
Le 18 octobre 2018 est la Journée de l'esprit, chose que nous reconnaissons chaque année à Tuts +, et ce jour-là, nous dénonçons le harcèlement des LGBTQ, en particulier chez les jeunes LGBTQ..
Dans ce tutoriel, vous apprendrez à créer une présentation animée de la Spirit Day avec fullPage v3..
Voici ce que nous allons construire:
Remarque: Vous vous souvenez peut-être d'un autre tutoriel que j'ai écrit sur fullPage il y a quelque temps. Ce tutoriel utilise fullPage v2, mais comme de nombreuses personnes utilisent encore la v2 dans leurs projets, il n’est pas nécessaire de valider ce tutoriel dans les archives..
fullPage.js est une bibliothèque JavaScript extrêmement populaire créée par Alvaro Trigo. Cela nous permet de créer de magnifiques sites Web et applications avec défilement d'une page..
Bien qu'elle soit considérée comme une bibliothèque JavaScript sans dépendance, elle peut également être utilisée comme un plugin jQuery, tout comme sa version précédente (v2)..
alvarotrigo.com/fullPageContrairement à la v2, cette nouvelle version est gratuite sous certaines conditions. Une licence est requise non seulement pour les projets commerciaux, mais également pour tout projet non commercial qui n'est pas à source ouverte et compatible avec la licence GPLv3..
Il prend en charge les navigateurs et est livré avec une documentation détaillée. Vous trouverez une grande liste d’exemples de travail sur cette page..
Au-delà des fonctionnalités de base, il fournit des fonctionnalités supplémentaires payantes appelées extensions..
En raison de sa popularité, un thème WordPress ainsi que des wrappers pour différents frameworks JS (par exemple, Vue.js) a également été développé..
Pour commencer à utiliser fullPage, commencez par télécharger et installer les fichiers suivants dans votre projet:
Accentsconagua
fullpage.css ou sa version abrégéefullpage.js ou sa version abrégéeVous pouvez éventuellement importer easings.min.js ainsi que scrolloverflow.min.js..
Vous pouvez récupérer une copie des fichiers fullPage correspondants en visitant son dépôt Github, en utilisant un gestionnaire de packages (par exemple, npm) ou en chargeant les actifs nécessaires via un CDN (par exemple, cdnjs). Pour ce tutoriel, je vais choisir la dernière option et tout extraire dans CodePen.
Pour les besoins de ce tutoriel, au-delà des fichiers fullPage, j’ai également incorporé Babel.
Dans cet esprit, si vous regardez sous le Réglages onglet de notre stylo de démonstration, vous verrez que j’ai inclus un fichier CSS externe et deux fichiers JavaScript externes.
Les paramètres CSS requis
Les paramètres JavaScript requisPour donner le coup d'envoi, nous définirons un élément wrapper contenant toutes les sections. Chaque section reçoit le nécessaire section classe. Cette classe peut être personnalisée au cours du processus d’initialisation de la bibliothèque via le sectionSélecteur option de configuration. Tous les éléments de section sont enveloppés dans un .récipient élément.
Voici la structure HTML de base:
………………
Une fois le code HTML en place, examinons les styles CSS que nous appliquerons à notre page. Pour des raisons de simplicité, nous ne discuterons que du plus crucial des styles disponibles..
Tout d'abord, nous définissons deux propriétés personnalisées à l'aide de variables CSS:
: racine --main-white-color: blanc; --main-black-color: noir;
Ensuite, nous allons spécifier les styles de nos sections:
.section arrière-plan: gradient linéaire (jusqu'en bas, # 7f2a8b 20%, # a336b2 70%, # b43dc4); .section: last-child background: # 7b2987 url (IMG_SRC) no-repeat fixed center / cover; background-blend-mode: luminosité; .section .container max-width: 750px; largeur: 85%; rembourrage: 15px; marge: 0 auto; text-align: center; .section .box padding: 10px; .section img display: block; largeur maximale: 80%; largeur: 500px; marge: 0 auto; .section em font-size: 0.8rem; .section a font-size: 2.5rem; rembourrage en bas: 1px; bord inférieur: solide 2px; texte-décoration: aucun;
Enfin, nous définirons les règles responsables de l’animation du .boîte éléments (ils figurent dans les deuxième, troisième, quatrième et cinquième sections):
.section .box opacité: 0; transformation: scale3d (0, 0, 0) translate3d (0, -100%, 0); .section .box.is-animated animation: fadeIn 0.5s avant-arrière avant-arrière; @keyframes fadeIn 100% opacity: 1; transformation: scale3d (1, 1, 1) translate3d (0, 0, 0);
Il serait bien de personnaliser l'apparence de la navigation par points en fonction de nos besoins.
La partie gauche de la capture d'écran ci-dessous montre les styles par défaut, tandis que la partie droite montre les styles souhaités:
De plus, nous voulons encore une chose. Lors de la navigation vers la dernière section, comme nous utiliserons un fond d’image pâle, la couleur de la navigation par points devrait passer au noir, comme ceci:
Il y a deux façons de savoir quand la dernière section est visible.
Tout d'abord, via CSS. La bibliothèque ajoute une classe de la forme fp-visualisation-SECTION-SLIDE au corps élément dépendant de la section / diapo active.
Donc, comme nous avons six sections, lorsque nous quittons la cinquième section et visitons la dernière, la corps classe (à partir de fp-Viewing-0) sera comme suit:
Cette méthode n'est pas parfaitement flexible. Par exemple, nous pourrions ajouter une règle qui change la couleur des points lorsque la sixième (dernière) section devient visible:
.fp-visualisation-5 # fp-nav ul li une étendue fond: var (- couleur-principale-noire);
Mais ensuite, si nous ajoutons une septième section, nous devrons modifier la règle susmentionnée à celle-ci:
.fp-visualisation-6 # fp-navigation ul li une étendue fond: var (- couleur-principale-noire);
La deuxième méthode utilise JavaScript (comme nous le verrons dans la section suivante) et nous donnera plus de flexibilité. Par notre propre instruction une coutume fp-last la classe sera ajoutée à la corps chaque fois que nous naviguons vers la dernière section.
Sous les hypothèses exposées ci-dessus, examinons les styles nécessaires à la personnalisation de l'aspect de la navigation par points:
# fp-nav ul li marge: 15px 7px; # fp-nav ul li une étendue background: var (- main-white-color); bordure: 3px solide transparent; durée de transition: 0.5s; # fp-nav ul li une étendue, # fp-nav ul li: survolez une étendue width: 12px; hauteur: 12px; # fp-nav ul li une étendue, # fp-nav ul li: survoler une étendue, # fp-nav ul li étendue.active, # fp-nav ul li: survol a.active span marge: -9px 0 0 -9px; # fp-nav ul li: survolez une étendue, # fp-nav ul li.active span background: transparent; couleur de bordure: var (- couleur principale blanche); .fp-last # fp-nav ul li une étendue background: var (- main-black-color); .fp-last # fp-nav ul li: survolez un intervalle, .fp-last # fp-nav ul li a.active span background: transparent; couleur de bordure: var (- couleur principale);
Notre dernière image est une image que j'ai téléchargée à partir d'Envato Elements. C'est une image en couleurs, mais grâce à certains CSS, nous pouvons appliquer un mode de fusion dans le navigateur qui mélange l'image avec un fond violet:
Le mode de fusion (luminosité) est appliqué comme suit:
.section: last-child background: # 7b2987 url (spirit.jpg) centre / cache fixe sans répétition; background-blend-mode: luminosité;
Pour une meilleure compréhension du fonctionnement des modes de fusion CSS, consultez ces tutoriels:
À ce stade, nous sommes prêts à attirer notre attention sur JavaScript..
Dans un premier temps, nous allons initialiser fullPage avec les personnalisations suivantes:
OPEN-SOURCE-GPLV3-LICENSE. Si vous envisagez d'utiliser FullPage dans un projet commercial, vous devrez modifier cette valeur avec votre propre clé de licence..CSS3: faux. Nous faisons cela pour éviter un conflit qui survient dans certains navigateurs entre les éléments transformés et leurs éléments enfants à position fixe. Notre dernière section a une image de fond fixe.scrollOverflow: true et charger le scrolloverflow.min.js bibliothèque. const fullPage = document.getElementById ("fullpage"); nouvelle page complète (fullPage, licenseKey: "OPEN-SOURCE-GPLV3-LICENSE", navigation: true, navigationPosition: "left", css3: false, scrollOverflow: true);Dans notre projet, les choses suivantes devraient arriver:
.boîte élément. Si tel est le cas, nous lui donnons la est animé classe..is-box.is-animated élément. Dans ce scénario, nous supprimons le est animé classe de celui-ci.fp-last classe à la corps élément. Sinon, nous nous assurons que cette classe est supprimée.Pour satisfaire aux exigences ci-dessus, nous tirons parti de la afterLoad et en congé événements.
le afterLoad l'événement est déclenché une fois qu'une section a été chargée, une fois le défilement terminé.
le en congé L'événement est déclenché lorsque l'utilisateur quitte une section, dans la transition vers la nouvelle section..
Voici l'initialisation résultante avec les événements susmentionnés:
const body = document.querySelector ("body"); const fullPage = document.getElementById ("fullpage"); const boxes = document.querySelectorAll (". box"); nouvelle page entière (fullPage, licenseKey: "OPEN-SOURCE-GPLV3-LICENSE", navigation: true, navigationPosition: "left", css3: false, scrollOverflow: true, afterLoad: fonction (origine, destination, direction) const activeSection = destination.item; if (activeSection.querySelector (". box")) activeSection.querySelector (". box"). classList.add ("is-animated");, onLeave: function (origine, destination, direction) ) destination.isLast? body.classList.add ("fp-last"): body.classList.remove ("fp-last"); if (document.querySelector (". box.is-animated")) document .querySelector (". box.is-animated") .classList.remove ("is-animated");); Et nous avons fini! Dans ce tutoriel, nous avons abordé les bases de fullPage 3. Nous pourrions en discuter beaucoup plus et j'espère que la démo vous a suffisamment inspiré pour construire quelque chose de magnifique avec cette bibliothèque étonnante..
Si vous souhaitez voir plus de sujets avancés avec fullPage (je prévois quelque chose basé sur WordPress, fullPage et AJAX si cela vous intéresse?), Laissez-moi savoir dans les commentaires ci-dessous. Et n'oubliez pas de consulter https://www.glaad.org/spiritday pour montrer votre soutien aujourd'hui. Aller violet!
