Si vous avez l’habitude de fréquenter le site d’Elegant Themes, vous avez certainement déjà remarqué en pied de chacune des pages du site, la section qui s’élargit et change de couleur peu après être apparue ?
Un article avait déjà été publié sur leur blog, pour expliquer comment reproduire cet effet, mais je trouve la méthode un peu complexe donc je vais vous proposer une solution plus simple à mettre en œuvre et à éditer.
Et en bonus 2 autres exemples qui vont inspireront sûrement pour vos prochains designs de sites. 😉

Exemple 1 : une section qui passe en pleine largeur au scroll

Préparez votre section

Ouvrez le Divi Builder sur la page où vous désirez ajouter votre section, créez-la et personnalisez-la avec les attributs de styles et de contenu que vous souhaitez.

Les seuls impératifs sont les suivants :

1. il faut définir une valeur pour la largeur de la section
2. il faut préciser son alignement
3. il ne faut pas lui appliquer de couleur de fond (nous le ferons en CSS, sinon le builder ajoute un !important après la couleur et on ne peut plus surcharger le style)

Pour les points 1 et 2, voici comment procéder ; pour le point 3, je pense que vous devriez vous en sortir ?… 🙂
Allez dans les paramètres de la section, Style -> dimensionnement, choisissez la largeur qui vous convient puis sélectionnez l’icone qui permet de centrer la section dans la largeur du site.

Enfin, toujours dans les paramètres de la section, Avancé -> ID et classes CSS -> ID CSS, ajoutez section-scroll comme identifiant (vous pouvez bien sûr choisir le nom que vous voulez).

Une touche de jQuery maintenant

Avant de définir les styles de notre section telle qu’elle apparaitra modifiée, nous allons ajouter quelques lignes de JavaScript.

Où placer le code ?

Si vous souhaitez afficher votre section :

• sur une seule page : ce code sera à ajouter dans un module code sur la page où se trouve votre section
• sur toutes les pages de votre site :
  • ce code sera à ajouter dans Divi -> Options du thème -> Intégration -> Ajouter ligne de code à la < head > de votre blog
  • il sera aussi préférable d’enregistrer votre section dans la bibliothèque Divi en cochant l’option “globale”. Ainsi, si vous avez une modification à lui apporter, elle sera bien répercutée sur toutes les occurrences de votre section

<script>
jQuery(document).ready(function(){
    jQuery('#section-scroll').waypoint(function() {
        jQuery('#section-scroll').toggleClass('section-scroll-large');
    }, {offset: '70%'});
});
</script>

Détaillons brièvement le code

• Ligne 3 : nous précisons l’identifiant de notre section, on définit clairement que c’est elle qui devra réagir au scroll
• Ligne 4 : nous précisons encore l’identifiant de notre section, mais cette fois pour dire qu’on va lui ajouter une classe au moment opportun. Une classe que j’ai nommée section-scroll-large, mais une fois encore, vous pouvez bien la nommer comme bon vous semble ; n’oubliez pas son nom car nous allons l’utiliser quand nous mettrons le nez dans les CSS.
  Cette classe sera donc ajoutée au moment opportun, mais aussi retirée quand le moment ne sera plus opportun 🙂 “Toggle”, c’est “la bascule” en anglais : on ajoute, on enlève…
  On pourrait remplacer .toggleClass par .addClass mais l’effet ne serait plus réversible quand on scroll vers le haut, car la classe serait ajoutée une bonne fois pour toute (jusqu’au prochain chargement de la page, pour être précis).
• Ligne 5 : nous définissons maintenant notre fameux moment opportun ! Quand notre section atteint les 70% de la hauteur de la page, la classe s’ajoute.
  Sachez que cette valeur est à ajuster en fonction de votre design et peut aussi être déclarée en px, en em, en vh, etc. Tout dépend de l’effet que vous recherchez.

Et on termine par les CSS

Il s’agit maintenant de personnaliser le style de notre section, pour définir comment elle devra s’afficher une fois que le bon taux de scroll sera atteint.

Où placer le code ?

• Si vous utilisez un thème enfant : ce code sera à placer dans le fichier style.css
  
• Si vous ne possédez pas de thème enfant : ce code sera à coller dans Divi -> Options du thème -> Général -> Personnaliser CSS
  (Vous pouvez aussi télécharger gratuitement le thème enfant Divi Community)

#section-scroll, .section-scroll-large  {
    transition: all .8s ease;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
}

#section-scroll {
    background-color: #FFA31D;
}

.section-scroll-large {
    max-width: 100%!important;
    padding-top: 100px!important;
    padding-bottom: 100px!important;
    background-color: #cc692f!important;
    box-shadow: 0px 0px 50px 10px rgba(135,90,20,0.5)!important;
    z-index: 10;
}

Détaillons ces CSS

• Premier groupe de lignes : on applique une transition sur la section originale et sa version modifiée, ainsi le changement de style se fera tout en douceur, dans un sens comme dans l’autre
• Deuxième groupe de lignes : c’est ici qu’on précise la couleur de la section originale (plutôt que dans le builder, comme je vous l’expliquais plus haut)
• Troisième groupe de lignes : on définit enfin notre section modifiée
  • tout d’abord, on revient à une largeur de 100% pour qu’elle occupe toute la largeur de l’écran
  • ensuite, on augmente le padding haut et bas pour donner plus de hauteur à la section
  • après vient la nouvelle couleur de fond
  • enfin, vous pouvez ajouter une ombre portée
  • dernier détail, penser à augmenter le z-index pour placer la section au premier-plan par rapport à la section qui suit, ainsi l’ombre portée ne sera pas cachée derrière le fond de la section suivante

Exemple 2 : une section qui passe en plein écran au scroll

Il s’agit ici d’une simple variation de l’exemple précédent ; vous pouvez voir son rendu tout en pied de la page de démo.

Par rapport à l’exemple précédent, nous ne modifierons donc que les CSS, le JavaScript reste le même (changez seulement l’identifiant et la classe si vous ajoutez plusieurs éléments qui se modifient au scroll, ceci afin d’éviter les conflits évidemment).

Stylons notre section

Les CSS sont sensiblement les mêmes que dans le premier exemple, vous remarquerez que j’ai modifié le nom de l’identifiant et de la classe (vu que j’ai plusieurs exemples sur la même page).

#section-scroll-2, .section-scroll-fullscreen  {
    transition: all .8s ease;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
}

#section-scroll-2 {
    background-color: #5A34A1;
}

.section-scroll-fullscreen {
    max-width: 100%!important;
    box-shadow: 0px 0px 50px 10px rgba(70,40,120,0.3)!important;
    z-index: 10;
 /* Ajouts par rapport à l'exemple 1 */
    height: 100vh!important;
    background-image: url(http://playground.divi-community.fr/wp-content/uploads/2017/09/d72a91fe3554c325338224329074d89f.jpg)!important;
    background-size: cover;
    /* Pour centrer le contenu dans la hauteur */
    display:flex;
    display:-webkit-flex;
    display: -ms-flexbox;
    align-items:center;
    -webkit-align-items:center;
}

Les différences se situent principalement dans le troisième groupe de lignes où j’ai :

• précisé la hauteur de la section, car sa particularité est que lorsqu’elle atteint la position définie dans la page, sa hauteur passe à 100 vh, soit la valeur de la hauteur de l’écran sur lequel est affiché le site
• ajouté une image de fond
• ajouté quelques petites lignes pour centrer le contenu dans la hauteur de la section avec la propriété CSS flex

Exemple 3 : des blurbs qui changent de perspective au scroll

Dans ce dernier exemple, je vais vous montrer qu’il est possible d’intervenir sur différents éléments à la fois. Ensuite… “Sky is the limit!” 🙂

Préparez vos blurbs

Insérez une ligne avec 3 colonnes dans une section existante, ou une nouvelle (peu importe), puis ajoutez dans chacune un module Résumé.
Stylez vos blurbs comme bon vous semble, nous ajouterons les divers effets en CSS (perspective, flou et opacité).
Allez dans les paramètres du premier module, Avancé -> ID et classes CSS -> ID CSS et ajoutez comme identifiant #blurb-scroll-1 (ou autre chose).
Faites de même pour les 2 autres modules en modifiant l’identifiant à chaque fois. Moi, j’ai mis tout simplement #blurb-scroll-2 et #blurb-scroll-3

Le jQuery

Pour cet exemple, le code est un peu plus long, étant donné qu’il faut prendre en compte les 3 blurbs.

<script>
jQuery(document).ready(function(){
 jQuery('#blurb-scroll-1').waypoint(function() {
 jQuery('#blurb-scroll-1').toggleClass('blurb-scroll-reset');
 jQuery('#blurb-scroll-2').toggleClass('blurb-scroll-reset');
 jQuery('#blurb-scroll-3').toggleClass('blurb-scroll-reset');
 }, {offset: '60%'});
});
</script>

Détaillons brièvement le code

• Ligne 3 : on précise quel élément déclenchera l’action. J’ai utilisé l’identifiant du premier blurb, mais ça aurait pu être n’importe lequel, étant donné qu’ils sont positionnés à la même hauteur.
• Lignes 4, 5 et 6 : comme dans les 2 exemples précédents, nous précisons là encore l’identifiant de chaque blurb pour dire qu’à chacun d’entre eux, nous ajouterons une classe au désormais fameux moment opportun.
  J’ai nommé ma classe blurb-scroll-reset car elle aura pour but d’effacer tous les effets de perspective pour remettre à plat nos blurbs.
• Ligne 7 : j’ai utilisé une valeur d’offset différente de mon premier exemple en raison de la hauteur des blurbs. Ainsi, on a le temps de bien voir les 2 états d’affichage.

Et enfin les CSS

Ajoutons maintenant à nos blurbs les divers effets.

#blurb-scroll-1, #blurb-scroll-2, #blurb-scroll-3, .blurb-scroll-reset {
    transition: all .8s ease;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
}
    
#blurb-scroll-1 {
    transform: skewY(-10deg);
    -webkit-transform: skewY(-10deg);
    -moz-transform: skewY(-10deg);
    -ms-transform: skewY(-10deg);
    
    filter: blur(1px);
    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -ms-filter: blur(1px);
}

#blurb-scroll-2 {
    margin-top:-40px;
    
    transform: scale(0.9);    
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    
    filter: blur(2px);
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -ms-filter: blur(2px);
    
    opacity: 0.8;
    filter: alpha(opacity=80); /*IE*/
}

#blurb-scroll-3 {
    transform: skewY(10deg);
    -webkit-transform: skewY(10deg);
    -moz-transform: skewY(10deg);
    -ms-transform: skewY(10deg);
    
    filter: blur(1px);
    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -ms-filter: blur(1px);
}

.blurb-scroll-reset {
    filter: blur(0)!important;
    -webkit-filter: blur(0)!important;
    -moz-filter: blur(0)!important;
    -ms-filter: blur(0)!important;   
    
    transform: skewY(0)!important;   
    -webkit-transform: skewY(0)!important;
    -moz-transform: skewY(0)!important;
    -ms-transform: skewY(0)!important;
    
    transform: scale(1)!important;
    -webkit-transform: scale(1)!important;
    -moz-transform: scale(1)!important;
    -ms-transform: scale(1)!important;
        
    margin-top: 0!important;
    
    opacity: 1;
    filter: alpha(opacity=100); /*IE*/
}

Détaillons ces CSS

• Premier groupe de lignes : comme dans les exemples précédents, nous appliquons une transition pour ne pas passer brutalement d’un état à l’autre.
• Deuxième, troisième et quatrième groupes de lignes : les divers effets que nous ajoutons sur chaque blurb.
  Le code peut paraître un peu long mais c’est à cause des préfixes (-moz-, -ms-, -webkit-) qu’il faut ajouter devant chaque effet pour assurer la compatibilité avec les différents navigateurs.
  Je vous explique rapidement les effets que j’ai utilisé (en savoir plus sur les transformations en CSS) :
  • skew : positionne un élément en oblique (sur l’axe X ou Y). C’est ce que j’ai utilisé sur les blurbs 1 et 3.
  • scale : modifie l’échelle d’un élément (soit homothétiquement, soit en intervenant indépendamment sur sa largeur et sa hauteur). C’est ce que j’ai utilisé sur le blurb 2.
  • blur : applique un effet de flou.
  • opacity : change l’opacité d’un élément. Je m’en suis servi pour légèrement estomper le blurb du centre afin d’accentuer l’effet d’éloignement.
• Cinquième groupe de lignes : c’est ici qu’on remet à zéro tous nos effets, avec la classe .blurb-scroll-reset qui est donc ajoutée à chaque blurb quand ils atteignent la position requise dans la page.
  Quand je dis qu’on “remet à zéro”, ce n’est qu’une expression, car vous remarquerez que pour les attributs scale et opacity, la valeur nominale est 1 et non 0.

Pour conclure

J’espère que ces quelques exemples vous ont permis de mesurer la puissance de jQuery, mais surtout de voir qu’en quelques lignes de code assez simples, on peut obtenir des résultats vraiment sympas.
Si vous voulez aller encore plus loin, sachez qu’il existe des bibliothèques JavaScript comme Scroll Me ou Scroll Magic qui apportent des fonctionnalités bien plus poussées.

À vous maintenant de faire des tests et de voir comment vous pouvez intégrer ces effets dans vos sites.
Et n’hésitez pas à partager vos réalisations dans les commentaires.

Partager