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

1. Ouvrez le projet dans le Compte éditeur et accédez à la section Storefronts > Websites.
2. Dans la section Sites, sélectionnez votre site et cliquez sur Open Site Builder.
3. Si votre site comporte plusieurs pages, sélectionnez celle qui vous intéresse :
   1. Appuyez sur le titre de la page actuelle en haut du constructeur.
   2. Sélectionnez la page souhaitée dans la liste déroulante.
4. Depuis n’importe où sur la page, appuyez sur Add block.
5. Sélectionnez le bloc Custom code.
6. Ajoutez le code HTML contenant le script d’effet de l’une des deux manières suivantes :
   • Utilisez votre propre code.
   • Utilisez le script prêt à l’emploi. Pour ce faire :
     1. Insérez le code suivant dans le bloc :

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

1. 1. 2. Pour appliquer l'effet de parallaxe à une image, insérez un lien vers cette image dans l'attribut data-image.

7. Appuyez sur Preview pour voir vos modifications.

Regardez le tutoriel vidéo pour ces instructions :

Liens utiles