Partage
  • Partager sur Facebook
  • Partager sur Twitter

Jquery effet porte de Garage

Superposer une DIV (sortie de flux) et lui appliquer 1 scroll naturel

    18 octobre 2018 à 18:52:07

    Bonjour,

    Je voudrai obtenir l'effet présent sur ce site.   https://rubyrussia.club/  L'image présente sur la home défile naturellement vers le haut avec le scrolling horizontal et laisse place au reste du contenu du site. Je l'appelle "effet porte de garage". Je précise qu'il ne s'agit  pas d'une animation qui se déclanche suite à l'action " hover". 

    Je n'arrive pas à trouver de tutos car cette effet ne semble pas très répandu. Je tombe que sur des effets parallax qui joue sur le background. Or dans ce cas précis le header est pardessus les autres autres Div, le header semble être sortie du flux avec la propriété absolute. Visiblement il utilise jquery.

    merci beaucoup pour votre aide

    Folachade

    -
    Edité par adedjoumafolachade 20 octobre 2018 à 10:06:40

    • Partager sur Facebook
    • Partager sur Twitter
      19 octobre 2018 à 9:14:55

      tu peux placer une div en position relative ou absolute (ça dépend de comment tu gères) ensuite au scrole tu change le margin top
      • Partager sur Facebook
      • Partager sur Twitter

      la connaissance est une chose qui ne nous appauvrit pas quand on la partage.

      Mon GitHub

        20 octobre 2018 à 10:30:26

        Hello ox223252,

        Merci pour la réponse.

        Le souci c'est que je sais comment changer le margin top de la div de "manière ponctuel" ( scroll). Mais pas de manière progressive/continue" au scroll" je sais pas le faire. Aurais-tu une piste pour réaliser cette effet avec Javascript ou Jquery. Encore merci.

        Folachade

        -
        Edité par adedjoumafolachade 21 octobre 2018 à 10:15:53

        • Partager sur Facebook
        • Partager sur Twitter
          21 octobre 2018 à 20:37:11

          je pense (je n'ai pas test, mais tu dois pouvoir avoir les infos elemnt.scorllY ou window.scrollY, et avec ça tu peux les coupler à element.style.marginTop. et le tour est joué
          • Partager sur Facebook
          • Partager sur Twitter

          la connaissance est une chose qui ne nous appauvrit pas quand on la partage.

          Mon GitHub

            27 octobre 2018 à 16:08:50

            Hello  ox223252

            En utilisant tes pistes j'ai réussi à me rapprocher du résultat attendu :-). 

            https://jsfiddle.net/Folachade/e2xp8gq5/

            https://rubyrussia.club/

            Encore merci ton aide.

            • Partager sur Facebook
            • Partager sur Twitter

            Jquery effet porte de Garage

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
            • Editeur
            • Markdown