Home Codes News Loox
 

Du kannst Elemente im Content- oder Werbebereich deiner Community durch Animationen ein- und ausblenden lassen oder einfach nur hervorheben.
Um Animationen nutzen zu können, musst du die LiNet-Apps installiert haben. Wenn dies der Fall ist, kannst du sofort loslegen.

Animation
Rufe den Quellcode auf, wo du Animationen hinzufügen möchtest.
Dies kann ein Werbebereich sein oder auch der Quellcode-Modus einer Box auf einer beliebigen Seite.
Systemelemente können nicht auf diese Art und Weise animiert werden.
Suche den Anfang von dem Element (z.B. <div>) und füge die Klasse animated hinzu.
Suche dazu nach class="..." und hänge animated hinten an (in den Anführungsstrichen).
Sollte kein class="..." vorhanden sein, so füge dies zwischen den spitzen Klammern, jedoch nach dem Tagnamen, ein:

<div class="example animated">
Das Element ist nun animierbar. Füge nun (ähnlich wie gerade) eine weitere Klasse hinzu - abhängig von der Animation, die du abspielen möchtest.
Einblenden
bounceIn

<div class="animated bounceIn">Beispiel</div>
bounceInUp

<div class="animated bounceInUp">Beispiel</div>
bounceInDown

<div class="animated bounceInDown">Beispiel</div>
bounceInRight

<div class="animated bounceInRight">Beispiel</div>
bounceInLeft

<div class="animated bounceInLeft">Beispiel</div>
fadeIn

<div class="animated fadeIn">Beispiel</div>
fadeInUp

<div class="animated fadeInUp">Beispiel</div>
fadeInUpBig

<div class="animated fadeInUpBig">Beispiel</div>
fadeInDown

<div class="animated fadeInDown">Beispiel</div>
fadeInDownBig

<div class="animated fadeInDownBig">Beispiel</div>
fadeInRight

<div class="animated fadeInRight">Beispiel</div>
fadeInRightBig

<div class="animated fadeInRightBig">Beispiel</div>
fadeInLeft

<div class="animated fadeInLeft">Beispiel</div>
fadeInLeftBig

<div class="animated fadeInLeftBig">Beispiel</div>
flipInX

<div class="animated flipInX">Beispiel</div>
flipInY

<div class="animated flipInY">Beispiel</div>
lightSpeedIn

<div class="animated lightSpeedIn">Beispiel</div>
rotateIn

<div class="animated rotateIn">Beispiel</div>
rotateInUpRight

<div class="animated rotateInUpRight">Beispiel</div>
rotateInUpLeft

<div class="animated rotateInUpLeft">Beispiel</div>
rotateInDownRight

<div class="animated rotateInDownRight">Beispiel</div>
rotateInDownLeft

<div class="animated rotateInDownLeft">Beispiel</div>
slideInUp

<div class="animated slideInUp">Beispiel</div>
slideInDown

<div class="animated slideInDown">Beispiel</div>
slideInRight

<div class="animated slideInRight">Beispiel</div>
slideInLeft

<div class="animated slideInLeft">Beispiel</div>
zoomIn

<div class="animated zoomIn">Beispiel</div>
zoomInUp

<div class="animated zoomInUp">Beispiel</div>
zoomInDown

<div class="animated zoomInDown">Beispiel</div>
zoomInRight

<div class="animated zoomInRight">Beispiel</div>
zoomInLeft

<div class="animated zoomInLeft">Beispiel</div>
rollIn

<div class="animated rollIn">Beispiel</div>
Ausblenden
bounceOut

<div class="animated bounceOut">Beispiel</div>
bounceOutUp

<div class="animated bounceOutUp">Beispiel</div>
bounceOutDown

<div class="animated bounceOutDown">Beispiel</div>
bounceOutRight

<div class="animated bounceOutRight">Beispiel</div>
bounceOutLeft

<div class="animated bounceOutLeft">Beispiel</div>
fadeOut

<div class="animated fadeOut">Beispiel</div>
fadeOutUp

<div class="animated fadeOutUp">Beispiel</div>
fadeOutUpBig

<div class="animated fadeOutUpBig">Beispiel</div>
fadeOutDown

<div class="animated fadeOutDown">Beispiel</div>
fadeOutDownBig

<div class="animated fadeOutDownBig">Beispiel</div>
fadeOutRight

<div class="animated fadeOutRight">Beispiel</div>
fadeOutRightBig

<div class="animated fadeOutRightBig">Beispiel</div>
fadeOutLeft

<div class="animated fadeOutLeft">Beispiel</div>
fadeOutLeftBig

<div class="animated fadeOutLeftBig">Beispiel</div>
flipOutX

<div class="animated flipOutX">Beispiel</div>
flipOutY

<div class="animated flipOutY">Beispiel</div>
lightSpeedOut

<div class="animated lightSpeedOut">Beispiel</div>
rotateOut

<div class="animated rotateOut">Beispiel</div>
rotateOutUpRight

<div class="animated rotateOutUpRight">Beispiel</div>
rotateOutUpLeft

<div class="animated rotateOutUpLeft">Beispiel</div>
rotateOutDownRight

<div class="animated rotateOutDownRight">Beispiel</div>
rotateOutDownLeft

<div class="animated rotateOutDownLeft">Beispiel</div>
slideOutUp

<div class="animated slideOutUp">Beispiel</div>
slideOutDown

<div class="animated slideOutDown">Beispiel</div>
slideOutRight

<div class="animated slideOutRight">Beispiel</div>
slideOutLeft

<div class="animated slideOutLeft">Beispiel</div>
zoomOut

<div class="animated zoomOut">Beispiel</div>
zoomOutUp

<div class="animated zoomOutUp">Beispiel</div>
zoomOutDown

<div class="animated zoomOutDown">Beispiel</div>
zoomOutRight

<div class="animated zoomOutRight">Beispiel</div>
zoomOutLeft

<div class="animated zoomOutLeft">Beispiel</div>
rollOut

<div class="animated rollOut">Beispiel</div>
hinge

<div class="animated hinge">Beispiel</div>
Hervorheben
bounce

<div class="animated bounce">Beispiel</div>
flash

<div class="animated flash">Beispiel</div>
pulse

<div class="animated pulse">Beispiel</div>
rubberBand

<div class="animated rubberBand">Beispiel</div>
shake

<div class="animated shake">Beispiel</div>
swing

<div class="animated swing">Beispiel</div>
tada

<div class="animated tada">Beispiel</div>
wobble

<div class="animated wobble">Beispiel</div>
flip

<div class="animated flip">Beispiel</div>
Schleife
Füge die Klasse infinite hinzu, um die Animation in einer Endlosschleife abzuspielen.
Bei einer Animation zum Hervorheben ist dies empfehlenswert!

<div class="animated pulse infinite">Beispiel</div>
Demo
Alle Animationen kannst du hier anschauen: Zur Demo
Vor 3 Jahren
 
Elemente animieren