Presentacular adds script.aculo.us visual effects to slide shows created with S5. It has the same advantages than S5 for creating slide shows: printer-friendly version, simple and semantic markup and portable across the most modern browsers.
First of all you’ll have to create an S5 slide show. If you are new to S5, A Basic Primer in Using S5 can be useful to you.
Next, you’ll have to include Presentacular javascript libraries and its dependencies (Prototype and scriptaculous) in your slide show. This is done by adding the following lines:
<script src="prototype/prototype.js" type="text/javascript"></script>
<script src="scriptaculous/scriptaculous.js" type="text/javascript"></script>
<script src="presentacular.js" type="text/javascript"></script>
Adding effects is easy, you only have to add some extra CSS classes to the slides items. You don’t have to worry (if you don’t want to) about the Javascript code to include the effects, Presentacular does it for you. For example, to add the pulsate effect to a title, in order to fade it in and out five times, you only have to add the pulsate class:
<h2 class="pulsate">Adding effects is easy</h2>The effect duration is also controlled with CSS classes, using extra arguments. You have to append an underscore _ to the effect name followed by the effect duration in seconds. For example, this code will shake during 2 seconds:
<p class="shake_2">Control the effect duration</p>You can add effects to lists that are incrementally displayed:
<ul class="incremental appear_0.5">
<li>Adding effects</li>
<li>to incrementally displayed</li>
<li>lists</li>
</ul>
The following are the available effects. You can use them as the names of the CSS classes
Presentacular is still in beta. Your comments, bug reports an ideas are welcomed. Send me an e-mail to or leave your comment in my blog.
Presentacular is distributed under GNU General Public License.