Comment implémenter le défilement parallaxe

Comment ça marche

L’effet Parallax permet de modifier la position d’une image par rapport à d’autres objets. Vous pouvez configurer un défilement non conventionnel de votre page au moyen d’un code HTML personnalisé pour rendre votre site plus accrocheur. Pour ce faire, utilisez une solution existante ou ajoutez votre propre code.

Comment configurer

Utiliser une solution existante

1. Ouvrez votre projet dans le Compte éditeur.
2. Dans la barre latérale, cliquez sur Site Builder.
3. Cliquez sur Open Site Builder.
4. Insérez le code suivant dans le bloc Custom code :

<div class="img-holder" data-image="https://cdn.xsolla.net/files/uploaded/2340/4c9ab2e4036d41e2b31c4e6e01a5a7c6.jpeg"></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  var script = document.createElement('script');
  script.src = "https://cdn.jsdelivr.net/npm/parallax-imagescroll@0.2.3/jquery.imageScroll.min.js";
  script.addEventListener('load', function() {
    $('.img-holder').imageScroll({
      holderClass: 'sb-image-holder',
      speed: 0.5
    });
  });
  document.getElementsByTagName('body')[0].appendChild(script);
</script>

5. Pour appliquer l'effet Parallax à une image, insérez un lien vers cette image dans l'attribut data-image.
6. Cliquez sur Preview pour voir vos modifications.

Regardez le tutoriel vidéo pour ces instructions :

Ajouter votre propre code

1. Dans le constructeur, cliquez sur Add block et sélectionnez Custom code.

2. Insérez votre propre code dans le bloc.

Liens utiles