Fin de la page du portefeuille de la chronologie réactive

Ce que vous allez créer

Passons au tutoriel précédent, ajoutons quelques éléments à notre construction..

Icône de chargement

Nous allons nous plonger dans les animations CSS3 et créer une animation simple en rotation pour notre icône de chargement. Nous avons déjà le balisage dont nous avons besoin sur la page, alors passons directement au CSS.

div.loading color: darken ($ grey, 20%); position: absolue; largeur: 100px; en bas: 15px; à gauche: 50%; marge gauche: -50px; img vertical-align: middle; & .rotate -webkit-animation-name: rotation; -ms-animation-name: faire pivoter; nom-animation: rotation; -webkit-animation-duration: 1s; animation-durée: 1s; -webkit-animation-iteration-count: infini; -ms-animation-iteration-count: infini; animation-iteration-count: infini; -webkit-animation-timing-function: linéaire; -ms-animation-timing-function: linéaire; animation-timing-function: linéaire; 

Placez ce code juste après le élément de portefeuille bloquer dans notre fichier Sass. Pour commencer, nous sommes en train de configurer quelques styles pour la division de chargement elle-même. Nous le positionnons absolument et nous nous assurons qu'il est centré en utilisant un marge gauchede -50px, qui est la moitié de la largeur de l'élément. Ceci est pour compenser le fait que CSS positionne des éléments à partir du coin supérieur gauche.

La section suivante est beaucoup plus intéressante. Comme vous l'avez peut-être vu dans le code HTML, nous avons attribué une classe de tourner au chargement  balise que nous utiliserons comme crochet pour réaliser une animation CSS. Les styles ici sont la mise en place pour notre animation. 

Nous disons essentiellement à CSS comment notre fonction d’animation est appelée (nous la créerons dans un instant), combien de temps l’animation doit être exécutée, combien de fois elle doit être exécutée et la fonction de synchronisation ou d’accélération à utiliser. Pour notre projet, nous voulons une belle rotation en douceur sur 360 degrés qui ne s’arrête jamais. Le code ci-dessus réalisera exactement cela. 

Remarque: Nous devons inclure des déclarations avec le préfixe du navigateur pour que personne ne manque de le savoir - et nous pourrions améliorer cela en utilisant un mix Sass pour faire le gros du travail pour nous..

Jetons un coup d'oeil dans le navigateur.

OK, ça a l'air vraiment bien, mais il manque une chose. Ce n'est pas animé! Corrigeons cela maintenant avec le code suivant:

@ -webkit-keyframes rotation 100% -webkit-transform: rotation (360deg); transformer: faire pivoter (360 degrés); -webkit-transform-origin: centre centre; transform-origine: centre centre;  @keyframes rotation 100% -webkit-transform: rotation (360deg); -ms-transform: rotation (360deg); transformer: faire pivoter (360 degrés); -webkit-transform-origin: centre centre; -ms-transform-origin: centre centre; transform-origine: centre centre; 

Alors voici le tourner une fonction. Cela fonctionne en définissant des points clés dans l'animation pour changer l'élément. Vous pouvez définir un événement à 0%, 25%, 50%, etc. Notre animation est très simple, nous avons donc besoin d’une déclaration à 100% indiquant que l’élément doit être pivoté à 360 degrés. Cela signifie que notre élément effectuera une rotation complète et retournera à son point de départ. Notre installation précédente assure que cela continuera indéfiniment. le transformer-origine propriété indique au CSS le centre de l'animation. Nous pourrions le faire tourner avec le coin supérieur gauche au centre (cela peut paraître intéressant!), Mais nous souhaitons simplement utiliser le centre exact de notre élément ici. Enregistrez ce fichier et jetez un coup d'oeil dans le navigateur!

Il devrait ressembler à ce qui précède, mais beaucoup plus lisse et plus rapide.

Cela résume notre page de portefeuille chronologique, mais nous pouvons ajouter quelque chose à cela dans le cadre de ce didacticiel..

Chargement du contenu

Maintenant, dans le monde réel, ce type de disposition / thème contient probablement une sorte de fonction de défilement infini dans laquelle davantage d'éléments apparaissent lorsque vous faites défiler la page, vous évitant ainsi de cliquer pour parcourir les pages..

nous pouvons simuler ce comportement ici avec quelques lignes de jQuery. S'ouvrir app.js et commencez par ajouter ce qui suit, ci-dessus, où nous avons écrit notre gestionnaire de clics de titre de menu.

var visibleHeight = $ (document) .height () - $ (window) .height (); var articles;

Tout d’abord, nous devons déclarer deux variables que nous pourrons utiliser plus tard. Le second est purement une déclaration et une valeur lui sera attribuée ultérieurement. Le premier, visibleHauteur, attrape le la fenêtre hauteur et soustrait que de l'ensemble document la taille. Cela nous laissera avec la hauteur de la zone actuellement visible dans le navigateur de l'utilisateur.

storeElements (); $ (fenêtre) .on ('redimensionner', fonction (e) updateHeight ();); $ (fenêtre) .on ('scroll', fonction (e) loadContent (););

Ensuite, ajoutez l'extrait ci-dessus. Vous verrez quelques appels de fonction à des fonctions qui n'existent pas encore, ce qui est correct car nous les créerons ensuite.

function storeElements () items = $ ('. portfolio-item: lt (3)'). clone (); // Supprime la première classe des éléments de sélection.removeClass ('first'); 

le storeElements la fonction sert de moyen de peupler notre articlesvariable avec certains éléments DOM. Dans notre cas, nous voulons saisir les trois premiers éléments de portefeuille. L'utilisation de jQuery lt () nous permet de choisir sélectivement les éléments que nous voulons. Une fois que nous avons la sélection, nous devrions cloner()donc nous n’utilisons pas les éléments mais une copie. La dernière étape consiste à supprimer le premier classe si elle existe, aucun de nos nouveaux éléments n'étant le premier de la liste.

function updateHeight () visibleHeight = $ (document) .height () - $ (fenêtre) .height (); 

Placez cette fonction ci-dessus storeElements. C’est probablement la fonction la plus simple car elle ne fait que ce que nous avons fait sur document prêt. La raison pour laquelle j'ai utilisé une fonction pour le faire est de la garder réutilisable.

Nous arrivons maintenant à la fonction qui fait le travail…

function loadContent () if ($ (fenêtre) .scrollTop ()> = visibleHeight) $ (fenêtre) .unbind ('scroll'); var loadWrap = $ ('. chargement-wrap'); loadingWrap.fadeIn (function () setTimeout (function () loadingWrap.before (items); loadingWrap.hide (function () updateHeight (); storeElements (); $ (fenêtre) .on ('scroll', fonction (défilement), fonction ( ) loadContent ();););, 500);); 

OK, étape par étape sur ce que nous faisons ici:

• Vérifiez si la position de défilement est supérieure à (défilement précédent) ou égale à (actuellement) visibleHauteur.
• Si c'est le cas, retirez le faire défiler gestionnaire d'événements de la la fenêtre afin que nous puissions traiter le contenu.
• Cache chargement-wrap pour une utilisation ultérieure.
• Fondu chargement-wrap et une fois le fondu terminé…
• … Mettre un petit Temps libre simuler le "chargement" du contenu.
• Joindre notre cloné articles avant le chargement-wrap. Cela s'insérera bien entre l’icône de chargement et l’icône en cours. éléments de portefeuille.
• Cacher chargement-wrap et une fois caché updateHeight, storeElementset rattachez l'événement de défilement à la la fenêtre avec des instructions pour exécuter cette fonction à nouveau.

Phew! Cela semble beaucoup, alors revoyez-le si vous en avez besoin. Une chose que vous remarquerez peut-être, si vous êtes écarquillé, est que nous nous effondrons dans le chargement-wrap qui est en fait déjà visible dans notre code HTML. Corrigez cela en ajoutant un style en ligne à cet élément…

Donc, si nous sauvegardons maintenant nos fichiers et voyons notre travail dans le navigateur, vous devriez voir plus de contenu "charger" une fois que vous avez fait défiler vers le bas de la page. Oh, attends, il y a une autre chose que nous devons ajouter…

$ ('. menus h3'). on ('cliquez', fonction (e) $ (this) .next ('ul'). toggleClass ('open'); updateHeight (); e.preventDefault (); return faux; );

À l'intérieur de h3 cliquez sur gestionnaire que nous avons créé dès le début, nous devons ajouter un appel àupdateHeight (), Ainsi, lorsque nous cliquons pour ouvrir un menu, les variables sont mises à jour pour refléter le changement de hauteur du document. Sans cela, si vous ouvrez un menu sur mobile, la fonctionnalité de "chargement" serait interrompue car le visibleHauteur variable serait incorrecte.

Conclusion

Nous avons atteint la fin! Nous pourrions probablement mettre de l'ordre dans le code JavaScript que nous venons d'écrire et, dans une situation réelle, il serait probablement remplacé par un appel AJAX ou quelque chose du genre..

J'espère que vous avez appris différentes techniques à la suite de ce tutoriel. C'était amusant à construire et je suis heureux de partager avec vous le processus pour donner vie à ce très beau design. Je suis sûr qu'il y a beaucoup de façons d'améliorer cela, alors si vous avez des suggestions, faites-le-moi savoir dans les commentaires.!