hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Créer un en-tête collant à masquage automatique avec Headroom.js

Auto-masquage des en-têtes ont été régulièrement populaires dans la conception de sites Web depuis un certain temps. De nombreux blogs et magazines en ligne utilisent l'en-tête adhésif pour fidéliser les utilisateurs et leur donner un accès direct à la navigation .

Medium a redéfini cette fonctionnalité avec un concept de base qui cache la navigation tout en faisant défiler vers le bas mais la montre en faisant défiler vers le haut . Ce concept est devenu une tendance très populaire et maintenant vous pouvez facilement le répliquer en utilisant Headroom.js .

Headroom.js est une bibliothèque JavaScript gratuite de vanilla sans dépendance ni fonctionnalités API excessives. Vous l'ajoutez simplement à votre code HTML, ciblez l'en-tête de la page et laissez-le s'exécuter.

Headroom ajoute simplement et supprime certaines classes CSS qui s'animent afin d' afficher / cacher l'en-tête en utilisant JavaScript pour détecter le mouvement.

Vous pourriez faire cette fonctionnalité vous-même, mais pourquoi s'embêter? Headroom est testé et prend en charge tous les principaux navigateurs . Il joue même bien avec jQuery ou Zepto si vous avez déjà une bibliothèque JS installée sur votre site.

Vous trouverez beaucoup d'exemples de code dans le repo GitHub mais voici un exemple simple qui cible l'élément #header :

 var myElement = document.querySelector ("# en-tête"); // crée un objet Headroom passant dans l'élément #header var headroom = new Headroom (myElement); // initialise la librairie headroom.init (); 

La fonction init() a beaucoup d'options à personnaliser . Vous pouvez personnaliser les différentes classes d'éléments, ainsi que différents rappels déclencheurs d'événements, dans lesquels vous pouvez intégrer vos propres fonctions . Par exemple, si vous souhaitez que l'élément se décolore après son décochéage, utilisez le rappel onUnpin .

Ces options sont toutes listées sur la page principale du plugin, alors vérifiez-la et voyez ce que vous en pensez. Si vous voulez voir Headroom en action, jetez un oeil au stylo ci-dessous qui contient un clone complet de la page de démonstration principale .

5 applications Android gratuites pour contrôler votre ordinateur à distance - Best of

5 applications Android gratuites pour contrôler votre ordinateur à distance - Best of

Souhaitez-vous accéder à votre PC à distance ou accéder à distance à votre Mac depuis un autre appareil? Les applications de contrôle à distance permettent d'accéder à distance et de contrôler en toute sécurité votre bureau, un mobile ou un serveur. Ces applications sont pratiques dans diverses situations où vous ne pouvez pas accéder à votre système en personne.Le processus est

(Conseils techniques et de conception)

15 outils Web de partage de fichiers ridiculement simples

15 outils Web de partage de fichiers ridiculement simples

Internet d'aujourd'hui permet une gamme de médias pour le partage de fichiers sur différentes plates-formes . Cependant, le partage de fichiers volumineux a toujours ses limites. La plupart des services de messagerie n'autorisent qu'une taille de pièce jointe maximale de 20 à 25 Mo, ce qui n'est certainement pas suffisant pour partager des données volumineuses (en particulier les fichiers multimédias).Voici

(Conseils techniques et de conception)