Comment réaliser un effet de scroll de page dans un iMac avec Divi ?

Mis à jour le 05/11/2018 | Publié le 03/05/2018 | 13 commentaires

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 !

Ça devrait vous plaire aussi :

Responsive Design Divi : comment gérer les différentes tailles d’écran ?

Responsive Design Divi : comment gérer les différentes tailles d’écran ?

Beaucoup d’utilisateurs se posent la question : comment optimiser le Responsive Design de Divi ? De nombreuses options sont disponibles nativement dans Divi pour améliorer le design sur vos divers écrans. Mais quelques fois, vous devrez aussi modifier les Medias Queries… Découvrez comment dans ce guide complet !

Créez un bouton « retour vers le haut » personnalisé en quelques clics !

Créez un bouton « retour vers le haut » personnalisé en quelques clics !

Quand je vous dis qu’on peut tout faire avec Divi ! Pas besoin de coder ou d’installer de nombreux plugins… Il suffit de savoir où chercher : les options sont là ! Dans cet article, je vous propose de découvrir comment créer un bouton « retour vers le haut » (back-to-top button) en seulement quelques clics !

13 Commentaires

  1. Dolli

    Super, c’est ce dont je voulais haha ! Merci pour tes tutos, c’est super gentil de ta part de les partager avec nous 🙂
    Bonne continuation !

  2. Lycia

    Ce qui est fou, c’est qu’on se décarcasse à faire des tutos sympas et on voit que les lecteurs laissent une seule note : 1/5 !!! Mais c’est honteux ! Quand je pense qu’on prend du temps à soi pour partager des astuces sur Divi et qu’il y a toujours des gens qui sont là pour rabaisser le travail des autres. Que celui qui a mis 1 étoile sur 5 se manifeste afin que je puisse comprendre ce qui ne va pas dans ce blog ou cet article.

  3. Thierry Moizan

    Trop top, l’astuce….

  4. frossard

    super tuto merci de votre temps pour partager vos tips…heureusement que des gens comme vous sont là pour nous aider ..car on commence tous un jour
    encore merci
    Patrick

  5. Lycia

    Merci beaucoup Patrick 😉

  6. Stan

    Merci Lycia pour vos tutos et votre générosité

  7. Lycia

    Merci Stan !

  8. Jean-Michel

    Bonsoir
    Je suis interesser a utiliser le meme « formulaire » que celui sur lequel j’ecris ces lignes pour mon blog. Je ne trouve rien, pouvez-vous m’aiguiller svp ?

  9. Lycia Diaz

    Hello Jean-Michel !
    De quel formulaire parlez-vous ? Celui des commentaires ? Si oui, généralement il est activé par défaut sur les articles et désactivé par défaut sur les pages d’un site WordPress. Mais vous pouvez activer les commentaires soit dans les réglages de WordPress (onglet Discussion) soit page par page. Dans les réglages de la page ou de l’article. Quand vous êtes sur l’écran de la liste de vos pages ou articles, vous pouvez passer la souris sur le post et cliquer sur MODIFICATION RAPIDE. Vous verrez une option à cocher ou à décocher. J’espère avoir été claire.
    Vous me direz 😉

  10. Steeve

    Hello Lycia,
    Merci pour le travail fournis et les astuces. Nouvel arrivant dans l’unniver Divi c’est appréciable ;).

    J’ai une question concernant cet article : Est-il possible au lieu d’intégrer une image, d’intégrer un Iframe pour afficher une autre page web (avec une URl différente) ?
    En gros j’ai une app web sur une url diférrente ei j’aimerai l’intégrer dans un mockup.

    Merci par avance 🙂
    Steeve

  11. Lycia Diaz

    Salut Steeve,
    Merci à toi 😉
    Pour être honnête, tu me poses une colle… J’ai envie de te répondre « non, c’est pas possible » mais je n’en sais rien… Pourquoi ne prends-tu pas une capture d’écran de cette deuxième page web ? C’est plus simple, non ?

  12. Steeve

    Merci pour ta réponse rapide.
    Alors pour te répondre au « pourquoi pas de capture écran ? » : Car j’ai besoin que l’utilisateur puisse utiliser cette fameuse app web sur le site.

    Mais j’ai (je pense) trouver la solution.
    – intégrer une Iframe src url.
    – mettre en fond un iPad ou MacBook en fond transparent (png)
    -s’arracher les cheveux pour adapter les tailles et faire en sorte que le code iframe rentre parfaitement dans le « mockup »

    Actuellement je bosse en local mais si tu es intéressée et que ma bidouille tient la route je t’enverrai le résultat.

    Bon week-end 😉

  13. Lycia Diaz

    Salut Steeve, oui je suis curieuse du résultat, tu me diras !

    Pour que le code iframe s’adapte totalement à la taille du mockup, tu penses que c’est possible d’utiliser la propriété background-size en donnant des valeurs comme contain ou cover, ça peut peut-être fonctionner (à tester) ?

    Je me suis servi de cette propriété pour les mockups suivants :

    https://demo.astucesdivi.com/scroll-mockup-1/
    https://demo.astucesdivi.com/scroll-mockup-n3/
    https://demo.astucesdivi.com/scroll-mockup-n4/

    A bientôt 😉

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This