CSS-Animations (Collection) 1.0.6

License Agreement
License terms for non-commercial products
Website
https://destinaja.de
Supported Versions
Burning Board 4.0 / WCF 2.0
Burning Board 4.1 / WCF 2.1

Collection of CSS-Animations

This Plugin extent the WoltLab Community Framework 2 with animations.


The following animations are already integrated:

  • .AnimationHoverRotateRight
  • .AnimationHoverRotateLeft
  • .AnimationHoverQuake
  • .AnimationHoverScaleDown
  • .AnimationHoverScaleUp
  • .AnimationBounce
  • .AnimationFlash
  • .AnimationPulse
  • .AnimationRing
  • .AnimationShake


to the demo


To give an element an animation, you can:


- give an element the desired class with Javascript.
- customize a template
- call the animation via CSS/less


Javascript-example:

Code
<script>
var element = document.getElementById("gewünschte ID des Elements");
element.classList.add("gewünschte Klasse");
</script>


Further informations:
pluginstore.woltlab.com/file/1494/
http://molily.de/js/css.html#addclass
http://www.html-seminar.de/jav…html-elemente-aendern.htm


Call the animation in the style-settings:


- Example with the animation Pulse

CSS
"the desired element" {
.AnimationPulse;
}


- Example of use for the conversation-icon with the animation Pulse when you get a message

CSS
#unreadConversations:not([data-count="0"]) > a > span.icon {
.AnimationPulse;
}


further informations:
http://www.mediaevent.de/css/animation.html
http://www.lesscss.de/


Support requests will only be answered in the support area of my website Destinaja.de. Please start your requests there. Thanks.

  • Version 1.0.6

  • Version 1.0.5

    -fix a problem with AnimationPulse for Browser Opera, Firefox and Internet Explorer
    -add Hover Animation RotateRight (class ".AnimationHoverRotateRight")
    -add Hover Animation RotateLeft (class ".AnimationHoverRotateLeft")

  • Version 1.0.4

    -add Hover Animation Quake (class ".AnimationHoverQuake")
    -add Hover Animation ScaleUp (class ".AnimationHoverScaleUp")
    -add Hover Animation ScaleDown (class ".AnimationHoverScaleDown")

  • Version 1.0.3

    -add Animation Bounce (class ".AnimationBounce")
    -add Animation Flash (class ".AnimationFlash")
    -add Animation Glow (class ".AnimationGlow")(you need to set the colors with the variables "@wcfAnimationGlowSchadowColor" and "@wcfAnimationGlowSchadowGlowColor" before.)


    Because of the reducing from x LESS-files to only one LESS-file, you need to reinstall this plugin

  • Version 1.0.1

    initial release


    -Animation Pulse (class ".AnimationPulse")
    -Animation Ring (class ".AnimationRing")
    -Animation Shake (class ".AnimationShake")
    -Animation Tata (class ".AnimationTata")

  • Hey @ all,
    der Umbau meiner Webseite https://destinaja.de/ ist abgeschlossen. Um die Rückverfolgung zu gewährleisten werden Supportanfragen nur noch im Supportbereich meiner Webseite beantwortet. Bitte startet die Anfragen von nun an dort. Vielen Dank.


    Hey @ all,
    the reconstruction of my website https://destinaja.de/ is finished. To ensure the traceability, all support requests from now, will only be answered in the support area of my website. Please start your requests there. Thanks.

  • Mir ist aufgefallen dass .AnimationPulse in Chrome richtig dargestellt wird und in Firefox IE anders? da muss doch irgendwas nicht funzen?

    • Danke dir, ich schau`s mir an

    • Vielen dank :) wäre nett wenn du mir nachher bescheid geben könntest. Thx


      EDIT: Auch in deinem DEMO-Forum ist es verkehrt: http://destinaja.de/index.php/plugins/css-animationen/


      Liegt wohl irgendwo ein Fehler in der Darstellung von anderen Browsern,Chrome funktioniert jedenfalls richtig.

    • Hi, danke das du so aufmerksam bist. Fehler ist korrigiert. Die neue Version 1.0.5 ist im Woltlab Store zur Freischaltung eingestellt und auf meiner Seite unter Download ab jetzt zu finden

  • Do you by any chance have a demo or a site where this was implemented? I'm very curious how it will look.

  • Erstelle doch auch eine Less mit Funktion so das man .pulse(variable) verwendet statt 3 Zeilen zu kopieren ?

    Like 1
    • Schaue ich mir an und setze ich in der nächsten Version (ende Januar)um.