Effet glissé sur photo de fond

Accueil Forums Divers – Vrac Effet glissé sur photo de fond

Ce sujet a 7 réponses, 2 participants et a été mis à jour par  Luce, il y a 2 mois et 2 semaines.

  • Auteur
    Messages
  • #2721

    Luce
    Participant

    Bonjour à tous,

    Est ce que vous savez si il est possible de faire cet effet avec DIVI, un effet de photo de fond sur lequel le contenu glisse et ça donne un effet de perspective. Voici le site auquel je fais référence, qui est réalisé sous wix :
    https://guillaumejuncar.wixsite.com/artist

    J’ai essayé en mettant une image de fond sur l’ensemble du module, mais je ne sais pas comment faire cet effet glissé…
    Si vous avez des lumières, je suis preneuse !
    Je vous souhaite un bon weekend ensoleillé !
    Luce

  • #2722

    Luce
    Participant

    Sinon j’aimerais faire cet effet aussi, l’image du haut qui disparait sous le contenu.
    Voici le site sur lequel j’ai vu cet effet :
    http://www.laurent-bienaime.com/

  • #2736

    Bruno2
    Admin bbPress

    Salut,

    En fait tu vas devoir insérer un peu de CSS pour obtenir ça.
    Car pour mettre la photo en fond avec ensuite les modules qui passent dessus
    tu ne l’aura pas avec une section ou un module de divi, car il s’agit de la page
    sur laquelle on rajoute des section et des modules.

    Donc dans un premier temps tu vas copier/coller ce code CSS dans l’onglet avancé de ta page.

    .et_fixed_nav.et_show_nav #page-container, .et_non_fixed_nav.et_transparent_nav.et_show_nav #page-container {
        background-image: url("https://forumdivi.fr/wp-content/uploads/2017/11/download.jpeg");/* URL de ton image */
        background-size: 1200px 800px;/* taille de ton image en px ou en % ou en vw ou auto*/
        background-attachment: fixed;/* fixe ton image, ne peut pas défiler */
        background-repeat: no-repeat;/* permet de ne pas répéter l'image si celle-ci est plus petite que l'écran */
        background-position: center; /* défini la position de ton image sur l'écran */
    }

    Regarde sur cette image
    Img1
    ou ici

    Donc tu vas maintenant régler ta section : >> Style >> Espacement >> Personnaliser la Marge >> Sommet 600px
    Tu enregistres et là le bord supérieure de ta section se trouve à 600px du haut de ta page et laisse donc
    apparaitre la photo que tu viens d’insérer en CSS.

    Ensuite il te suffit de faire comme d’hab et de rajouter des rangés et des modules.

    Bien sur les tailles que je te donne en CSS sont à titre d’exemple, ils doivent bien sur
    s’accorder avec ta photo personnelle.
    Dans ton exemple (le 2ème site) la photo fait : 1 300px × 867px et celle que je t’ai fourni
    fait 1920×1167 donc pas adapté pour cette usage.

    De toute façon il va falloir que tu cherches quelle taille est la plus adaptée à ton projet.

    Voila j’espère que tu ne rencontreras pas de difficulté, si toutefois c’est le cas tu sais ou nous contacter 🙂

    À bientôt ++0/

  • #2773

    Bruno2
    Admin bbPress

    encore moi
    L’exemple ci-dessus est valable pour certaine chose, mais en regardant de plus près ton
    exemple je pense que tu peux y arriver de façon plus simple.
    Je pensais que tu voulais cette photo en fond sur la totalité de la hauteur de page.

    Dans ta section (bleue) tu ajoutes une image de fond ensuite
    >> Utiliser l’effet de parallaxe = OUI >> Méthode parallaxe = CSS

    Et tu rajoutes une rangée avec les modules que tu souhaites et pour que cette rangée prenne toute le largeur
    Réglages de la rangée >> Styles >> Dimensionnement >> Passer cette ligne en mode pleine largeur = OUI
    >> Utilisation Personnalisée Largeur De Gouttière = OUI >> Espacement des colonnes = 1

    Et voila je pense que cela colle plus avec ce que tu voulais

    ++0/

  • #2781

    Luce
    Participant

    Merci beaucoup beaucoup Bruno, ta deuxième solution fonctionne super bien.
    Belle fin de journée, à très vite pour d’autres aventures !

  • #2786

    Bruno2
    Admin bbPress

    Ok A bientôt Luce 🙂

  • #2805

    Luce
    Participant

    Bonjour à tous, et bonjour Bruno,

    Pardon de vous embêter encore, mais j’ai un nouveau mystère à résoudre, je planche dessus depuis plusieurs heures sans résultat…

    J’ai bien repris ta méthode Bruno avec le code pour mettre une image en fond, qui défile sur toute la page derrière les modules (comme sur ce site : http://www.carnageproductions.fr/). Ca fonctionne, sauf que je n’arrive pas à rendre l’effet voulu.

    Je t’envoie ci joint un plan de ma page, que j’espère le plus compréhensible possible. Et voici le lien vers cette même page, avec la mise en page que j’ai pour l’instant : http://roccoleflem.com/spectacles

    Armature page spectacles

    Si jamais Bruno, ou quelqu’un d’autre avait une piste pour m’aider, ça serait super.
    L’idée est que chaque section a un fond blanc, et soit séparée par des dividers ronds, et qu’on voit dans l’espace laissé par les dividers l’oiseau qui apparait en fond.

    Je vous remercie mille fois par avance, et vous souhaite un bon vendredi,
    Luce Le Flem

  • #2807

    Luce
    Participant

    J’ai trouvé la solution à mon problème !

Vous devez être connecté pour répondre à ce sujet.