Animation in einem Beitrag

    Hallo, ich habe mir diese kostenlose Extension installiert: Animate It


    Auf der Demoseite des Entwicklers gibt es eine Animation mit der Überschrift "SHOW OFF YOUR AWESOME WORK".


    Hierbei fliegt der Text von links und die Grafik vomrechts auf gleicher Höhe ein.


    Den html-Code hierzu habe ich mir zum Testen kopiert. Er sieht bei mir wie folgt aus:


    Allerdings erscheint bei mir die Grafik nicht auf gleicher Höhe, sondern unterhalb des Textes:


    http://test.mcv-moemlingen.net/index.php/test-ani


    Was muss ich denn ändern, um den gleichen Effect zu erzielen, wie auf der oben erwähnten Demo-Seite?

    Kann ich die Position der Grafik auch noch vertikal verändern?


    Ich denke es hat etwas mit Grids zu tun, nur weiß ich nicht genau, wie ich diese einfügen kann.


    Vielleicht kann mir hier jemand weiterhelfen.


    L.G.

    Kurt

    In deinem Code ist keinerlei Aminmation. Die Animation kommt nur und ausschließlich vom CSS. Die ist auch keine Hexerei, sondern mittels CSS3 für jeden und vor allem auch ohne Erweiterung, nachbaubar.

    Hier ein paar Links zu dem Thema. Da sind auch Generatoren bei, die dir den notwendigen CSS-Code generieren.

    Da ich nicht weiß, was deine Animation machen soll, musst da schon selber nachschauen.


    Bei allem was du tust, bedenke aber, dass zuviel Bewegung nicht gesund ist auf einer Website. Animation muss und sollte sparsam und sehr bewusst eingesetzt werden. Das nur als Tipp.


    Ab hier und dann weiter im Menü rechts:

    https://www.mediaevent.de/css/transform.html


    https://www.html-seminar.de/css3-transform-rotate.htm


    Was sind Keyframes:

    http://pepe-juergens.de/2013/02/css3-keyframe-animation/

    Und ein Generator dazu:

    http://cssanimate.com/


    Linksammlung:

    https://www.time4joomla.de/seblod-links-html-co.html



    Axel

    Hallo Axel,


    danke für Deine Antwort.


    Mir ist bewusst, dass die Animation nicht vom HTML-Code kommt, sondern dass ich dort nur angebe was animiert werden soll.

    Mir ist auch bewusst, dass die Erweiterung lediglich CSS Code nutzt und man dies auch selber machen kann, soweit man sich intensiv mit der Materie befasst.

    Da mir zurzeit hierfür die Zeit fehlt, habe ich auf diese Erweiterung zurück gegriffen und damit funktioniert die Animation auch.


    Mein Problem ist, dass ich die eigentlich 2 verschiedenen Animationen nebeneinander darstellen muss, damit es wirkt.


    Ich habe mittlerweile herausgefunden, dass es in meinem Template eine Möglichkeit gibt mehrere Spalten in einem Beitrag einzurichten.


    Hierzu ist lediglich ein

    Code
    <div class="col-2">

    notwendig. Damit sind aber die beiden Spalten gleich groß. ich wollte aber dass die linke Spalte 2/3 und die rechte Spalte 1/3 des Beitrags einnimmt.

    Auch mein Text ist vertikal nicht mittig sondern klebt am unteren Rad bzw. geht über den unteren Rand des Beitrags hinaus.


    Siehe hier: http://test.mcv-moemlingen.net/index.php/test-ani


    Hierzu also noch einmal meine Frage, wie kann ich dies ändern?


    Vielen lieben Dank


    Kurt

    Ich habe das jetzt mit dem in bootstrap integrierten Gridsystem hinbekommen:


    Code
    <div class="row-fluid">
      <div class="span8">Level 2</div>
      <div class="span4">Level 2</div>
    </div>


    Jetzt muss ich nur mal schauen, wie ich den Text vertikal zentrieren kann...