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
Bestehende Lösung nutzen
- Öffnen Sie Ihr Projekt im Kundenportal.
- Klicken Sie in der Seitenleiste auf Site Builder.
- Klicken Sie auf Site Builder öffnen.
- Fügen Sie im Block Benutzerdefinierter Code den folgenden Code ein:
Copy
- html
<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>
- Um den Parallax-Effekt für ein Bild einzurichten, platzieren Sie den Link zu diesem Bild im Attribut
data-image
. - Klicken Sie auf Vorschau, um sich die Änderungen anzeigen zu lassen.
Tutorial-Video zur Anleitung:
Eigenen Code hinzufügen
- Klicken Sie im Site Builder auf Block hinzufügen und dann auf Benutzerdefinierter Code.
- Fügen Sie Ihren eigenen Code in den Block ein.
War dieser Artikel hilfreich?
Vielen Dank für Ihr Feedback!
Wir werden Ihr Feedback aufgreifen und dazu nutzen, Ihr Erlebnis verbessern.Nützliche Links
Letztmalig aktualisiert: 22. Januar 2024Haben Sie einen Tippfehler oder einen anderen Textfehler gefunden? Wählen Sie den Text aus und drücken Sie Strg+Eingabe.