CSS et Animation

Vous voulez animer des éléments de votre page web ? Oubliez Flash maintenant, on fait tout avec des instructions CSS (et un peu de JavaScript).

Animate

Avec des instructions CSS, on peut "animer" (i.e. faire bouger) des éléments d'une page web. Cependant les instructions CSS  pour animer des objets sont un petit peu difficile à utiliser voire abscons (ex: translate(0px,0px)  rotate(0deg) ; animation: animationFrames linear 4s; ...).

Daniel EDEN a donc créé une bibliothèque (qui est très abondamment utilisée) pour ajouter facilement des effets d'animation : Animate. Il suffit d'ajouter des classes CSS aux éléments qu'on veut animer.

Par exemple, pour ajouter un effet de rebond (bounce en Anglais) sur un titre h1, on écrit :

<h1 class="animated bounce">Example</h1>

Sur la page du site Animate, vous découvrirez tous les effets et sur le GitHub, un peu de documentation supplémentaire.

Limitation d'Animate

Comme Animate n'est qu'un ensemble de classes CSS, les effets sont effectués à l'affichage de la page. Si la page est plus grande que l'écran et qu'on descend dans la page (on scrolle) : on ne verra pas d'animation.

La solution est d'ajouter du code JavaScript qui va effectuer les animations quand on scrolle. Il y a plusieurs bibliothèques qui font cela.

Les bibliothèques JavaScript d'animation en scrollant

J'en ai vu 3, il y en a probablement plus : je n'ai pas cherché.

ScrollReveal est assez intéressante mais peut-être un peu verbeuse.

Wow est tout aussi intéressante mais avec une syntaxe un peu différence (tous les attributs CSS contiennent WOW).

Animate Plus est celle que j'ai choisi : elle colle à Animate et est très simple et efficace. Il suffit d'intégrer le fichier (même en version CDN) et tout fonctionne. Avec Animate Plus, on peut faire bien plus que juste "animer" des éléments, lorsqu'on scrolle une page, comme vous pouvez le voir sur la page du site.

Site OnePage et smooth scrolling

Si vous faites un site OnePage (i.e. une page, tous les éléments du site sur une seule page qu'on fait défiler), vous pouvez vouloir accéder aux différentes parties de la page par un défilement doux (smooth scrolling).

C'est assez facile à réaliser sur vos liens <a> ajouter la classe page-scroll. Par exemple :

<a class="page-scroll" href="#services">Services</a>

Et il faut ajouter dans un bout de code en JavaScript avec JQuery et utiliser JQuery Easing

(function($) {
    "use strict"; // Start of use strict

    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($anchor.attr('href')).offset().top - 50)
        }, 1250, 'easeInOutExpo');
        event.preventDefault();
    });

})(jQuery); // End of use strict

Et voilà, en cliquant sur vos liens vous allez obtenir un défilement doux.

Bonne animation de vos pages HTML !