Aujourd'hui, nous allons examiner quelques techniques que nous pouvons utiliser pour afficher la progression du défilement pour les utilisateurs qui lisent une page. Cette technique est utilisée sur un nombre croissant de sites et pour une bonne raison; il fournit une compréhension contextuelle de l'investissement nécessaire pour consommer une page particulière. Au fur et à mesure que l'utilisateur fait défiler l'écran, ils ont le sentiment de l'avancement actuel dans différents formats.
Comme on le voit sur ia.net
Aujourd'hui, nous allons aborder deux techniques spécifiques que vous pouvez utiliser pour afficher les progrès du défilement et vous laisser un ensemble d'outils pour créer les vôtres. Commençons!
Mise en place du document
Tout d’abord, nous allons créer un faux document qui servira de page d’affichage. Nous allons utiliser normaliser.css et jQuery, ainsi qu'une police Google. Votre fichier HTML vide devrait ressembler à ceci:
Animation d'indicateur de progrès
Ensuite, nous allons ajouter notre contenu de faux post:
Comment devrions-nous montrer des progrès en faisant défiler un message??
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Pellentesque habitant morbi tristique senectus et netus et malesuada est célèbre pour son turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Don Liberty sit amet quam egestas semper. Ultricies Aenean mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibule erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, condimentum éléctrique, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut Felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulgarisation magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, portemanteau, facilisis luctus, metus
Cela nous donne assez de contenu pour tester nos comportements de défilement.
Style de base
Nous allons utiliser un style de base pour rendre notre message un peu plus attrayant.
@import url (http://fonts.googleapis.com/css?family=Domine:400,700); corps font-size: 16px; h1, h2, h3, h4, h5, h6 font-family: "Domine", sans-serif; h1 font-size: 3.5em; .lead-in color: #fff; poids de la police: 400; rembourrage: 60px 0; couleur de fond: # 0082FF; article header border-top: 3px solid # 777; remplissage: 80px 0; .article-content font-size: 1em; poids de la police: 100; hauteur de ligne: 2.4em; p margin: 4em 0; .container width: 700px; marge: 0 auto; footer text-align: center; couleur de fond: # 666; couleur: #fff; rembourrage: 40px 0; marge supérieure: 60px; .read-next font-size: 2em;
Calcul de la position de défilement
Pour calculer notre position de défilement, nous devons comprendre conceptuellement ce que nous suivons. Puisque JavaScript ne peut suivre que la valeur de défilement supérieure, nous devons suivre notre valeur de défilement de 0 (en haut, non défilé) à la valeur de défilement finale. Cette valeur de défilement finale sera égale à la longueur totale du document moins la hauteur de la fenêtre elle-même (car le document défilera jusqu'à ce que le bas du document atteigne le bas de la fenêtre).
Nous allons utiliser le JavaScript suivant pour calculer cette position de défilement.
(fonction () var $ w = $ (fenêtre); var wh = $ w.height (); var h = $ ('corps'). height (); var sHeight = h - wh; $ w.on ( 'scroll', function () var perc = Math.max (0, Math.min (1, $ w.scrollTop () / sHeight));); ());
Le code ci-dessus définit la hauteur de la fenêtre et le corps, et lorsque l'utilisateur fait défiler, il utilise ces valeurs pour définir une perc variable (abréviation de pourcentage). Nous utilisons également Math.min et Math.max pour limiter les valeurs à la plage 0-100.
Avec ce calcul de pourcentage, nous pouvons piloter l'indicateur de progression.
Indicateur de cercle
Le premier indicateur que nous allons créer est un cercle SVG. Nous allons utiliser le SVG accident vasculaire cérébral etaccident vasculaire cérébral propriétés pour montrer les progrès. Tout d'abord, ajoutons l'indicateur de progression au document.
Ce balisage nous donne deux cercles dans un SVG, ainsi qu'un div contenant pour afficher notre pourcentage de pourcentage. Nous devons également ajouter du style à ces éléments, puis nous expliquerons comment ces cercles sont positionnés et animés..
Ces styles nous permettent d’animer notre élément cercle. Notre progression devrait toujours être visible, nous avons donc fixé la position sur la .indicateur de progression classe, avec des règles de positionnement et de dimensionnement. Nous avons également défini notre compte de progression pour être centré verticalement et horizontalement à l'intérieur de cette div.
Les cercles sont positionnés au centre en utilisant transform sur les éléments SVG eux-mêmes. Nous commençons le centre de nos cercles en utilisant transform. Nous utilisons ici une technique qui nous permet d'appliquer une rotation à partir du centre de nos cercles afin de démarrer l'animation en haut du cercle (plutôt que du côté droit du cercle). En SVG, les transformations sont appliquées en haut à gauche d'un élément. C’est pourquoi nous devons centrer nos cercles sur 0, 0, et déplacez le centre du cercle au centre du SVG lui-même en utilisant traduire (50, 50).
Utiliser stroke-dasharray et stroke-dashoffset
Les propriétés accident vasculaire cérébral etaccident vasculaire cérébral nous permet d'animer le trait d'un SVG. accident vasculaire cérébral définit les parties visibles d'un trait. accident vasculaire cérébral déplace le début du trait. Ces attributs combinés nous permettent de créer un processus de "keyframing".
Mise à jour de stroke-dasharray sur Scroll
Ensuite, nous allons ajouter une fonction pour mettre à jour le contour-dasharray au défilement, en utilisant notre progression en pourcentage précédemment affichée..
(function () var $ w = $ (fenêtre); var $ circ = $ ('. cercle animé'); var $ progCount = $ ('. progress-count'); var wh = $ w.height ( ); var h = $ ('body'). height (); var sHeight = h - wh; $ w.on ('scroll', function () var perc = Math.max (0, Math.min (1 , $ w.scrollTop () / sHeight)); updateProgress (perc);); fonction updateProgress (perc) var circle_offset = 126 * perc; $ circ.css ("stroke-dashoffset": 126 - circle_offset) ; $ progCount.html (Math.round (perc * 100) + "%"); ());
Le décalage qui correspond à notre cercle est d’environ 126. Il est important de noter que cela ne fonctionnera pas pour tous les cercles, car 126 correspond à la circonférence d’un cercle de rayon 20. Pour calculer le trait par rapport à un trait donné cercle, multiplier le rayon par 2PI. Dans notre cas, le décalage exact serait 20 * 2PI = 125.66370614359172.
Variation de progression horizontale
Pour notre prochain exemple, nous allons créer une simple barre horizontale fixée en haut de la fenêtre. Pour ce faire, nous utiliserons un indicateur de progression vide, div.
Remarque: nous avons ajouté le "-2" pour nous permettre d'inclure cet exemple dans le même fichier CSS.
Ensuite, nous allons ajouter notre style pour cet élément.
.progress-indicateur-2 position: fixe; en haut: 0; gauche: 0; hauteur: 3px; couleur de fond: # 0A74DA;
Enfin, nous allons définir la largeur de la barre de progression sur le défilement.
var $ prog2 = $ ('. progress-indicateur-2'); function updateProgress (perc) $ prog2.css (width: perc * 100 + '%');
Tous ensemble, notre code JavaScript final devrait ressembler à ceci:
(function () var $ w = $ (fenêtre); var $ circ = $ ('. cercle animé'); var $ progCount = $ ('. progress-count'); var $ prog2 = $ ('. progress-indicateur-2 '); var wh = $ w.height (); var h = $ (' corps '). height (); var sHeight = h - wh; $ w.on (' scroll ', fonction ( ) var perc = Math.max (0, Math.min (1, $ w.scrollTop () / sHeight));; updateProgress (perc);); fonction updateProgress (perc) var circle_offset = 126 * perc; $ circ.css ("stroke-dashoffset": 126 - circle_offset); $ progCount.html (Math.round (perc * 100) + "%"); $ prog2.css (width: perc * 100 + '% '); ());
Autres idées de barres de progression
Cet article a pour but de vous donner les outils et l’inspiration nécessaires pour concevoir vos propres solutions de progression de défilement. D'autres idées de barres de progression peuvent inclure l'utilisation de termes plus descriptifs ou humanisés pour l'indication de progrès elle-même, tels que "à mi-chemin" ou "tout juste de commencer". Certaines implémentations (comme l'exemple ia.net montré précédemment) utilisent une estimation du temps de lecture d'un article. Cela pourrait être estimé en utilisant un code similaire à celui-ci:
var wordsPerMin = 300; // basé sur cet article: http://www.forbes.com/sites/brettnelson/2012/06/04/do-you-read-fast-enough-to-be-successful/ var wordsArray = $ (". article-content "). text (). split (" "); var wordCount = wordsArray.length; var minCount = Math.round (wordCount / wordsPerMin);
Vous utiliseriez alors le minCount en conjonction avec le perc Nous mettons à jour la variable sur Scroll pour montrer au lecteur le temps qu'il lui reste pour lire l'article. Voici une implémentation très basique de ce concept.
function updateProgress (perc) var minutesCompleted = Math.round (perc * minCount); var restante = minCount - minutesCompleted; if (restant) $ (". indicateur-de-progrès"). show (). html (restant + "minutes restantes"); else $ (". progress-indicateur"). hide ();
One Final Piece: Dimensionnement d'écran adaptatif
Pour nous assurer que notre indicateur de progression fonctionne comme il se doit, nous devons nous assurer que nos calculs calculent les bonnes choses au bon moment. Pour ce faire, nous devons nous assurer de recalculer les hauteurs et de mettre à jour l'indicateur de progression lorsque l'utilisateur redimensionne la fenêtre. Voici une adaptation du JavaScript pour y arriver:
(function () var $ w = $ (fenêtre); var $ circ = $ ('. cercle animé'); var $ progCount = $ ('. progress-count'); var $ prog2 = $ ('. progress-indicateur-2 '); var wh, h, sHeight; fonction setSizes () wh = $ w.height (); h = $ (' body '). height (); sHeight = h - wh; setSizes (); $ w.on ('scroll', function () var perc = Math.max (0, Math.min (1, $ w.scrollTop () / sHeight)); updateProgress (perc);). on ('resize', function () setSizes (); $ w.trigger ('scroll');); function updateProgress (perc) var circle_offset = 126 * perc; $ circ.css ("stroke-dashoffset ": 126 - circle_offset); $ progCount.html (Math.round (perc * 100) +"% "); $ prog2.css (width: perc * 100 + '%'); () ;
Ce code déclare une fonction qui définit les variables dont nous avons besoin pour calculer la progression à une taille d'écran donnée, et appelle cette fonction lors du redimensionnement. Nous re-déclenchons également le défilement au redimensionnement de la fenêtre afin que notre Progression de la mise à jour la fonction est exécutée.
Vous avez atteint la fin!
Après avoir jeté les bases d’un certain nombre de variantes, que pouvez-vous proposer? Quels indicateurs de progrès avez-vous vu ce travail? Qu'en est-il des indicateurs mauvais pour la facilité d'utilisation? Partagez vos expériences avec nous dans les commentaires!
Accentsconagua
Share
Comme on le voit sur ia.net
