Aujourd’hui nouveau tuto sur un gloubi script d’effet sur texte. Cette fois ci, il s’agit de texte avec arrière-plan défilant.

Principe du script

Le script original est disponible sur sa propre page sur le site de notre gloubi adversaire.

Il fonctionne selon le principe de calques : au-dessus du calque de motif, on place un autre calque où le texte fait des « trous », laissant voir ce que l’on place dessous (ici notre calque de motif).

Le calque de motif est plus grand que le calque supérieur, mais on masque ce qui est en dehors de la zone du calque supérieur. Ce calque de motif est ensuite déplacé par du code JS.

Version plus moderne

En utilisant les technos actuelles pour reproduire ce script, on n’a plus besoin que d’une seule image (celle du motif de fond) et uniquement de CSS. Plus besoin de JavaScript !

L’étape la plus simple de ce remake est la gestion de l’image de fond.

Notre texte est englobé dans un élément en display inline-block, et avec une hauteur et une largeur précise (dans notre cas, 400 pixels de large sur 89 pixels de haut).

#sliding-title {
    display:inline-block;
    width: 400px;
    height: 89px;
}

Pour le défilement du fond, on créé une animation modifiant sa position (propriété background-position) de 0 % à 100 %, et on l’applique de façon linéaire et répétée indéfiniment.

@keyframes backgroundSlide {
    from {
        background-position: 0%;
    }
    to {
        background-position: 100%;
    }
}

#sliding-title {
    /* ... */
    animation: 3s backgroundSlide linear infinite;
    /* ... */
}

Viens ensuite la création du texte en « trou ». Pour cela, on va utiliser la propriété background-clip et sa valeur « text » (note : pour que cela fonctionne sous Chrome, il faut préfixer), et il faut régler la couleur du texte comme transparente (mot clé « transparent » ou code RGBA).

#sliding-title {
    /* ... */
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    /* ou, en notation RGBA décimale ou hexadécimale :
        - color: rgba(0, 0, 0, 0);
        - color: #00000000;
        - color: #0000;
    */
    /* ... */
}

Conclusion

La version finale de ce « script » est visible dans la section démonstrations de mon site.

Et je vous dit à bientôt pour d’autres aventures codesques et stylisées.