Share
Cela fait un moment que c’est l’un des mots les plus en vogue en matière de conception de sites Web. Nous allons donc essayer un peu de parallaxe. Nous allons mettre en place une présentation réactive simple, puis avec l'aide de skrollr.js, nous allons appliquer un effet de parallaxe subtil à l'en-tête..
Ce tutoriel couvrira quelques aspects remarquables, alors faites attention:
Ok alors! Commençons notre projet avec quelques fichiers dépouillés. Voici ce dont vous aurez besoin pour commencer:
Notre index.html est vide pour le moment, nous avons alors un répertoire img contenant notre image de café, un répertoire css avec un fichier de réinitialisation, notre grille fluid et un styles.css vide, attendant patiemment notre entrée. Enfin, nous avons un répertoire js avec le fichier skrollr.js téléchargé de GitHub.
Notre index.html va commencer avec des éléments très familiers:
Pap sans signification
Je ne vous ennuierai pas avec tous ces éléments, mais il convient de noter que la balise méta de la fenêtre d'affichage est présente. Nous avons donné au document un titre (absurde), lié à certains favicons - et que nous avons pointé du doigt. juste un fichier css: styles.css.
Une petite feuille de style pour les gouverner tous.
Quand j'ai d'abord parlé des fichiers et des dossiers, j'ai mentionné trois feuilles de style; normalize.css (pour réinitialiser nos styles de manière responsable), fluid_skeleton.css (que j'ai moi-même adapté à partir du passe-partout squelette) et de styles.css. Alors pourquoi avons-nous lié à un seul dans notre fichier HTML?
Eh bien, nous allons utiliser cela comme une introduction à Sass - sans utiliser réellement de Sass.
En utilisant l'extension de fichier .scss au lieu de .css, nous pouvons tous les rassembler dans un fichier et minimiser le tout. Commencez par renommer les fichiers CSS comme suit:
C'était facile, non? Notez les caractères de soulignement sur les deux premiers, qui empêchent ces fichiers d'être compilés dans leurs propres équivalents css. Au lieu de cela, nous allons les importer dans notre fichier styles.scss, comme si nous utilisions une règle css @import normale:
/ * importations * / @import "normaliser"; @import "fluid_skeleton";
Maintenant, lors de la compilation, nous recevrons un fichier styles.css construit à partir de toutes les règles de nos fichiers .scss. Nous n'avons besoin que de déployer ce fichier unique sur notre serveur Web, en enregistrant sur notre site deux requêtes et plusieurs Kbs. Bon travail :)
Pour compiler les fichiers comme décrit ci-dessus, nous aurons besoin d'une application de compilation (à moins que vous ne préfériez utiliser la ligne de commande?). Il y a quelques applications qui feront le travail pour vous, j'utilise CodeKit (parce que c'est génial) mais CompassApp vous servira aussi bien, et il est disponible sous Windows.
Configurer notre projet est aussi simple que de faire glisser le dossier du projet dans le compilateur. CodeKit regarde maintenant tous les fichiers de ce dossier. Chaque fois que je clique sur "Enregistrer", quel que soit le fichier SCSS que je suis en train de modifier, CodeKit recompilera tous les éléments, produisant notre CSS mis à jour et, si notre page est ouverte dans un navigateur, nous l'actualise également..
Même si vous n'êtes pas prêt à aller plus loin dans Sass, c'est un workflow idéal.
Remplissons maintenant le fichier index.html, après quoi nous pourrons vraiment commencer par le style. Comme mentionné, j'utilise fluid_skeleton.css comme base de la grille responsive. C'est une excellente base simple pour lancer une mise en page simple. Tout ce qu'il faut, c'est que nous utilisions sa structure de grille pour construire notre mise en page.
Nous avons besoin:
Accentsconagua
.huit par exemple, seize au total tous ensemble.Par exemple, nous pouvons créer une mise en page rapide à quatre colonnes comme suit:
La feuille de style indique que ces divs sont tous 100% larges, parfaitement empilés les uns sur les autres, jusqu'à ce que la fenêtre d'affichage atteigne 767 pixels de large. À ce stade, tout change et ces quatre colonnes se propagent sur l'écran comme le veut la nature..
Cette structure filaire rapide devrait vous donner une idée de la façon dont nous allons structurer notre balisage structurel..
Et si vous recherchez un copier / coller rapide, cela vous aidera:
Pour plus d'informations sur la composition de Skeleton, reportez-vous à la section Création d'une présentation réactive avec Skeleton: débutant.
Il est toujours plus facile de voir ce que vous faites lorsque vous avez un peu de texte factice, alors jetez un en-tête et un lien dans la région d'en-tête en haut:
Pap sans signification
par Ian Yates
Tournez ensuite votre attention sur les colonnes et le pied de page. J'ai attrapé une charge de texte de remplissage de T'Lipsum "Un générateur de Yorkshire Lorem Ipsum pour les gens du Yorkshire" (parce que je suis un fier Yorkshireman) a battu ça!
Pour vous donner une idée, le corps principal (notre zone de douze colonnes) commence comme ceci:
Mek est un Brew Lad
Une pinte douce. Dis-le pour l'instant, tu vas chuffin, Nora semble être comme. Eyec up est le comté de ton dieu. Soyez reet soyez reet nah puis michael palin bloomin "eck gerritetten. Ah, tu apprendras cette douce pensée du sud. N'importe quel type de pensée méridionale douce, mais un garçon mardy bum shu 'thi gob face comme un âne frappé. Ee par gum mardy bum michael palin. Le propre comté de Dieu. Tu t'es fait plaisir. Apparaît comme peut-être le propre comté de dieu où est tha bin.
Coller des liens dans le pied de page et nous avons terminé ici!
Avant d’aller plus loin, je veux prendre quelques polices. Rendez-vous sur Google Web Fonts et jetez un coup d'œil à PT Sans et PT Serif. C'est un bon duo, alors ajoutez-les à votre collection et rassemblez le lien de la feuille de style.
Pour gagner du temps, voici le lien qui m'a été donné, après avoir sélectionné les versions de poids 400 et 700:
@import url (http://fonts.googleapis.com/css?family=PT+Sans:400,700|PT+Serif:400,700);
Vous pouvez coller ceci sous nos autres importations dans styles.scss. Une fois compilé, le contenu de ce fichier CSS ne sera pas réellement glissé dans notre CSS minifié, mais la règle @import restera et la police sera utilisée quand même..
Maintenant, je vais définir PT Sans comme police de base, en définissant la taille de la police sur 100% de la valeur par défaut du navigateur, avec une hauteur de trait de 1,5em:
html font: 100% / 1.5em 'PT Sans', sans-serif;
Une grande partie du style que nous appliquons à cette page est assez générique. Couleurs et tailles pour la typographie, rembourrage sur les bandes, etc. Séparez les fichiers sources et vous trouverez le contenu de styles.scss explicite..
Cependant, concentrons-nous un instant sur la zone d'en-tête. Dans son état mobile-first, nous voulons lui donner un fond marron. Une fois la fenêtre d'affichage agrandie, l'image de café sera importée (pour ménager la bande passante aux utilisateurs mobiles). Voici à quoi ressemblent les styles de la bande d’en-tête:
header.band background: # 4b371f; Couleur blanche; text-align: center; rembourrage: 10% 0 15% 0;
Les marges de remplissage supérieure et inférieure ont été appliquées sous forme de pourcentage de la largeur du navigateur. Cela signifie que la zone d'en-tête augmente en hauteur à mesure que la fenêtre du navigateur se développe. C'est un assez bel effet et garde le pli (où que ce soit ces jours-ci) proportionnel à la taille de la fenêtre du navigateur.
Appelons maintenant le titre que nous avons en son sein.
h1, h2, h3 font-family: 'PT Serif', serif; poids de police: 700; text-align: center; header.band h1 font-size: 3em; hauteur de ligne: 1em; marge en bas: 1em;
Nous utiliserons la variante serif de PT pour nos en-têtes, qui se marie bien avec la copie de corps étant dans sans.
Enfin, nous appellerons notre ancre pour la faire ressortir:
a.button background: # e33f0c; text-align: center; rembourrage: .5em 1em; Couleur blanche; poids de police: gras; texte-décoration: aucun; box-shadow: 0 0,2em 0 # ab3009; text-transform: majuscule; espacement des lettres: 0.1em; / * transition trucs inter-navigateurs * / -webkit-transition: 0,2 seconde en arrière-plan; / * Safari 3.2+, Chrome * / -moz-transition: atténuation de l'arrière-plan de 0,2 seconde; / * Firefox 4-15 * / -o-transition: atténuation de l'arrière-plan à 0,2 seconde; / * Opera 10.5-12.00 * / transition: atténuation de l'arrière-plan 0.2s; / * Firefox 16+, Opera 12.50+ * / a.button: survolez background: # ab3009;
Des éléments simples, tous basés sur la technologie em pour s’assurer qu’il peut grossir et se rétrécir si besoin est - et si vous voulez vraiment embrasser Sass, vous pouvez affiner encore le style! Pour l'instant cependant, voici ce que vous devriez avoir:
Après avoir construit notre expérience mobile de base, nous allons maintenant embellir pour de plus grands écrans. Vous décidez comment organiser vos requêtes multimédia, mais comme il s'agit d'une feuille de style assez simple, je vais simplement mettre toutes mes règles supplémentaires dans une requête multimédia à la fin de styles.scss.
Ajoutons quelques règles qui entreront en vigueur sur des écrans supérieurs à 767 pixels. Ce point d'arrêt est assez arbitraire et vient de convenir à la conception lorsque je l'ai construit pour la première fois. Quelle meilleure façon de choisir un point d'arrêt?!
Écran @média uniquement et (largeur minimale: 767 pixels)
Il n’ya pas beaucoup de styles à ajouter ici, nous souhaitons simplement augmenter la taille de la police utilisée dans le document, rendre notre bouton un peu plus visible et ajouter une image d’arrière-plan à la zone d’en-tête:
Écran @média uniquement et (largeur minimale: 767 pixels) corps taille de police: 1.125em; / * 18px / 16px * / hauteur de ligne: 1.7em; header.band background-image: url (… /img/background.jpg); taille du fond: 100%; header.band h1 font-size: 3.25em; / * 52/16 * / a.button padding: .75em 1.5em;
Sur des écrans plus grands, nous devrions maintenant avoir quelque chose comme…
Actuellement, lorsque vous faites défiler la page, notre en-tête disparaît de la vue, comme vous le souhaitiez. Passons maintenant à la base de tout cet exercice. parallaxe. Vous devriez déjà avoir téléchargé skrollr.js depuis GitHub et l’avoir placé dans le dossier js.
Ensuite, nous devons le référencer dans notre html, alors placez ce lien en bas, avant la fermeture
Il s’agit d’un jeu JavaScript à la vanille, nous n’avons donc pas besoin d’en tirer au préalable jQuery. Ensuite, nous devons appeler skrollr, ce que nous aimons bien:
Il y a un certain nombre d'options avec lesquelles nous pouvons jouer, qui ont toutes des paramètres que nous pouvons ajouter entre ces accolades, mais pour le moment, nous allons laisser les choses telles quelles..
À son stade de développement actuel, skrollr nous oblige à supprimer un peu notre balisage, en ajoutant des règles en ligne sur nos éléments. Le fabricant de Skrollr, Alexander Prinzhorn, est occupé avec un projet qui sépare les styles du balisage, mais il est toujours en cours.
Quoi qu'il en soit, je pense que le son est pire, nous devons simplement ajouter notre style d'image clé aux attributs de données des éléments que nous ciblons. Par exemple, déplaçons la position de l'image d'arrière-plan de notre en-tête, en fonction de la position de la barre de défilement.
Nous ajoutons notre premier style d'image clé comme suit:
Skrollr utilise Les données- et ensuite une valeur qui représente la position en pixels de la barre de défilement. Nous ajoutons ensuite un peu de style, comme nous le ferions avec CSS. Nous venons littéralement de spécifier que lorsque la barre de défilement est à 0px (le haut de la page) nous voulons le position de fond de cet élément soit 0px 0px.
Nous pouvons ensuite ajouter autant d’images clés que nous le souhaitons, alors ajoutons un autre attribut de données directement après notre première.
data-500 = "background-position: 0px -250px;"
Ceci dit alors; quand la barre de défilement s'est déplacée 500px down, nous voulons le position de fond être 0px -250px (ie: 250px vers le haut). Skrollr animera le processus entre ces deux images clés, pour une transition en douceur.
Bingo! Notre premier effet de parallaxe.
Nous avons obtenu un très simple effet de parallaxe qui ajoute un élément de dynamisme lorsque l'utilisateur fait défiler l'écran vers le bas. Nous pouvons appliquer quelles que soient les règles CSS que nous voulons avec skrollr, donnons donc à notre région d'en-tête un dernier succès.
Rappelez-vous cet élément, qui contient l'en-tête et le lien?
Nous allons ajouter deux images clés. un pour l'état initial (0px) et un autre lorsque la barre de défilement atteint 180px.
Comme vous pouvez le constater, ces propriétés dictent l’opacité, une autre propriété CSS familière. Au fur et à mesure que notre barre de défilement s'abaisse, avant que l'en-tête ne quitte complètement la page, le contenu de cette div disparaît progressivement. Un effet simple, mais qui influence subtilement l'expérience utilisateur de cette page. Des choses comme ça devraient être utilisées de manière responsable!
13. Paramètres supplémentaires
Skrollr est fourni avec plusieurs options supplémentaires, en fonction de votre confiance. Tous ces paramètres peuvent être transmis à skrollr au moyen de paires clé-valeur, comme suit:
Par exemple, cette instruction indique à skrollr de ne pas forcer la hauteur du document. Par défaut, skrollr forcera le document à atteindre au moins la plus haute image clé que vous avez définie. Dans notre cas, notre position la plus éloignée de la barre de défilement a été définie à 500 pixels, alors que notre page est plus haute que celle-là. Nous n’avions donc pas besoin de penser au dépassement du forçage en hauteur.
Une autre chose à faire est de supprimer le défilement régulier. Essayez notre effet de parallaxe une fois de plus; voyez-vous comment la position de l'image d'arrière-plan accélère et décélère? Cela évite les saccades, mais vous ne souhaitez peut-être pas que l'effet se présente de cette façon. Faire votre interpolation plus linéaire, ajoutez ceci:
Vous pouvez aussi ajouter ceci par élément en s'appuyant à nouveau sur les attributs de données (très élégants):
Mode relatif
Il convient également de mentionner le mode relatif, ce qui nous permet de définir des images clés. par rapport à l'élément, pas le document que nous avons fait. De cette manière, nous pourrions modifier la hauteur, les marges, etc. de notre en-tête (par exemple) sans avoir à réévaluer nos paramètres d'image clé..
L'utilisation du mode relatif modifie la syntaxe nécessaire dans les attributs de données, ce que je ne vais pas aborder ici, mais cela vaut la peine de jeter un coup d'œil sur.
Pour en savoir plus sur les possibilités offertes par les options de skrollr, consultez les exemples et la documentation..
14. Support mobile
Voici quelque chose que je ne savais pas avant de lire la documentation de skrollr:
Les navigateurs mobiles essaient d'économiser leur batterie partout où ils le peuvent. C'est pourquoi les navigateurs mobiles retardent l'exécution de JavaScript pendant le défilement. iOS en particulier fait cela très agressivement et arrête complètement JavaScript.
Par conséquent, pour que skrollr fonctionne sur les plates-formes mobiles, Alexander devait créer un peu plus de magie supplémentaire qui est intégré après un peu de reniflement du navigateur. Comme vous l'avez vu, notre effet se dégrade très gracieusement, je ne m'inquiète donc pas de ce que les utilisateurs de smartphones rateraient un peu de parallaxe. Cependant, si vous voulez vous assurer que votre projet prend en charge le mobile, vous aurez besoin de quelque chose de plus..
- Une fois que vous avez inclus le script skrollr, vous devez exécuter une vérification du navigateur, qui ressemble à ceci:
Vous remarquerez que cela ajoute alors
skrollr.mobile.min.jssi les conditions sont remplies (c.-à-d. qu'un appareil mobile est utilisé), assurez-vous que le chemin est correct, conformément à votre projet. Vous trouverez ce script supplémentaire dans le téléchargement du code source sur GitHub..- Enfin, assurez-vous que le premier élément après l'ouverture
tag a .C'est tout! Vous n'avez pas besoin de comprendre Pourquoi ça marche, ça marche. Si vous souhaitez en savoir plus sur le support mobile, consultez la documentation..
Conclusion
Skrollr n'est pas simplement une parallaxe… mais, comme nous l'avons montré, il fait bien plus que cela. Avec un peu de chance, vous aurez maintenant été en mesure d’implémenter un peu de razzmatazz (quel qu’il soit) sur vos propres pages Web statiques. N'hésitez pas à poser toutes les questions que vous pourriez avoir dans les commentaires!
Ressources supplémentaires
- skrollr.js sur GitHub
- @Prinzhorn sur Twitter
- Créer un site Web de défilement de parallaxe à l'aide de Stellar.js sur des Webdesigntuts+
- Joyeux défilement avec skrollr.js
- T'Lipsum Un générateur Yorkshire Lorem Ipsum pour les gens du Yorkshire
- fluid_skeleton.css
- CodeKit
- Réflexions de Trent Walton sur le défilement parallèle sur le Web
