14/10/2020 | Ressource en ligne gratuite
« This chapter covers web animation through the expertise of six designers and artists. They explain how to attract a viewer’s eye, reduce cognitive overload, and build visual hierarchies by applying motion. »
Animation N°114/10/2020 | Partage de code
Exemple d'animations en CSS avec deux cercles qui se déplacent. Les couleurs jouent avec les déplacements par les règles de mélange des formes et des fonds.
Generative design27/11/2020 | Livre et codes en ligne
« Here, you will find all of the sketches from the book and their associated code. »
hoverstat.es30/11/2020 | Site archive
« We look out for websites that are experimenting with design, interactivity and content in new and interesting ways. »
Andreas Hulker30/11/2020 | Une référence en animation
Une animation intéressante à reproduire sur le Web.
simple.js30/11/2020 | Une librairie à utiliser avec p5.js
« What is simple.js? Simple.js is a library to make p5js even easier for new and young coders. »
Animation N°230/11/2020 | Partage de code
Le texte se décompose et les lettres bougent formant des vagues. J'ai utilisé splitting.js pour découper les mots et les caractères.
Looom30/11/2020 | Outil d'animation sur iPad
« Inspired by musical instruments and early video games we set out to create meaningful and playful experiences for all ages with a hearty focus on creativity. »
Zdog30/11/2020 | Librairie pour manipuler des formes 3D en SVG.
« Zdog is a 3D JavaScript engine for canvas and SVG. With Zdog, you can design and render simple 3D models on the Web. Zdog is a pseudo-3D engine. »
Designing Interface Animation30/11/2020 | Livre qui explique comment réaliser des animations Web
« This book is a crash course in motion design theory and practice for web designers, UX professionals, and front-end developers alike. »
Animation N°330/11/2020 | Partage de code
Une animation basée sur plusieurs cercles en mouvements. La couleur des cercles passe du noir au blanc permettant de jouer avec le design du fond de la page.
papertoilet.com30/11/2020 | Site qui montre une animation interactive
Un site Web de l'artiste Rafael Rozendaal.
curtains.js30/11/2020 | Librairie qui permet la manipulation d'images et vidéos en textures
« It is a small vanilla WebGL javascript library that converts HTML elements containing images, videos and canvases into 3D WebGL textured planes, allowing you to animate them via shaders. »
Animation N°430/11/2020 | Partage de code
Une animation basée sur le scroll de la souris. Le défilement de la page fait tourner des cercles permettant ainsi de découvrir un mot.
Oto Nové Swiss30/11/2020 | Un projet interactif du studio Suisse Feixen
« We decided to design an interactive poster which you can explore, play around with and maybe even compose your own music. »
Fabian Morón Zirfas30/11/2020 | Liste d'exemples et codes
Cette liste présente un enssemble assez complet d'exemples d'animations et interactions avec p5.js.
Animista30/11/2020 | Liste d'exemples et codes
« Animista is a place where you can play with a collection of pre-made CSS animations, tweak them and get only those you will actually use. »
Animation N°530/11/2020 | Partage de code
Cette animation montre un dessin SVG animé avec CSS. Le travail porte sur les lignes du dessin et leurs découpages, ainsi que l'effet visuel que cela provoque.
ztext.js30/11/2020 | librairie d'animation de texte en 3D
« Easy to implement, 3D typography for the web. Works with every font. »
The animated web30/11/2020 | Ressource dédiée à l'animation Web
Une ressource complète d'exemples et de code présentant des animations de styles très variés.
matter.js02/12/2020 | Librairie de physique 2D
« A 2D rigid body physics engine for the web written in JavaScript. »
Animation N°602/12/2020 | Partage de code
Cette animation présente des lettres qui se déplacent dans la page. Des obstacles bloquent les mouvements des lettres. Cette animation peut permettre de présenter un typo avec les diverses lettres.
Web Programming • Libraries02/12/2020 | Librairies pour le Web
Cette très longue liste présente des liens vers des librairies et des ressources variées sur la programmation, le creative coding et l'animation.
Animation N°702/12/2020 | Partage de code
Recherche pour une animation du logo de ma documentation en ligne ISITCODE. Le logo est répété plusieurs fois, permettant de régler les timings de déclenchement des animations.
Construct 302/12/2020 | Moteur de jeu
Construct 3 permet de créer des jeux et des animations dans le navigateur. La timeline d'animation du logiciel est particulièrement intéressante.
Programming poster with p5.js02/12/2020 | Code, références et liens
Cet ensemble de ressources se base sur l'idée de concevoir des posters animés dans le navigateur avec la librairie p5.js. La ressource intégre des exemples et des codes pour travailler en profondeur avec p5.js
Animation N°802/12/2020 | Partage de code
p5.play est une librairie d'animation et de jeu. Dans cette animation, il s'agit d'expérimenter l'animation de sprites ainsi qu'une interaction avec la détection d'une zone dans laquelle l'animation se joue.
p5.js demos02/12/2020 | Exemples d'animations
« Some examples using p5.js for generative art, motion graphics, and interactive design. » Une ressource de Matt DesLauriers.
Animation N°902/12/2020 | Partage de code
Une animation que j'ai réalisée dans le but de me présenter sur mon site Web. J'ai utilisé de la physique avec des blocs de textes, permettant de «ranger» et déplacer les mots afin de donner un ordre dans la phrase initiale.
Animation N°1002/12/2020 | Partage de code
Une interaction de drag n drop avec des clicks et double-clicks qui font changer un cercle et les couleurs dans la page.
Animate.css02/12/2020 | librairie d'animation
« Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints. »
