Acabado de la página de cartera de línea de tiempo sensible

Lo que vas a crear

Continuando con el tutorial anterior, agreguemos algo de prosperidad a nuestra compilación.

Icono de carga

Vamos a ahondar en animaciones CSS3 y crear una animación de giro simple para nuestro icono de carga. Ya tenemos el marcado que necesitamos en la página, así que vamos directamente al CSS.

div.loading color: oscurecer ($ gris, 20%); posición: absoluta; ancho: 100px; inferior: 15px; izquierda: 50%; margen izquierdo: -50px; img vertical-align: middle; & .rotate -webkit-animation-name: rotate; -ms-nombre-animacion: rotar; Nombre de la animación: rotar; -webkit-animation-duration: 1s; animación-duración: 1s; -webkit-animation-iteration-count: infinito; -ms-animación-iteración-cuenta: infinito; animación-iteración-cuenta: infinito; -webkit-animation-timing-function: lineal; -ms-animación-tiempo-función: lineal; animación-temporización-función: lineal; 

Coloque este código justo después de la artículo de cartera Bloque en nuestro archivo Sass. Para empezar, aquí solo estamos configurando algunos estilos para el propio div de carga. Lo estamos posicionando y asegurando que esté centrado mediante el uso de un margen izquierdode -50px, que es la mitad del ancho del elemento. Esto es para compensar el hecho de que CSS coloca los elementos desde la esquina superior izquierda.

La siguiente sección es mucho más interesante. Como puede haber visto en el HTML, asignamos una clase de girar a la carga  etiqueta que utilizaremos como gancho para realizar una animación CSS. Los estilos aquí están configurados para nuestra animación.. 

Básicamente, le estamos diciendo a CSS cómo se llama nuestra función de animación (lo crearemos en un momento), cuánto tiempo debe ejecutarse la animación, cuántas veces debe ejecutarse y qué función de sincronización o aceleración usar. Para nuestro proyecto queremos una buena rotación suave de 360 ​​grados que nunca se detiene. El código de arriba logrará exactamente eso. 

Nota: Tenemos que incluir declaraciones con prefijos en el navegador para que nadie se pierda, y podríamos mejorarlo utilizando una mezcla Sass para hacer el trabajo pesado por nosotros..

Echemos un vistazo en el navegador..

Está bien, se ve muy bien, pero falta una cosa. ¡No está animando! Vamos a arreglar eso ahora con el siguiente código:

@ -webkit-keyframes rotate 100% -webkit-transform: rotate (360deg); transformar: rotar (360deg); -webkit-transform-origin: centro del centro; origen de transformación: centro centro;  @keyframes rotate 100% -webkit-transform: rotate (360deg); -ms-transform: rotate (360deg); transformar: rotar (360deg); -webkit-transform-origin: centro del centro; -ms-transform-origin: centro centro; origen de transformación: centro centro; 

Así que aquí está el girar función. La forma en que funciona es estableciendo puntos clave en la animación para cambiar el elemento. Podría establecer que algo suceda al 0%, 25%, 50% y así sucesivamente. Nuestra animación es muy simple, por lo que solo necesitamos una declaración al 100% que indique que el elemento debe rotarse 360 ​​grados. Esto significa que nuestro elemento realizará un giro completo y terminará de vuelta donde comenzó. Nuestra configuración anterior se asegura de que continuará funcionando indefinidamente. los origen transformado La propiedad le dice a CSS dónde está el punto central de la animación. Podríamos configurarlo para que gire con la esquina superior izquierda como centro (¡eso podría parecer interesante!), Pero solo queremos usar el centro exacto de nuestro elemento aquí. Guarde este archivo y eche un vistazo en el navegador!

Debería ser similar al anterior, pero mucho más suave y más rápido..

Esto concluye nuestra página de la cartera de Timeline, pero hay una cosa que podemos agregar a esto para los propósitos de este tutorial..

Cargando contenido

Ahora, en el mundo real, este tipo de diseño / tema probablemente contendría algún tipo de función de desplazamiento infinito donde aparecen más elementos a medida que se desplaza hacia abajo en la página, lo que evita que tenga que hacer clic para pasar por las páginas.

Podemos simular Este comportamiento aquí con unas pocas líneas de jQuery. Abrir app.js y comience por agregar lo siguiente, arriba donde escribimos nuestro controlador de clic en el título del menú.

var visibleHeight = $ (document) .height () - $ (window) .height (); artículos var;

En primer lugar, debemos declarar dos variables que podemos usar más adelante. El segundo es puramente una declaración y se le asignará un valor más adelante. El primero, visibleHeight, agarra el ventana Altura y resta que de la general. documento altura. Esto nos dejará con la altura del área que actualmente es visible en el navegador de los usuarios..

storeElements (); $ (window) .on ('resize', function (e) updateHeight ();); $ (ventana) .on ('scroll', function (e) loadContent (););

A continuación, agregue el fragmento anterior. Verá algunas llamadas de función a funciones que aún no existen, lo cual está bien ya que las crearemos a continuación.

function storeElements () items = $ ('. portfolio-item: lt (3)'). clone (); // Eliminar la primera clase de los elementos de selección.removeClass ('first'); 

los storeElements La función sirve como una manera de poblar nuestra artículosVariable con algunos elementos DOM. En nuestro caso queremos agarrar los tres primeros. artículos de cartera. El uso de jQuery. lt () nos permite seleccionar selectivamente los elementos que queremos. Una vez que tengamos la selección deberíamos clon()ellos, por lo que no estamos utilizando los elementos reales, sino una copia en su lugar. El último paso es eliminar el primero clase si existe, ya que ninguno de nuestros nuevos elementos son los primeros en la lista.

función updateHeight () visibleHeight = $ (document) .height () - $ (window) .height (); 

Coloque esta función arriba storeElements. Esta es probablemente la función más simple, ya que solo está haciendo lo que hicimos en documento listo. La razón por la que he usado una función para hacer esto es para mantenerla reutilizable.

Ahora llegamos a la función que está haciendo el trabajo ...

function loadContent () if ($ (window) .scrollTop ()> = visibleHeight) $ (window) .unbind ('scroll'); var loadingWrap = $ ('. loading-wrap'); loadingWrap.fadeIn (function () setTimeout (function () loadingWrap.before (items); loadingWrap.hide (function () updateHeight (); storeElements (); $ (window) .on ('scroll', function ( ) loadContent ();););, 500);); 

OK, paso a paso sobre lo que estamos haciendo aquí:

• Compruebe si la posición de desplazamiento es mayor que (desplazado en el pasado) o igual a (actualmente en) visibleHeight.
• Si es así, retire el voluta controlador de eventos de la ventana para que podamos procesar el contenido.
• Cache envoltura de carga para uso posterior.
• Descolorarse envoltura de carga en y una vez que el desvanecimiento se completa ...
• ... establecer una pequeña Se acabó el tiempo simular "cargando" el contenido.
• Adjunta nuestro clonado artículos antes de envoltura de carga. Esto encajará entre el icono de carga y el actual artículos de cartera.
• Esconder envoltura de carga y una vez escondido actualizar altura, storeElementsy vuelva a adjuntar el evento de desplazamiento a la ventana Con instrucciones para ejecutar esta función de nuevo..

¡Uf! Eso parece mucho, así que ejecútalo nuevamente si es necesario. Una cosa que puede notar, si tiene los ojos saltones, es que nos estamos desvaneciendo en el envoltura de carga que en realidad ya es visible en nuestro HTML. Arregla eso agregando un estilo en línea a ese elemento ...

Por lo tanto, si ahora guardamos nuestros archivos y vemos nuestro trabajo en el navegador, debería ver más contenido "cargar" una vez que se desplaza a la parte inferior de la página. Oh, espera, hay otra cosa que necesitamos agregar ...

$ ('. menus h3'). on ('click', function (e) $ (this) .next ('ul'). toggleClass ('open'); updateHeight (); e.preventDefault (); return falso;);

Dentro de h3 el controlador de clics que creamos desde el principio debemos agregar una llamada aupdateHeight (), De esta manera, cuando hacemos clic para abrir un menú, las variables se actualizan para reflejar el cambio en la altura del documento. Sin esto, si abre un menú en el móvil, la funcionalidad de "carga" se interrumpiría como visibleHeight la variable seria incorrecta.

Conclusión

¡Hemos llegado al final! Probablemente podríamos ordenar el JavaScript que acabamos de escribir y, en una situación real, probablemente se cambiaría a una llamada AJAX o algo así..

Espero que hayas aprendido algunas técnicas diferentes siguiendo este tutorial. Fue divertido de construir y me complace compartir con ustedes el proceso para dar vida a este diseño tan bonito. Estoy seguro de que hay muchas maneras de mejorar esto, así que si tiene alguna sugerencia, hágamelo saber en los comentarios.!