Changeset 29940 for main/trunk/model-sites-dev/respooled/collect

Timestamp:

2015-05-30T11:15:24+12:00 (9 years ago)

Author:

davidb

Message:

Animated drum visual

File:

• main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/document.xsl (modified) (6 diffs)

main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/transform/pages/document.xsl

@@ -1736 +1736 @@
         pointer-events: none;
       }
+
+.drum.hit {
+  animation: drumHit .15s linear infinite;
+  -webkit-animation: drumHit .15s linear infinite;
+  -moz-animation: drumHit .15s linear infinite;
+  -ms-animation: drumHit .15s linear infinite;
+  -o-animation: drumHit .15s linear infinite;
+}
+
+@keyframes: drumHit; {
+  0%   { background-size: 100%;}
+  10%  { background-size: 95%; }
+  30%  { background-size: 97%; }
+  50%  { background-size: 100%;}
+  60%  { background-size: 98%; }
+  70%  { background-size: 100%;}
+  80%  { background-size: 99%; }
+  100% { background-size: 100%;}
+}
+
+@-webkit-keyframes drumHit {
+  0%   { background-size: 100%;}
+  10%  { background-size: 105%; }
+  30%  { background-size: 103%; }
+  50%  { background-size: 100%;}
+  60%  { background-size: 102%; }
+  70%  { background-size: 100%;}
+  80%  { background-size: 101%; }
+  100% { background-size: 100%;}
+}
+
+@-moz-keyframes drumHit {
+  0%   { background-size: 100%;}
+  10%  { background-size: 105%; }
+  30%  { background-size: 103%; }
+  50%  { background-size: 100%;}
+  60%  { background-size: 102%; }
+  70%  { background-size: 100%;}
+  80%  { background-size: 101%; }
+  100% { background-size: 100%;}
+}
+
+@-o-keyframes drumHit {
+  0%   { background-size: 100%;}
+  10%  { background-size: 105%; }
+  30%  { background-size: 103%; }
+  50%  { background-size: 100%;}
+  60%  { background-size: 102%; }
+  70%  { background-size: 100%;}
+  80%  { background-size: 101%; }
+  100% { background-size: 100%;}
+}
+
+@-ms-keyframes drumHit {
+  0%   { background-size: 100%;}
+  10%  { background-size: 105%; }
+  30%  { background-size: 103%; }
+  50%  { background-size: 100%;}
+  60%  { background-size: 102%; }
+  70%  { background-size: 100%;}
+  80%  { background-size: 101%; }
+  100% { background-size: 100%;}
+}
+
+
+
     </style>
     <div id="drumkit-area" class="documenttext" style="display: none; position: absolute: left: 0px; top: 0px;">
@@ -1742 +1808 @@
           <div style="display:inline-block;">
         <div style="position: relative;">
+<!--
           <img style="position: relative;" width="148" height="148"
                src="{$httpCollection}/images/cymbal-overview.png" class="drum" id="drum1" border="0" />
+-->
+          <div style="position: relative; width: 148px; height: 148px; background-image: url({$httpCollection}/images/cymbal-overview.png); background-repeat: no-repeat; background-size: 148px 148px" class="drum" id="drum1" border="0" ><xsl:comment>drum background</xsl:comment></div>
           <div class="drumcontainer" style="color: #555555">
             <span style="white-space: nowrap;">&lt;Shift-C&gt;</span>
@@ -1751 +1820 @@
           <div style="display:inline-block;">
         <div style="position: relative;">
+<!--
           <img style="position: relative;" width="148" height="144" 
               src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum3" border="0" />
+-->
+          <div style="position: relative; width: 148px; height: 144px; background-image: url({$httpCollection}/images/drum-overview.png); background-repeat: no-repeat; background-size: 148px 144px" class="drum" id="drum3" border="0" ><xsl:comment>drum background</xsl:comment></div>
           <div class="drumcontainer" >
             <span style="white-space: nowrap;">&lt;Shift-V&gt;</span>
@@ -1760 +1832 @@
           <div style="display:inline-block;">
         <div style="position: relative;">
+<!--
           <img style="position: relative;"  width="167" height="163" 
                src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum2" border="0" />
+-->
+          <div style="position: relative; width: 167px; height: 163px; background-image: url({$httpCollection}/images/drum-overview.png); background-repeat: no-repeat; background-size: 167px 163px" class="drum" id="drum2" border="0" ><xsl:comment>drum background</xsl:comment></div>
           <div class="drumcontainer" >
             <span style="white-space: nowrap;">&lt;Shift-B&gt;</span>
@@ -1769 +1844 @@
           <div style="display:inline-block;">
         <div style="position: relative;">
+<!--
           <img style="position: relative;" width="197" height="192" 
                src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum4" border="0" />
+-->
+          <div style="position: relative; width: 197px; height: 192px; background-image: url({$httpCollection}/images/drum-overview.png); background-repeat: no-repeat; background-size: 197px 192px" class="drum" id="drum4" border="0" ><xsl:comment>drum background</xsl:comment></div>
           <div class="drumcontainer" >
             <span style="white-space: nowrap;">&lt;Shift-N&gt;</span>
@@ -1778 +1856 @@
           <div style="display:inline-block;">
         <div style="position: relative;">
+<!--
           <img style="position: relative;" width="216" height="211" 
                src="{$httpCollection}/images/drum-overview.png" class="drum" id="drum5" border="0" />
+-->
+          <div style="position: relative; width: 216px; height: 211px; background-image: url({$httpCollection}/images/drum-overview.png); background-repeat: no-repeat; background-size: 216px 211px" class="drum" id="drum5" border="0" ><xsl:comment>drum background</xsl:comment></div>
           <div class="drumcontainer" >
-           <span style="white-space: nowrap;"> &lt;Space-M&gt;</span>
+           <span style="white-space: nowrap;"> &lt;Shift-M&gt;</span>
           </div>
         </div>