Hoy veremos algunas técnicas que podemos usar para mostrar el progreso del desplazamiento para los usuarios que están leyendo una página. Esta técnica se está utilizando en un número creciente de sitios, y por una buena razón; proporciona una comprensión contextual de la inversión necesaria para consumir una página en particular. A medida que el usuario se desplaza, se les presenta una sensación de progreso actual en diferentes formatos.
Como se ve en ia.net
Hoy cubriremos dos técnicas específicas que puede emplear para mostrar el progreso del desplazamiento y le dejaremos un conjunto de herramientas para crear el suyo propio. Empecemos!
Configuración del documento
Primero, configuraremos un documento simulado que actuará como nuestra página de publicación. Estaremos usando normalize.css y jQuery, así como una fuente de Google. Tu archivo HTML vacío debería verse así:
Animación del indicador de progreso
A continuación, añadiremos nuestro contenido falso:
¿Cómo deberíamos mostrar el progreso mientras se desplaza una publicación??
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Pellentesque morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas sempre. Avenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim en turpis pulvinar facilisis. Ut felis. Dapibus Praesent, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, portavoz del equipo, facilisis luctus, metus
Esto nos da suficiente contenido para probar nuestros comportamientos de desplazamiento.
Estilo básico
Vamos a utilizar algunos estilos básicos para hacer que nuestra publicación sea un poco más atractiva..
@import url (http://fonts.googleapis.com/css?family=Domine:400,700); cuerpo font-size: 16px; h1, h2, h3, h4, h5, h6 familia de fuentes: "Domine", sans-serif; h1 font-size: 3.5em; .lead-in color: #fff; peso de la fuente: 400; relleno: 60px 0; color de fondo: # 0082FF; encabezado del artículo border-top: 3px solid # 777; relleno: 80px 0; .article-content font-size: 1em; peso de la fuente: 100; altura de la línea: 2.4em; p margen: 4em 0; .container ancho: 700px; margen: 0 auto; pie de página text-align: center; color de fondo: # 666; color: #fff; relleno: 40px 0; margen superior: 60px; .read-next font-size: 2em;
Cálculo de posición de desplazamiento
Para calcular nuestra posición de desplazamiento, debemos comprender conceptualmente lo que estamos siguiendo. Dado que JavaScript puede rastrear solo el valor de desplazamiento superior, tendremos que rastrear nuestro valor de desplazamiento desde 0 (en la parte superior, no en desplazamiento) hasta el valor de desplazamiento final. Ese valor de desplazamiento final será igual a la longitud total del documento menos la altura de la ventana en sí (porque el documento se desplazará hasta que la parte inferior del documento llegue a la parte inferior de la ventana).
Usaremos el siguiente JavaScript para calcular esta posición de desplazamiento..
(function () var $ w = $ (ventana); 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));); ());
El código anterior establece la altura de la ventana y la altura del cuerpo, y cuando el usuario se desplaza, utiliza esos valores para establecer una perc Variable (corto para porcentaje). También utilizamos Matemáticas.min y Matemáticas.max Para limitar los valores al rango 0-100..
Con este cálculo porcentual, podemos impulsar el indicador de progreso..
Indicador de círculo
El primer indicador que crearemos es un círculo SVG. Utilizaremos el SVG trazo de trazo ygolpe-salpicadero Propiedades para mostrar el progreso. Primero, agreguemos el indicador de progreso al documento..
Este marcado nos da dos círculos en un SVG, así como un div que contiene para mostrar nuestro recuento de porcentaje. También debemos agregar estilo a estos elementos, y luego explicaremos cómo se posicionan y animan estos círculos..
Estos estilos nos preparan para animar nuestro elemento círculo. Nuestro progreso siempre debe ser visible, por lo que establecemos una posición fija en el .indicador de progreso Clase, con reglas de posicionamiento y dimensionamiento. También configuramos nuestra cuenta de progreso para que se centre tanto vertical como horizontalmente dentro de esta división..
Los círculos se colocan en el centro utilizando la transformación en los propios elementos SVG. Comenzamos el centro de nuestros círculos utilizando transformar. Aquí utilizamos una técnica que nos permite aplicar una rotación desde el centro de nuestros círculos para comenzar la animación en la parte superior del círculo (en lugar del lado derecho del círculo). En SVG, las transformaciones se aplican desde la parte superior izquierda de un elemento. Por eso debemos centrar nuestros círculos en 0, 0, y mueva el centro del círculo al centro del SVG usando traducir (50, 50).
Uso de stroke-dasharray y stroke-dashoffset
Las propiedades trazo de trazo ygolpe-salpicadero Permítanos animar el trazo de un SVG.. trazo de trazo Define las piezas visibles de un trazo.. golpe-salpicadero Mueve el inicio del trazo. Estos atributos combinados nos permiten crear un proceso de "fotogramas clave" de trazo.
Actualizando stroke-dasharray en Scroll
A continuación, agregaremos una función para actualizar el trazo-panel de control en el desplazamiento, utilizando nuestro porcentaje de progreso que se muestra anteriormente..
(function () var $ w = $ (ventana); var $ circ = $ ('. animated-circle'); var $ progCount = $ ('. progress-count'); var wh = $ w.height ( ); var h = $ ('cuerpo'). altura (); var sHeight = h - wh; $ w.on ('scroll', function () var perc = Math.max (0, Math.min (1 , $ w.scrollTop () / sHeight)); updateProgress (perc);); función updateProgress (var) var circle_offset = 126 * perc; $ circ.css ("stroke-dashoffset": 126 - circle_offset) ; $ progCount.html (Math.round (perc * 100) + "%"); ());
La compensación que coincide con nuestro círculo es de aproximadamente 126. Es importante tener en cuenta que esto no funcionará para todos los círculos, ya que 126 es la circunferencia de un círculo con un radio de 20. Para calcular el juego de salpicaduras de trazo para un determinado Círculo, mutiply el radio por 2PI. En nuestro caso, la compensación exacta sería 20 * 2PI = 125.66370614359172.
Variación de progreso horizontal
Para nuestro siguiente ejemplo, haremos una barra horizontal simple fija en la parte superior de la ventana. Para lograr esto, usaremos un indicador de progreso vacío div.
Nota: hemos agregado el "-2" para permitirnos incluir este ejemplo en el mismo archivo CSS.
A continuación, añadiremos nuestro estilo para este elemento..
.indicador de progreso-2 posición: fija; arriba: 0; izquierda: 0; altura: 3px; color de fondo: # 0A74DA;
Finalmente, estableceremos el ancho de la barra de progreso en scroll..
var $ prog2 = $ ('. progress-indicator-2'); función updateProgress (perc) $ prog2.css (width: perc * 100 + '%');
Todos juntos, nuestro JavaScript final debería tener este aspecto:
(function () var $ w = $ (ventana); var $ circ = $ ('. animated-circle'); var $ progCount = $ ('. progress-count'); var $ prog2 = $ ('. progress-indicator-2 '); 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);); función 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 + '% '); ());
Otras ideas para las barras de progreso
El objetivo de este artículo es proporcionarle las herramientas y la inspiración para diseñar sus propias soluciones de progreso de desplazamiento. Otras ideas para las barras de progreso pueden incluir el uso de términos más descriptivos o humanizados para la indicación de progreso en sí, como "a mitad de camino" o "simplemente comenzar". Algunas implementaciones (como el ejemplo de ia.net mostrado anteriormente) usan la estimación del tiempo de lectura de un artículo. Esto podría estimarse utilizando un código similar al siguiente:
var wordsPerMin = 300; // basado en este artículo: http://www.forbes.com/sites/brettnelson/2012/06/04/do-you-read-fast-enough-to-be-successful/ var wordsArray = $ (". artículo-contenido "). texto (). dividir (" "); var wordCount = wordsArray.length; var minCount = Math.round (wordCount / wordsPerMin);
Entonces usarías el minCount en conjunción con el perc variable que estamos actualizando en scroll para mostrar al lector el tiempo restante para leer el artículo. Aquí hay una implementación muy básica de este concepto..
function updateProgress (perc) var minutesCompleted = Math.round (perc * minCount); var restante = minCount - minutesCompleted; if (restante) $ (". indicador de progreso"). show (). html (restante + "minutos restantes"); else $ (". progress-indicator"). hide ();
Una pieza final: tamaño de pantalla adaptable
Para asegurarnos de que nuestro indicador de progreso funcione como debería, deberíamos asegurarnos de que nuestras matemáticas estén calculando las cosas correctas en el momento adecuado. Para que eso suceda, debemos asegurarnos de que estamos volviendo a calcular las alturas y actualizando el indicador de progreso cuando el usuario cambia el tamaño de la ventana. Aquí hay una adaptación del JavaScript para que eso suceda:
(function () var $ w = $ (ventana); var $ circ = $ ('. animated-circle'); var $ progCount = $ ('. progress-count'); var $ prog2 = $ ('. progress-indicator-2 '); var wh, h, sHeight; function 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');); función 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 + '%'); ()) ;
Este código declara una función que establece las variables que necesitamos para calcular el progreso en cualquier tamaño de pantalla dado, y llama a esa función en el cambio de tamaño. También re-activamos el desplazamiento en el tamaño de la ventana para que nuestro progreso de actualización la función es ejecutada.
Has llegado al final!
Después de haber sentado las bases para cualquier número de variantes, ¿qué se te ocurre? ¿Qué indicadores de progreso has visto que funcionan? ¿Qué hay de los indicadores que son malos para la usabilidad? Comparte tus experiencias con nosotros en los comentarios.!
Accentsconagua
Share
Como se ve en ia.net
