So implementieren Sie Parallax Scrolling

So funktioniert's

Der Parallax-Effekt ermöglicht es, die Position eines Bildes im Verhältnis zu anderen Objekten zu verändern. Sie können den Effekt auf Ihrer Seite mithilfe eines benutzerdefinierten HTML-Codes einrichten und sie dadurch optisch ansprechender gestalten. Sie können eine bestehende Lösung nutzen oder Ihren eigenen Code hinzufügen.

Wie komme ich dazu

1. Öffnen Sie Ihr Projekt im Kundenportal, und navigieren Sie zum Menüpunkt Storefronts > Websites.
2. Wählen Sie im Abschnitt Seiten die gewünschte Website aus, und klicken Sie auf Site Builder öffnen.
3. Wenn Ihre Website mehrere Seiten umfasst, wählen Sie die gewünschte Seite aus:
   1. Klicken Sie oben im Editor auf den Titel der aktuellen Seite.
   2. Wählen Sie die gewünschte Seite aus der Drop-down-Liste aus.
4. Klicken Sie an einer beliebigen Stelle auf der Seite auf Block hinzufügen.
5. Wählen Sie den Block Benutzerdefinierter Code aus.
6. Fügen Sie den HTML-Code mit dem Effekt-Skript auf eine der folgenden zwei Arten ein:
   • Verwenden Sie Ihren eigenen Code.
   • Verwenden Sie das vorgefertigte Skript. Gehen Sie dazu wie folgt vor:
     1. Fügen Sie den folgenden Code in den Block ein:

 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. Wenn Sie den Parallax-Effekt für ein Bild einrichten möchten, müssen Sie den Link zu diesem Bild im Attribut data-image platzieren.

7. Klicken Sie auf Vorschau, um die Änderungen anzuzeigen.

Tutorial-Video zur Anleitung:

Nützliche Links