1#Layer Animation - animated DokuWiki content
2
3
4The Layer Animation plugin displays your DokuWiki content in an animated series of layers. It supports the plugins you have installed in your DokuWiki. The series of layers has items inside - which are a kind of layers too - that float into the viewport one after the other.
5
6You can hover the animation with the mouse to pause it. Leaving the animated area will resume the anmation. You can also click the pause/play button at the lower left the pause and resume the current animation.
7
8Pausing the animation causes the current layer to end its animation (if still in progress) and then stop until you resume it. The buttons always show the current state.
9
10The lower left also shows a button for each layer. Clicking the button skips to the layer and pauses the animation. Clicking the button again will resume the animation after a timeout of two seconds.
11
12##Syntax
13
14```
15<animation %HEIGHT% [%CLASS%]>
16    <layer %OPTION% [%CLASS%]>
17        <item %OPTION%[?%CLIP%]>
18            This is all **DokuWiki [[Content]]**
19            You can even use other plugins and images.
20        </item>
21
22        <item>
23            ...
24        </item>
25    </layer>
26
27    <layer>
28        ...
29    </layer>
30</animation>
31```
32
33###Options
34
35
36There are basically three things that can be defined using the options place holders ``%HEIGHT%``, ``%CLASS%``, ``%OPTION%`` and ``%CLIP%`` from above.
37
38  * ``%HEIGHT%`` - is a number determining the height of the overall animation in pixels. The width of the animation cannot be set - it is always 100% of the available width. If you want that otherwise, you can define the following in your template stylesheet: ``#layeranimation {width: 50%;}``
39  * ``%CLASS%`` (optional) - the name of a class in your template
40  * ``%OPTION%`` - there is one special keyword you can use here (see below). Besides the keyword you can put any CSS class name into this place to make the animation look more like you need it (e.g. colors, floating of images, text direction ... )
41    * Keyword **fixed** in **layer** - this can only be used in the first layer and will make it a static background layer.
42    * Keyword **right** in **item** - using this keyword in an item will animate it from left to right instead of right to left.
43  * ``%CLIP%`` (optional) - if you use several items with links in the same layer, you will not be able to click the links on the lower items. This is due to HTML Container positioned above. Using the optional clipping you can set the viewport of an item (the CSS attribute "clip" will be used). You have to define four values  - numbers or "auto" - for ``top,right,bottom,left``, e.g: <item ?auto,100,100,auto> - the example will add a clip to the lower left.
44
45## Template
46
47Template authors can trigger the activation and deactivation of the plugins functionality with a custom event that can be triggered like the following example:
48
49```
50jQuery(function(){
51
52    var layerAnimationMediaTrigger = function(){
53        $('div.layeranimation').trigger('layeranimation.activate', [ $(this).hasClass('desktop') ] );
54    };
55
56    window.setTimeout(function(){
57        $('.no.mediasize.mobile:visible,.no.mediasize.midsize:visible,.no.mediasize.desktop:visible')
58        .livequery(layerAnimationMediaTrigger).each(layerAnimationMediaTrigger);
59        }, 0);
60    });
61});
62```
63
64The requirements in this case are: three ``<div>`` elements with respective classes and styles that make the appear and disappear depending on the screen size. Furthermore it requires the [livequery plugin](http://docs.jquery.com/Plugins/livequery).
65
66The effect would be, that the layeranimation plugin is enabled only for the desktop screen size.
67