Presenter

@@adsense

Developed with advice

Metro UI CSS developed with the advice of Microsoft to build the user interface and include: general styles, grid, layouts, typography, 20+ components, 300+ built-in icons.

Metro UI CSS build with {LESS}. Metro UI CSS is open source and has MIT licensing model.

BizSpark Startup

Metro UI CSS is a BizSpark Startup. Microsoft BizSpark is a global program that helps software startups succeed by giving them access to software development tools, connecting them with key industry players, and providing marketing visibility.

BizSpark provides free software, support, and visibility to help startups succeed. Join BizSpark and become part of a global community that has over 50,000 members in 100+ countries.

Join the BizSpark Program now

Thanks to JetBrains

Thanks to the company JetBrains for supporting the project in the form of a license for a great product PhpStorm.

Get PhpStorm now! 

                <div class="presenter" data-role="presenter">
                    <div class="scene">
                        <div class="act">
                            <element class="actor"></element>
                            ...
                            <element class="actor"></element>
                        </div>
                        ...
                        <div class="act">
                            <element class="actor"></element>
                            ...
                            <element class="actor"></element>
                        </div>
                    </div>
                </div>

Important! All actors must be have data-position attribute with top and left position, separated by comma. 


                <div class="actor" data-position="10,20">...</div>

Presenter Options

Parameter Data-* Type Default value Description
height data-height int 200 Presenter height
width data-width int or string 100% Presenter width
effect data-effect string random Global effect for actors, can be random, top, bottom, left, right
duration data-duration int 1000 Global actor effect duration (msec)
timeout data-timeout int 2000 Global timeout before actor effect (msec)
sceneTimeout data-scene-timeout int 2000 Timeout before scene is closed
easing data-easing string swing Easing function for effect

Actor Options

Parameter Data-* Type Default value Description
effect data-effect string undefined Global effect for actors, can be random, top, bottom, left, right
duration data-duration int undefined Global actor effect duration (msec)
timeout data-timeout int undefined Global timeout before actor effect (msec)
easing data-easing string undefined Easing function for effect

For easing functions look this page