Articles pour les mots-clés ‘animation’

Pour cette sélection, une grande liste de ressources graphiques et de design UX/UI vous attendent. Quelques belles démos CSS, et astuces en HTML, SVG et JavaScript sont également au RDV. De quoi rattraper un mois sans article de ma part :p

Cette semaine je vous propose une sélection d’outils pour vous simplifier la vie en CSS, JS, ou encore pour créer des gifs de qualité, des tutoriels pour créer des effets animés funs et intéressants et des ressources pour Sketch, en attendant un prochain article plus orienté outils pour UX Designer :p (teasing)

La semaine dernière j’ai eu l’occasion de donner une conférence lors de l’événement Paris Web. Il s’agissait de ma première intervention en solo sur une thématique que je n’ai pas l’habitude d’aborder même à l’écrit : l’expérience utilisateur avec comme sujet la performance ressentie. Voici un transcript de la conférence donnée.

Quelques ressources utiles pour ce début décembre avec notamment quelques joujoux en CSS et JS pour vous amuser avec les animations et les filtres, mais également des choses plus utiles comme le recadrage intelligent d’image ou l’autocomplétion permissive, ou encore des ressources pour du Growth hacking.

Pas mal de diversité dans cette édition des ressources du Web, avec notamment un petit nouveau dans les sites trousses orienté ressources Web,  j’ai nommé Wwwhere, que je vais vous laisser découvrir. Pour le reste, voici quelques autres ressources dont pas mal de JS, Animation, SVG et CSS, et également quelques fontes gratuites.

Je vous propose aujourd’hui une animation de particules dans un tuto qui affichera une chute de neige en boucle. Il existe souvent une foule de solutions pour ce genre d’animation. Je vous présente une solution en CSS3 en utilisant la propriété animation et les séquences de keyframes.

L’utilisation du SVG est de plus en plus fréquente dans la composition de nos éléments d’illustration, nos logotypes ou encore nos icônes. L’un des avantages du SVG est sa capacité à s’adapter à tout type de densité de pixels. Un autre avantage est sa capacité à hériter de styles CSS et la possibilité d’animation.

Je parle ici de tester les e-mails que vous concevez en HTML et CSS (si on peut encore appeler ça du CSS), vous savez ce monde cruel où la mise en page tableau est reine et où les moteur de rendu régressent ? Dans ce fabuleux monde, le service Litmus vous propose un outil de test bien pratique.

On m’a demandé une vingtaine de fois comment reproduire l’effet d’animation assez simple de mes menus sur la barre latérale de ce blog (si le design actuel est toujours le même d’ici à ce que vous lisiez cet article). Du coup je prends un peu de temps pour vous faire un mini tutoriel et vous expliquer le principe !

MixItUp est un plugin jQuery dans la lignée de Masonry ou Isotope (Isotope qui utilise d’ailleurs Masonry) qui permettent d’ordonner et filtrer une partie de votre contenu selon des critères entièrement personnalisables. Créez des filtres personnalisés facilement selon le besoin de votre projet.

Si vous suivez le compte @NoupeMag sur Twitter (ça marche aussi pour mon compte), vous avez certainement vu passer mon slideshow en CSS3 datant de l’an dernier.
Ce n’était pas ma première tentative de slideshow comme le présentent ces premier et second travaux datant de mai 2010.

Retour des tutoriels CSS avec quelque chose d’un peu original pour cet article : un effet parallaxe uniquement en CSS3.
C’est à la suite de l’article de Simon Kern sur Alsacréations que m’est venue l’envie de tenter d’utiliser CSS pour reproduire cet effet initialement conçu avec JavaScript.

Manière un peu originale d’aborder les transitions, j’ai lu un article en anglais il n’y a pas longtemps qui proposait d’étudier les transitions sur l’événement hover en CSS.
Par défaut, la transition sur cet événement comme on a l’habitude de l’utiliser nous propose des effets équivalents au «mouseover» comme

Ces dernières semaines, j’ai tenté de trouver de nouvelles méthodes pour faciliter la tâche dans l’intégration de certains éléments précis d’un site Web. Je me suis également essayé a des choses plus poussées, comme le remplacement du JS d’un slideshow par du CSS.

… je crois…
CSS3 c’est bien, c’est neuf, mais comme c’est nouveau on a envie d’en mettre partout à toutes les sauces.
C’est beau tant d’enthousiasme, je suis comme cela aussi, mais j’essaye d’inviter Modération à la partie quand je le peux.

Après une demande reçue par e-mail, je me suis dit que la fonctionnalité serait peut-être utile à d’autres que moi.
Lors de la rédaction de ce tutoriel : jQuery – Effet Smooth Scroll (défilement fluide), la complexité du contenu m’a fait retirer une extension intéressante à la dernière fonction/plugin proposée.

L’effet de scroll fluide est déjà intégré, en fonction de vos paramètres utilisateur, sur certains navigateurs. Il se manifeste par un défilement fluide de la page web lorsque vous descendez ou montez grâce à la molette de votre souris, ou les touches de votre clavier. Il est possible de générer cet effet au clic sur une ancre grâce à JavaScript.

Un mois sans article ! Heureusement que les vacances me donnent une bonne excuse 🙂
Ce court article pour relayer un tutoriel diffusé sur Alsacréations qui vous permettra de créer un volet coulissant grâce à la pseudo-classe :target et à la propriété transition en CSS3.