Images changeantes lors du scroll down

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Images changeantes lors du scroll down

    Bonjour,

    Je suis à la recherche d'un tutoriel qui pourrait m'aider à réaliser le même effet que sur ce site : https://www.templatemonster.com/demo/59169.html

    En fait, quand on scroll le site vers le bas, les images backgrounds des différentes sections sont différentes et fixes. J'aimerais savoir comment on peut réaliser ça. Je me dis que c'est juste une question de CSS mais peut-être qu'il faut aller plus loin que ça.

    Merci beaucoup pour votre aide!

    --
    Jean-Francois Beaulieu

    Войдите на Facebook, чтобы общаться с друзьями, родственниками и знакомыми.
    Try out the live preview of the premium Christian Responsive Moto CMS 3 Template (#59169) get yourself acquainted with this theme before you purchase it. Browse through the pages, check out the images, press the buttons, explore the features.
    --
    Jean-François Beaulieu
    http://www.profilweb.net/

  • #2
    Bonjour,

    En regardant l'exemple fourni, chaque image affichée en arrière plan correspond à une div avec une classe pointant sur une image différente.

    Ainsi, vous avez des classes qui contiennent
    Code:
    .bg1 {
    ....
    background-image: url(/mt-demo/59100/59169/mt-content/uploads/2016/08/mt-0548-home-bg1.jpg);
    background-size: cover;
    background-position: center center;
    ​​​​​​background-repeat: no-repeat;
    ..
    }
    .bg2 {
    ...
    background-image: url(/mt-demo/59100/59169/mt-content/uploads/2016/08/mt-0548-home-bg2.jpg);
    ​​​​​​​background-size: cover;
    ​​​​​​background-position: center center;
    ​​​​​​​background-repeat: no-repeat
    ...
    }
    Puis des enchaînements de div:
    Code:
    <div class="bg1...">
    <div> mes articles </div>
    </div>
    <div class="bg2...">
    <div> autre série d'articles </div>
    </div>
    C'est vrai, l'effet est intéressant.

    ​​​​​​​Pascal
    jfbeaulieu aime ceci.
    If anything can go wrong, it will...If I can help, I will ..https://conseilgouz.com

    Commentaire


    • #3
      Merci beaucoup Pascal, je vais tenter le tout de mon côté et voir si ça fonctionne bien

      A bientôt,

      --
      Jean-François Beaulieu
      Web designer chez OKWebDesign
      info@okwebdesign.ca

      Войдите на Facebook, чтобы общаться с друзьями, родственниками и знакомыми.

      --
      Jean-François Beaulieu
      http://www.profilweb.net/

      Commentaire

      Annonce

      Réduire
      Aucune annonce pour le moment.

      Partenaire de l'association

      Réduire

      Hébergeur Web PlanetHoster
      Travaille ...
      X