← Article précédent Article suivant →
Publié le 19 juillet 2015

Material Design devient de plus en plus présent. Voici comment réaliser un des effets phares de ce design qui est l'ondulation sur vos composants lors d'un clic.

S'abonner à Louistiti


S'abonner à ma chaîne YouTube

Introduction


Nous allons voir comment réaliser un effet d'ondulation type Material Design à l'aide de CSS3 et de ses animations. Aussi, nous aurons besoin de JavaScript pour le clic de souris mais aussi pour déterminer la position actuelle du curseur de façon à ce que notre effet est cette position comme origine de départ.
La librairie jQuery sera utilisée ici.

Structure HTML


Ici nous utilisons un bouton comme composant, donc un simple conteneur suffit.
<!-- Notre bouton -->
<div class="button">Click me !</div>

JavaScript


Lors du clic sur le bouton, nous récupérons la position en X et en Y de notre curseur de souris. Ensuite, nous allons retirer et ajouter un enfant ".ripple" à notre parent ".button" lors du clic de souris. En effet, nous utilisons la méthode .append() de jQuery pour ajouter notre élément enfant ".ripple" à l'intérieur de notre bouton, c'est pourquoi nous retirons ".ripple" avant de l'ajouter à l'aide de la méthode .remove() de jQuery. Sinon on se retrouverait avec un nouveau-né ".ripple" en plus à chaque clic.

Notre enfant désormais ajouté, nous pouvons renseigner sa position en éditant son style via la méthode .css() de jQuery. De cette façon, nous positionnons ".ripple" à l'endroit où le clic a été effectué sur notre bouton.

Pour aller un peu plus loin, nous pouvons détecter la fin de l'animation (que nous verrons dans la partie CSS) appliquée à notre classe "ripple" pour effectuer divers actions. Comme par exemple du morphing (transformation) de notre bouton (cf article : Bouton d'Action Goutte d'Eau et Morphing Material Design) afin de lui donner une forme ronde ou autre.
$(document).ready(function() {
    $(".button").click(function(e) {
        var parentOffset = $(this).offset(),
            cursorX      = e.pageX - parentOffset.left,
            cursorY      = e.pageY - parentOffset.top;

        $(this).children(".ripple").remove();
        $(this).append("<div class=\"ripple\"></div>");
        $(this).children(".ripple").css({"left" : cursorX + "px", "top" : cursorY + "px"});

        $(".ripple").one("webkitAnimationEnd mozAnimationEnd oAnimationEnd\
                          oanimationend animationend", function() {
            alert("Done");
        });
    });
});

CSS


Ici nous allons styliser notre bouton, notre enfant ".ripple" et créer l'animation. Allez, on se lance !

.button


On centre notre bouton au milieu de notre écran. On ajoute la valeur "hidden" à notre propriété "overflow" de façon ce que notre enfant ".ripple" ne déborde pas du parent. On joue également sur les ombres car n'oublions pas que nous sommes sur du Material Design. :)
Concernant la propriété "transform" nous attribuons un "translate" de façon à centrer notre bouton. On attribue la valeur "0" pour le translateZ pour profiter de l'accélération matérielle, je vous laisse faire le test de ne pas renseigner ce "0" et vous verrez un léger flou lors de l'animation.
Lors du survol du bouton, nous jouons sur l'ombre de celui-ci.
.button {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 8px 12px;
    margin: -26.5px 0 0 -82.5px;
    font-size: 32px;
    background-color: #E91E63;
    color: #FFF;
    border-radius: 1.5px;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16),
                0 3px 6px rgba(0, 0, 0, .23);
    -webkit-transition: box-shadow .3s;
    transition: box-shadow .3s;
    -webkit-transform: translate(-50%, -50%, 0);
    transform: translate(-50%, -50%, 0);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.button:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, .19),
                0 6px 6px rgba(0, 0, 0, .23);
}

.ripple et la fameuse animation


Stylisons notre enfant ".ripple", nous lui attribuons une "position absolute", car rappelez-vous que nous allons le positionner à l'endroit de notre clic. Par défaut, son opacité est à "0" de façon à ce qu'il ne soit pas visible et que nous puissons jouer sur cette opacité durant l'animation. Aussi, nous lui donnons une taille minime et un radius de façon à ce qu'il forme un cercle. On lui applique une légère transparence, on lui donne une durée d'animation d'une seconde et on lui renseigne le nom de l'animation "ripple" que nous allons voir tout de suite.

Dernière étape, allez go !
Lors du clic sur le bouton, on rend ".ripple" visible en modifiant son opacité à "1". Et petit à petit notre enfant grandira et reviendra à son opacité d'origine "0" à l'intèrieur de notre bouton jusqu'à arriver à 100%.
.ripple {
    position: absolute;
    opacity: 0;
    border-radius: 50%;
    width: 2px;
    height: 2px;
    background-color: rgba(255, 255, 255, .35);
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-name: ripple;
    animation-name: ripple;
}
@-webkit-keyframes ripple {
    0% {
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(165);
    }
}
@keyframes ripple {
    0% {
        opacity: 1;
    }
    100% {
        transform: scale(165);
    }
}

Partagez


En espèrant que ce tutoriel vous ait plu ! En attendant les prochains, n'hésistez pas à le partager en cliquant sur les boutons ci-dessous.

S'abonner à Louistiti


S'abonner à ma chaîne YouTube