Accentsconagua
Share
GitHub est un endroit formidable pour trouver des projets librement distribués au public, mais avez-vous déjà enregistré un repo pour oublier à quel point cela pourrait être cool et utile? Dans cet article, je vais mettre en lumière quelques projets fantastiques disponibles gratuitement sur GItHub, qui ont pour objectif principal d'aider les animateurs à créer du mouvement pour le Web..
Rellax est une bibliothèque de parallaxe ultra légère et lisse au beurre qui fonctionne également sur différents périphériques. Sans écrire des tonnes de code, vous apprendrez à faire du défilement tout en douceur votre projet et à comprendre parfaitement les rouages de ce qui fait de la parallaxe ce qu’elle est..
Si vous souhaitez créer pour votre travail des mouvements plus réalistes basés sur la physique, ne cherchez pas plus loin que dynamic.js.
Grâce à lui, vous pouvez animer les propriétés CSS de n’importe quel élément DOM, de propriétés SVG et d’objets JavaScript. Cette bibliothèque testera non seulement vos prouesses de JS, mais vous apprendrez également comment la physique permet aux utilisateurs de vivre une expérience plus intuitive et plus réaliste..
Les curseurs de sa page d'accueil vous aident vraiment à comprendre le fonctionnement de chaque propriété en collaboration avec ses pairs pour créer des mouvements basés sur la physique qui reflètent nos mouvements réels..
Créez des transitions étonnantes, fluides et fluides entre les pages de votre site Web. Barba.js est une petite bibliothèque (4 kb minifiée et gzippée), flexible et sans dépendance, qui aide à faire passer l'UX de votre site Web à un niveau supérieur..
C'est également une leçon sur la façon dont PJAX (push state AJAX) et l'API Push State peuvent être utilisés pour améliorer les transitions de page. Si vous n'avez jamais entendu parler de ces technologies, c'est une excellente introduction qui aboutit à un très bon effet de navigation dans les pages..
Pointe: jetez un oeil à ce tutoriel pour en savoir plus sur Push State:
Wick est la boîte à outils de création multimédia gratuite et à code source libre d'Internet. Il s'agit d'un environnement de codage et d'animation hybride basé sur un navigateur permettant de créer une interactivité pour le Web. Fortement inspiré par des outils tels que Flash (des animations basées sur des images clés?), HyperCard et Scratch, il a été développé pour répondre au besoin croissant d'un tel outil avec le Web moderne..
Créez des mouvements fluides en utilisant le navigateur comme guide, sans télécharger de logiciel supplémentaire pour faire le travail.
Créez de superbes animations CSS3 en un rien de temps. L'outil sur bouncejs.com vous permet de générer des images clés statiques qui peuvent être utilisées sans JavaScript supplémentaire, mais si vous souhaitez que votre application les génère à la volée, vous pouvez utiliser la bibliothèque Bounce.js..
La sortie des images clés est vraiment fascinante et utile à l’utilisation de la fonction CSS matrix () et de la création d’images clés. Il s'agit d'un excellent outil pour ajuster précisément un mouvement spécifique et comprendre comment les images clés peuvent être utilisées pour créer de superbes mouvements de rebond. Il existe également un excellent article de Medium, écrit par son créateur, Joel Besada, sur la réduction du nombre d'images clés générées, la raison pour laquelle il vaut la peine de s'efforcer de l'obtenir, ainsi qu'un regard fascinant sur la facilité..
Remarque: Actuellement, Bounce n'est plus en développement actif et aucun projet de développement futur n'est prévu, selon Joel.
Anime est une bibliothèque d'animation JavaScript légère. Il fonctionne avec toutes les propriétés CSS, les transformations CSS individuelles, les attributs SVG ou DOM, et les objets JavaScript..
C'est une merveilleuse bibliothèque pour comprendre comment construire et apprendre des mouvements basés sur la chronologie, démarrer des animations à certaines valeurs, des animations complexes d'images clés, définir des heures de début par rapport à une durée d'animation précédente, construire des contrôles de lecture, etc..
Je suggère fortement de le parcourir et si vous en désirez encore plus, de nombreuses démos sont également disponibles sur CodePen..
J'aime celui la. Attendre! Animate fournit un moyen simple de calculer les pourcentages d'images clés afin de pouvoir insérer un délai entre chaque itération d'animation..
Il existe un outil de configuration pour ajouter des attentes à vos propres animations sans recourir à JavaScript, car CSS ne fournit pas un moyen facile de mettre en pause une animation avant qu'elle ne se répète; délai d'animation dénote simplement un retard au tout début de l'animation.
Vous pouvez même personnaliser votre minutage, votre durée et votre direction de mouvement afin d'affiner votre mouvement souhaité. C’est une façon très amusante d’apprendre sur le mouvement et vous donne des informations en temps réel sur vos réglages..
MoJS est une «ceinture d'outils d'animation graphique pour le Web». Il vous permet de créer des animations et des effets soyeux pour une expérience utilisateur renversante. Il existe même une option pour créer une construction personnalisée pour les besoins de votre projet actuel; si longs frais généraux de taille de fichier!
Il y a beaucoup de démos à explorer et listées sur GitHub. Apprenez à créer des effets de mouvement vraiment captivants, comme mon préféré, le «tracé de bulle», les mots révélateurs, les traînées de poussière et d’autres effets comme «éclaté», etc. Si vous voulez apprendre à créer des effets compliqués et complexes, ne cherchez pas plus loin, car MoJS a le dos.
Un autre fantôme… Spirit est un superbe outil d’animation pour le Web (l’application est disponible ici); sauter et animer des objets en utilisant un scénario visuel. Je sais juste que celui-ci va être génial!
Spirit va changer la façon dont vous créez des animations pour le Web. Vous disposez d'un contrôle complet de la chronologie, de la possibilité d'inspecter les animations et d'une API facile à apprendre et à comprendre. C'est un moyen simple et intuitif de comprendre des animations de bâtiment sans la lourde charge d'apprentissage d'un logiciel compliqué..
ScrollReveal vous offre des animations de défilement faciles pour le Web. Et sa légèreté aussi; En plus de n'avoir aucune dépendance, la bibliothèque est réduite à 3,3 Ko et gzippée..
Mouillez-vous bien avec des animations de séquence basées sur des intervalles pouvant être configurées pour se charger de manière asynchrone. ScrollReveal prend également en charge la rotation 3D prête à l'emploi, ce qui signifie que vous pouvez apprendre votre 3D et devenir vraiment créatif sans devoir utiliser la fonctionnalité et la mécanique du défilement sous-jacent..
Avez-vous un peu plus repos open-source que j'ai manqué? Avez-vous utilisé l'un des projets répertoriés pour cet article? Laissez un commentaire et un lien ci-dessous! J'espère qu'au moins un de ces exemples pourra vous être utile dans votre travail quotidien. Bonne codage!
