Working and clean-up 'on-slide' specification.

[hacks/simpleWebSlides.git] / doc / demo.xhtml
diff --git a/doc/demo.xhtml b/doc/demo.xhtml

index e64a846..c0e4c16 100644 (file)
--- a/doc/demo.xhtml
+++ b/doc/demo.xhtml
@@ -6,7 +6,8 @@
    <head>
      <title>SimpleWebSlides</title>
  
-    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
+    <meta http-equiv="Content-Type"
+          content="text/html; charset=utf-8" />
      <meta name="copyright"
            content="Copyright &#169; 2013 Kim Nguyễn" />
  
@@ -22,30 +23,38 @@
  
      <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
      <script src="../simpleWebSlides.js" type="text/javascript" ></script>
+    <!-- Customize some templates and initialize -->
      <script type="text/javascript">
+/*
+      SWS.Presentation.setTemplate('sws-slide-change',
+      SWS.Effects.slideChangeVerticalSlide);
+      SWS.Presentation.setTemplate('sws-slide-change',
+      SWS.Effects.slideChangeHorizontalSlide);
+      SWS.Presentation.setTemplate('sws-slide-change',
+      SWS.Effects.slideChangeFadeOutIn);
+*/
+      SWS.Presentation.setTemplate('sws-slide-change',
+      SWS.Effects.slideChangeHorizontalFlip);
  
-      SWS.Presentation.setTemplate('sws-template-slide-deactivate', function (o, k) {
-      o.animate({ 'opacity': 0, 'top':'-50%'},350, function () { k(o)});
-      });
-
-      SWS.Presentation.setTemplate('sws-template-slide-activate', function (o, k) {
-      o.animate({ 'opacity': '1.0', 'top':'0pt'}, function () { k(o) });
-      });
-
-      SWS.Presentation.setTemplate('sws-template-frame-deactivate', function (o, k) {
-      o.fadeOut(250, function () { k(o)});
-      });
-
-      SWS.Presentation.setTemplate('sws-template-frame-activate', function (o, k) {
-      o.fadeIn(250, function () { k(o) });
-      });
-
+      SWS.Presentation.setTemplate('sws-object-deactivate',
+      SWS.Effects.objectDeactivateFadeOut);
  
+      SWS.Presentation.setTemplate('sws-object-activate',
+      SWS.Effects.objectActivateFadeIn);
  
  
        SWS.Presentation.init();
  
      </script>
+    <style type="text/css">
+      #css {
+      display:inline-block;
+      font-size: larger;
+      font-weight: bolder;
+      -webkit-transform: rotate(-20deg);
+      -moz-transform: rotate(-20deg);
+      }
+    </style>
    </head>
    <body>
  
@@ -68,18 +77,36 @@
        you to build funky presentations:
        <ul>
          <li class="sws-pause" >Write your presentations in (X)HTML5!</li>
-        <li class="sws-pause" >Theme to your <span style='font-size:larger'>❤</span>'s content with <em>CSS</em>!</li>
-        <li  id="foo" class="sws-pause" >Create animations using Javascript &amp; jQuery!</li>
+        <li class="sws-pause" >Theme to
+        your <span style='font-size:larger'>❤</span>'s content
+        with <em id="css">C S S</em>!</li>
+        <li class="sws-pause" >Create animations using Javascript &amp; jQuery!</li>
+        <li class="sws-onslide-1_3_5_7">(I'm here every other frame)</li>
+      </ul>
          <script type="text/javascript">
-          SWS.Presentation.registerCustom(3, function (canvas) {
-
+          var zoom_title = function (canvas) {
            var h1 = canvas.find("h1");
            var old_size = h1.css('font-size');
-          h1.animate({"font-size":"100pt" }, 300)
+          h1.animate({"font-size":"80pt" }, 300)
            .animate({"font-size":old_size }, 300);
-          });
+          };
+          SWS.Presentation.registerCallback(3, zoom_title);
          </script>
+    </div>
+
+    <div class="sws-slide">
+      <h1>What's wrong with Beamer/LateX/Tikz?</h1>
+      <ul>
+        <li class="sws-pause">Does not easily support smooth
+        animations</li>
+        <li class="sws-pause">Hard to program/script </li>
+        <li class="sws-pause">Using modern fonts and UTF-8 is a nightmare</li>
+        <li class="sws-pause">Slow compilation times</li>
+        <li class="sws-pause">Difficult to integrate several media
+          (videos, vector graphics, sounds,…)
+        </li>
        </ul>
+
      </div>
  
    </body>