Actualités web (SEO, réseaux sociaux, webmarketing...) - Blog Tutoriels illustrés - Blog Internet-Formation (Mathieu Chartier)

Créer un menu latéral (swipe menu) avec Touch Events et Click en CSS 3 et Javascript natif

Mathieu Chartier 07/01/2019 0 commentaire

Effet slide menu ou swipe menu en Javascript natif et CSS 3

Et voilà un petit tutoriel technique pour débuter 2019 sur de bonnes bases. Quoi de mieux qu'un peu d'HTML, de CSS 3 et de Javascript Vanilla (natif) pour faire oublier le foie gras, les huîtres et autres mets gourmands ? Nous allons prendre le cas d'un menu latéral ergonomique et UX Design (un swipe menu ou un slide menu dans le jargon) pour présenter plusieurs concepts en un rien de temps : [...]

Faire du Lazy Loading avec l’API Intersection Observer (Javascript)

Mathieu Chartier 19/11/2018 3 commentaires

Mettre en place du Lazy Loading est devenu essentiel en matière d'expérience utilisateur (UX Design) mais aussi pour booster le chargement des pages web. La technique du "chargement paresseux" existe depuis de nombreuses années mais nous allons présenter la méthode la plus en vogue actuellement (et dans un futur proche)... [...]

Créer des loaders qui suivent le défilement (scroll) des pages avec jQuery et CSS 3

Mathieu Chartier 25/08/2016 3 commentaires

Créer barres et cercles de chargement lors du scroll (défilement) des pages et des contenus

Les loaders (barres de chargement, cercle de chargement...) sont très nombreux sur le web mais beaucoup sont réalisés par des webdesigners en Gif et ne s'appuient pas sur des valeurs variables. Il s'agit souvent de loaders continus et infinis et quand vous avez besoin de créer un loader personnalisé et évolutif, c'est souvent moins simple à réaliser. [...]

Optimiser parfaitement WordPress pour les mobiles avec AMP HTML

Mathieu Chartier 11/12/2015 13 commentaires

Plugin de base AMP HTML pour WordPress : thème par défaut

Le projet AMP (Accelerated Mobile Pages) est une librairie HTML open source qui permet de considérablement accélérer les pages web sur les supports mobiles. Les pages en AMP HTML peuvent être chargées jusqu'à 4 fois plus rapidement que les pages web classiques, tout cela en chargeant jusqu'à 8 fois moins de données qu'habituellement. [...]

Créer une animation manuelle au clavier en jQuery avec gestion des collisions

Mathieu Chartier 15/09/2015 0 commentaire

Effets de rebond en jQuery avec impact et zone de déplacement au clavier

Dans le tutoriel précédent, nous avons appris à créer une animation automatique sans gestion des mouvements. Dans ce second tutoriel du même acabit, nous allons créer une animation entièrement gérée au clavier (avec les flèches de déplacement) qui prend en compte les collisions et impacts contre des bordures. [...]

Comment créer un rebond automatique avec collision en jQuery ?

Mathieu Chartier 15/09/2015 0 commentaire

Effet de rebonds avec collisions contre bordures (impact) en Javascript

Savoir créer des animations en Javascript ou jQuery est toujours intéressant, notamment depuis la chute indéfinie de Flash qui prenait à cœur cette tâche. Plusieurs techniques sont disponibles pour remplacer la solution d'Adobe, notamment les canvas HTML, ou la fonction animate() de jQuery. Dans ce tutoriel pas-à-pas, nous allons justement prendre ces techniques à contre-courant, et faire sans. L'objectif est de montrer que nous pouvons animer dans n'importe quel contexte. La programmation a cela de magnifique qu'il est possible de presque tout faire, tant que notre imagination et notre talent le permet, profitons-en... [...]