Créer un effet de fondu au chargement de la page en CSS

1. Utilisez la propriété animation et la règle @keyframes pour créer un effet de fondu en CSS
2. Utilisez la méthode JQuery animate() pour créer un effet de fondu en CSS

L’effet de fondu augmente l’opacité de l’élément de caché à visible. L’opacité de l’élément sélectionné changera dans le temps imparti.

Ce tutoriel présentera des méthodes pour obtenir un tel effet lors du chargement de la page en CSS.

Utilisez la propriété animation et la règle @keyframes pour créer un effet de fondu en CSS

Nous en savons un peu plus sur l’effet de fondu.

Cette méthode utilisera la propriété animation avec les règles @keyframes pour obtenir un effet de fondu pendant le chargement de la page. Voyons d’abord comment fonctionne la propriété animation.

Lorsque le style d’un élément change d’un style à un autre dans le temps, nous pouvons dire qu’il s’agit d’une animation. La propriété animation est le raccourci des propriétés telles que animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count et animation-direction dans l’ordre.

Nous pouvons utiliser la propriété animation pour spécifier uniquement les propriétés animation-name et animation-duration pour créer un effet de fondu. La règle @keyframes permet de changer progressivement les styles CSS des éléments sélectionnés.

En conséquence, un effet d’animation sera créé. Nous utilisons la valeur de la propriété animation-name dans la règle @keyframes pour sélectionner l’animation à appliquer les styles changeant progressivement.

Dans la règle @keyframes, nous utilisons les sélecteurs comme to et from pour appliquer les styles. Les sélecteurs to et from sont équivalents à 0% et 100%.

Les styles appliqués avec les sélecteurs to seront progressivement remplacés par ceux appliqués avec les sélecteurs from. Le changement se produira avec le temps spécifié avec la propriété animation-duration.

Pour créer une animation de fondu enchaîné, nous pouvons changer l’opacité de la page de 0 à 1 à l’aide des sélecteurs de la règle @keyframes. La syntaxe de la règle @keyframe est présentée ci-dessous.

@keyframes animation-name {
    keyframes-selector {
        css-styles;
    }
}

Par exemple, écrivez des textes à l’intérieur d’une balise p en HTML.

En CSS, sélectionnez la balise html et définissez la propriété animation sur fadein 2s. Ici, fadein est le animation-name et 2s est la animation-duration.

Ensuite, sélectionnez le nom de l’animation fadein avec le mot-clé @keyframes comme indiqué dans la syntaxe ci-dessus. Écrivez 0% comme premier sélecteur d’images clés et définissez la propriété opacity sur 0%.

De même, écrivez les deux autres sélecteurs d’images clés comme 50% et 100% et réglez opacity sur 0.5 et 1, respectivement.

Ici, au chargement de la page, le texte sera d’abord moins visible car l’opacité est réglée sur 0. Progressivement, l’opacité changera et le texte apparaîtra visible dans les deux secondes.

Par conséquent, nous pouvons utiliser la propriété animation pour créer un effet de fondu.

Exemple de code :

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

body {
    animation: fadein 4s; 
}
@keyframes fadein {
    0% {
        opacity:0;
    }
    50%{
        opacity:0.5;
    }
    100% {
        opacity:1;
    }
}

Utilisez la méthode JQuery animate() pour créer un effet de fondu en CSS

Cette méthode abordera une autre approche utilisant jQuery pour créer un effet de fondu enchaîné en CSS.

Nous pouvons utiliser la méthode animate() dans jQuery pour atteindre notre objectif. Le animate() effectue le changement progressif du style de l’élément sélectionné pour créer un effet d’animation.

Nous pouvons spécifier les styles CSS et fournir la vitesse de l’animation. La syntaxe de la méthode animate() est présentée ci-dessous.

(selector).animate({css - styles}, duration, easing, callback)

Lorsque nous utilisons la méthode animate(), le style par défaut de l’élément sélectionné sera remplacé par les styles spécifiés dans la méthode.

Nous utiliserons le même texte dans le HTML que dans la première méthode à des fins de démonstration. Tout d’abord, sélectionnez la balise body de CSS et définissez la propriété opacity sur 0.

Ensuite, sélectionnez la balise body dans jQuery et invoquez la méthode animate(). Dans la méthode, réglez opacity sur 1 dans les styles et réglez la duration sur 2000.

Dans l’exemple ci-dessous, le 2000 équivaut à deux secondes qui est la durée de l’animation. Au départ, lorsque la page se charge, son opacité est 0, et en deux secondes, elle passe à 1.

De cette façon, l’effet de fondu est obtenu à l’aide de jQuery.

Exemple de code :

body {
    opacity: 0;
}

$('body').animate({'opacity': '1'}, 2000);

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>