Un effet de scroll de page dans un iMac avec Divi ? J’avoue ne pas savoir vraiment quel est le terme que l’on peut employer mais un lecteur de Astuces Divi m’a envoyé un email hier pour me demander comment j’avais pu réaliser cet effet de page qui défile dans un iMac au scroll de ma page d’accueil.

Il est vrai que cet effet de scroll est sympa et que j’ai dû réalisé plusieurs essais avant d’y parvenir. Je suis heureuse de partager cela aujourd’hui avec vous.

 

Comment analyser un design web qui vous plait ?

Pour être honnête, cet effet de scroll de page dans un iMac, je ne l’ai pas inventé car je l’ai déjà vu sur un site fait avec Divi. J’avais trouvé cela génial et je m’étais dit qu’il fallait simplement analyser le design pour essayer de faire quelque chose de similaire, sans copier bien sur !

Si vous regardez bien, il n’y a rien de sorcier : pas de JS, simplement un peu de CSS, trois fois rien ! Tout est dans les images !

C’est d’ailleurs ce que je dis souvent à mes élèves ou mes clients, le WebDesign dépend beaucoup des images. Quand je parle d’images, je ne parle pas de photos mais plutôt de réalisations créées de toute pièce avec un logiciel spécifique. D’ailleurs, tout ce qui se trouve sur Astuces Divi a été créé : pas de photos, juste des éléments vectoriels…

Pour ce tutoriel que je vais vous présenter, vous pourriez imaginer des milliers de déclinaisons comme :

  • une fenêtre ouverte sur un paysage qui défilerait au scroll de la page
  • un hublot de sous-marin qui laisserait entrevoir la faune marine au scroll de la page
  • un smartphone,
  • un hublot d’avion etc…

Tout peut être imaginé dès lors qu’on envisage un défilement et que l’on possède (ou crée) les ressources adéquates.

 

Ce que vous avez besoin pour réaliser cette page qui se « scrolle » dans un iMac

Vous avez besoin seulement de deux choses : d’un mockup et d’une image d’arrière plan. Toutefois, en fonction du résultat que vous souhaitez obtenir, les tailles vont devoir changer. Choisir les bonnes tailles d’image est d’ailleurs la chose la plus complexe de ce tuto.

N’oublions pas non plus que ce tuto est destiné aux utilisateurs du thème Divi que vous pourrez vous procurer ici.

 

1. Choisissez un mockup

Dans mon cas c’est un iMac dont j’ai pris le soin de découper son intérieur et que j’ai exporté au format .png puisqu’il conserve la transparence. Pour info, j’ai fait ces actions avec Affinity Designer mais vous pourriez faire la même chose avec Photoshop.

Après plusieurs essais, l’image qui était la plus convenable était de 847 x 704 pixels. Je précise bien que cette taille convenait au format de ma ligne Divi qui est divisée en 3 colonnes. Je suppose que si vous désirez réaliser le même effet sur une ligne 1/1, vous devrez certainement changer la taille.

Mockup pour iMac Scroll

Mockup pour iMac Scroll : attention cette image doit faire 847×704 pixels

 

2. Créez une image d’arrière plan

Dans mon cas, j’ai fait une création avec le logo d’Astuces Divi et les « glaces » que j’ai multiplié et mis en transparence. Toujours avec Affinity Designer.

Pour cette image aussi j’ai dû réalisé plusieurs essais jusqu’à trouver la taille idéale de 1500 x 2500 px

Background Fixed pour iMac scroll effect

Background Fixed pour iMac scroll effect : cette image fait 1500×2500 pixels

Cette image doit être « graphique » afin que l’effet du scroll soit réussi. C’est à dire que si l’image d’arrière plan est de couleur unie, ça ne fonctionnera pas et c’est logique…

 

Réaliser l’effet de scroll en 4 étapes simples

Une fois que vous avez réuni les images adéquates, vous allez pouvoir effectuer les quelques étapes nécessaires à réaliser ce superbe effet de scroll dans un iMac.

Je vous conseille de vous armer de patience si les tailles des images ne se prêtent pas au rendu que vous souhaitez obtenir et de modifier jusqu’à trouver la taille idéale.

 

Étape 1 : ajouter une section et une ligne Divi

Ajouter une section Divi

Ajouter une section Divi

Dans cette première étape, vous devrez :

  1. activer le Divi Builder
  2. ajouter une section standard (couleur bleue)
  3. ajouter une ligne (couleur verte) de type 1/4 + 1/2 + 1/4

Vous n’avez rien à changer, vous pouvez laisser la section et la ligne avec les paramètres par défaut.

 

Étape 2 : ajouter et paramétrer le module image

Dans la colonne 1/2 de la ligne, c’est à dire dans la colonne du milieu, vous allez ajouter un MODULE IMAGE que vous devez paramétrer comme ceci :

Ajouter le module image

Ajouter et paramétrer le module image

 

  1. URL de l’image : choisissez l’image de votre mockup. Cette image sera donc l’image de premier plan.
  2. Ouvrir dans une visionneuse : NON
  3. Arrière plan : c’est ici que vous allez insérer l’image d’arrière-plan que vous avez préalablement créée (1500 x 2500 px)
  4. Utiliser l’effet de parallaxe : OUI
  5. Méthode Parallaxe : CSS
  6. Toujours dans le MODULE IMAGE, rendez vous à l’ONGLET AVANCÉ, ajoutez une classe CSS au module : pour mon exemple, j’ai donné la classe « imac-bg »
    Ajout d'une classe CSS au module image

    Ajout d’une classe CSS au module image

    Cela va nous permettre d’ajouter un petit morceau de CSS qui est indispensable pour le rendu du scroll.

  7. Cliquez sur le bouton vert « Sauvegarder et quitter ».

 

Étape 3 : ajouter du CSS personnalisé

Une fois la classe CSS ajoutée dans l’onglet AVANCÉ du MODULE IMAGE, vous allez pouvoir vous rendre dans l’onglet APPARENCE > PERSONNALISER > CSS ADDITIONNEL pour ajouter un simple bout de code. Cette étape est très importante si vous voulez que l’effet de scroll fonctionne correctement.

CSS additionnel pour que le SCROLL soit réussi

CSS additionnel pour que le SCROLL soit réussi

 

Ce bout de code le voici :

/* background imac homepage*/
.imac-bg .et_parallax_bg {
background-size: contain !important;
}

.et_pb_section_parallax .et_pb_parallax_css {
    -webkit-transform: none;
}

N’oublier pas d’enregistrer vos modifications.

 

Étape 4 : vérifier le rendu

Enfin, vous devez vous rendre en FRONT pour vérifier votre page. Vous convient-elle ? Peut-être devrez-vous régler quelques détails dus à la taille…

 

Récapitulatif en vidéo…

J’espère que j’ai répondu à votre question cher Dolli. Ce fût un plaisir et surtout un bon sujet qui pourra aider de nombreux utilisateurs de Divi. Pour finir, je vous laisse découvrir le tuto en version vidéo…

Ah oui, j’oubliais une chose importante : pour que l’effet de scroll soit réussi, votre page doit être suffisamment longue, c’est à dire avec assez de contenus. Dans la vidéo ci-dessous, vous verrez que j’ai ajouté deux lignes de texte afin de pouvoir profiter de l’effet du scroll.

PS : désolée pour les lenteurs de la vidéo…

Effet de scroll dans Divi

Effet de scroll dans Divi : dites-le sur Pinterest !

Comment réaliser un effet de scroll de page dans un iMac avec Divi ?
4.6 pour 11 votes

D'autres Tips pour Divi :

Pin It on Pinterest

Shares
Share This