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.
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
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:
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!
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 9 Jahren
© 2024 LION.Software