JS Animated. Wie man mit der Erweiterung RD-Parallax arbeitet

Das jeweilige Tutorial zeigt, wie man mit der Erweiterung RD-Parallax in den Homepage-Vorlagen arbeitet.

Die Erweiterung «RD-parallax» wird benutzt, um den flexiblen Parallax-Effekt, der mehrere Ebenen hat, zu erstellen.

Sie sollten einige Schritte ausführen, um diese Erweiterung nach Ihren Bedürfnissen einzustellen:

1. Um mit der Erweiterung RD-Parallax arbeiten zu können, öffnen Sie den FTP-Kunden oder Dateimanager im Hosting Control Panel und nehmen Sie die Änderungen an der Seite, die die Erweiterung «RD-parallax» hat oder an der HTML-Datei vor. Es ist die Seite, zu der Sie RD-Parallax hinzufügen möchten. Nehmen Sie die Änderungen an dem Code vor, indem Sie jeden Code-Editor, zum Beispiel, Notepad++, Sublime usw. nutzen.

2. Die Grundstrukture des Skriptcodes sieht wie folgt aus:

   <!-- RD Parallax -->
     <section class="rd-parallax">
       <div class="rd-parallax-layer" data-speed="0.2" data-type="media" data-url="path/to/your-image.jpg"></div>
           <div class="rd-parallax-layer" data-speed="0.3" data-type="html" data-fade="true">
               ...  </div>
      </section>
    <!-- END RD Parallax-->

   Jeder RD-Parallax Effekt ist als einzelne Ebene festgelegt. Sie können eine unbegrenzte Anzahl der Ebenen hinzufügen.

3. Lassen Sie uns alle Attribute zeigen:

   • Um den Typ der Ebene zu ändern, nutzen Sie das Attribut data-type. Dieses Attribut ermöglicht es Ihnen den Werte media unf html zu ändern. Das Attribut data-type="media" kann jeden Inhaltstyp, zum Beispiel, ein Hintergrund-Video, verschiedene Skripte usw. enthalten. Um den Inhalt zum Element «media» hinzuzufügen, legen Sie keinen Inhaltstyp fest. Der Code wird wie folgt aussehen:

     <div class="rd-parallax-layer vide" data-speed="0.2" data-type="media">

   • Data-url wird benutzt, um ein Hintergrundbild für die Ebene festzulegen.

     <div class="rd-parallax-layer" data-speed="0.2" data-type="media" data-url="path/to/your-image.jpg">

     Wo path/to/your-image.jpg – der Pfad zu Ihrem Bild ist.

   • Um die Geschwindigkeit des Parallax-Effektes zu ändern, nutzen Sie das Attribut data-speed. Es kann die Werte von 0 bis 2 haben. Diese Option definiert die Scrollgeschwindigkeit des Parallax-Effektes.

     <div class="rd-parallax-layer" data-speed="0.2" data-type="media" data-url="path/to/your-image.jpg">

   • Das Attribut Data-blur wird benutzt, um die Unschärfe zu Ihrem Parallax-Effekt hinzuzufügen. Data-blur kann die Werte «true», «false» haben:

     <div class="rd-parallax-layer" data-speed="0.2" data-type="media" data-blur="true">

     In diesem Fall ist der Effekt blur aktiviert. Wenn wir den Wert durch «false» ersetzen, wird das Bild keinen unscharfen Hintergrund haben.

   • Data-direction kann die Werte «inverse», «normal» haben. Dieses Attribut wird benutzt, um die Scrollrichtung der Ebenen festzulegen. Wenn Sie den Wert «normal» festlegen, wird sich der Parallax-Effekt parallel dem Seitenscroll bewegen. Wenn Sie den Wert «inverse» festlegen, wird sich der Parallax-Effekt in der entgegengesetzten Richtung bewegen. Vor Ihnen ist das Beispiel des Codes:

     <div class="rd-parallax-layer" data-speed="0.2" data-type="media" data-direction="inverse">

   • Um den Anzeigeeffekt der Ebene zu aktivieren/zu deaktivieren, können Sie das Attribut date-fade nutzen. Das Attribut «Data-fade» kann die Werte «true», «false» haben.

         <div class="rd-parallax-layer" data-speed="0.3" data-type="html" data-fade="true">

   • Das Attribut Data-mobile wird benutzt, um den Anzeigeeffekt des Parallax-Effektes auf den mobilen Geräten zu aktivieren/zu deaktivieren. Sie können die Werte «true» oder «false» festlegen:

     <div class="rd-parallax-layer" data-speed="0.2" data-type="media" data-mobile="true">

4. Ändern Sie die Datei entsprechend Ihren Bedürfnissen. Speichern Sie die Änderungen und laden Sie die Datei auf den Server noch einmal hoch. Aktualisieren Sie Ihre Website, um sich die Änderungen anzuschauen.

Sie können auch das ausführliche Video-Tutorial nutzen: