Einbinden von js für animate.css

    Guten Abend,


    für eine neu entstehende Seite verwende ich Gantry 5, Template Hydrogen, und ich möchte mit WOW.js und animate.css arbeiten.
    Ihr findet die Seite wie folgt:
    http://marburger-bachchor.de
    Einloggen unter
    "Schloss",
    Passwort
    "animation",
    und kommt zunächst auf eine Seite, die nur für eine andere Nutzergruppe sichtbar ist.
    Nun gebt Ihr in die Browserzeile folgendes ein:
    http://marburger-bachchor.de/konzerte-mrsk/19-06
    Hier ist unter dem Navigationsmenü ein Bild (Klavier-Hammerköpfe). Dies möchte ich animieren.


    Was ich bisher gemacht habe: alles, was im Dokuvideo

    Externer Inhalt www.youtube.com
    Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.
    dargestellt wird.
    Was ich nicht hinbekommen habe: Das Implementieren von js, also alles, was unter http://mynameismatthieu.com/WOW/docs.html dargestellt ist. Ich weiß einfach nicht, in welche Files ich die genannten Elemente einfügen muss. Von welchem html-Dokument ist die Rede? Wo finde ich es? Ich habe mich dumm und dämlich gesucht, es aber nicht herausgefunden.
    Könnt Ihr mir helfen?


    Viele Grüße,
    Anna


    Edit: Joomla! 3.5.1

  • Zum hilfreichsten Beitrag springen

    Hi,
    du hast doch scheinbar das Klavierbild per Modul eingefügt. In diesem Modul kannst du auch das JS initiieren und die benötogten Klassen hinzufügen.
    Wie du eigenes CSS/SCSS hinzufügst kannst du hier nachlesen: http://docs.gantry.org/gantry5…ding-a-custom-style-sheet


    Da ich leider nicht mit gantry5 bewandert bin kann ich die keine genaue Anleitung geben.


    In deinem verlinkten Dokument kann ich nirgends lesen das dort von einem HTML-Dokument die Rede ist?
    Grundsätzlich müssen die HTML-Elemente dahin wo auch dein Klavierbild ist.


    Grüße

    Vielen Dank, DirtyWorld.
    Du hast recht, von einem HTML-Dokument ist da nicht die Rede, nur von HTML-Elementen.
    Die scss-Datei habe ich schon viel gebraucht, aber da gehört das Element
    <link rel="stylesheet" href="css/animate.css">
    doch nicht rein?
    Ebensowenig
    <script src="js/wow.min.js"></script>
    <script>
    new WOW().init();
    </script>
    Mit diesen Codeteilen weiß ich nichts anzufangen.
    Soweit zu meinen Fragen zum Doku-Teil "Setup WOW.js".


    Zum Doku-Teil "Reveal CSS Animations":
    Im Klaviermodul habe ich ins Feld Modulklassensuffix "wow" eingetragen; in der betreffenden Section im Template die css-Klassen "animated" und einen animation style (hier: "hinge"). Ist dies zumindest richtig?


    Viele Grüße,
    Anna

    Hi,
    innerhalb der SCSS_Datei kannst du zumindest die animate.css verlinken so das diese in deine Template .css mitkompiliert wird.
    SASS syntax:

    Code
    @import animate


    SCSS syntax:

    Code
    @import 'animate';


    Vielleicht liest du dir mal die Basics für SASS/SCSS durch: http://sass-lang.com/guide


    Zu deinem Javascript, eigentlich würde ich die Datei direkt in die template index.php einfügen. Da dies aber grad bei Joomla-Frameworks etwas ausarten kann da herimit vielen Includes gearbeitet wird würde ich dir empfehlen, vor allem wenn du die wow nur bei dem Klavier einsetzen willst, in dein Modul einzufügen.
    Je nachdem welchen Editor du verwendest musst du das Filtern von JS-Quelltext ausschalten und dann einfach im Quellcode-Modus deines Editors das JS reinschreiben.

    Zitat von mbc

    Im Klaviermodul habe ich ins Feld Modulklassensuffix "wow" eingetragen; in der betreffenden Section im Template die css-Klassen "animated" und einen animation style (hier: "hinge"). Ist dies zumindest richtig?


    Das sollte richtig sein. Musst schauen ob die Reihenfolge denen im Beispiel entspricht.


    Grüße

    Hi,


    vielen Dank!
    Ich dachte, ich hätte mit
    @import "dependencies";
    automatisch auch "animate" eingebunden. Jetzt habe ich auch
    @import "animate";
    oben ins custom.scss eingesetzt. (Dass die hier eingetragenen Sachen im css kompiliert werden, hatte ich verstanden; habe die ganzen Änderungen am Template auch so vorgenommen.)


    Ich muss mal gucken, wie das mit der von Dir beschriebenen Methode geht. Allerdings wollte ich nicht nur das Klavier animieren, sondern noch mehr.


    Mich wundert es nur, dass es doch nicht so einfach zu sein scheint wie unter mynameismatthieu.com/WOW/docs.html dargestellt. Das liest sich so, als wären es nur zwei Handgriffe. - Sind es warscheinlich auch, nur dass ich es nicht checke...


    Grüße und nochmal danke für Deine Antwort,
    Anna

    • Hilfreich

    Hi,

    Zitat von mbc

    Ich dachte, ich hätte mit
    @import "dependencies";
    automatisch auch "animate" eingebunden. Jetzt habe ich auch
    @import "animate";
    oben ins custom.scss eingesetzt. (Dass die hier eingetragenen Sachen im css kompiliert werden, hatte ich verstanden; habe die ganzen Änderungen am Template auch so vorgenommen.)


    Das müsste sich ja nachprüfen lassen indem du schaust ob eine Klasse aus der animate.css in der dependencies.css auftaucht bzw. ob die animate.css dort verlinkt ist.

    Zitat von mbc

    Allerdings wollte ich nicht nur das Klavier animieren, sondern noch mehr.


    Dann ist meine Methode eher etwas suboptimal.
    Ich hab dir heir mal ein Tutorial rausgesucht welches dein Problem allgemein lösen sollte:

    Externer Inhalt www.youtube.com
    Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.


    Grüße