Mercurialhg/bck2brwsr / file revision
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | raw | help
ko/archetype/src/main/resources/archetype-resources/src/main/webapp/pages/index.html
author Jaroslav Tulach <jaroslav.tulach@apidesign.org>
Thu, 26 Sep 2013 19:39:14 +0200
changeset 1300 ee3fba561fd8
parent 1273 37ad459579bc
permissions -rw-r--r--
Make the animations work on firefox and other non-webkit browsers 
     1 <!DOCTYPE html>

     2 <html>

     3     <head>

     4         <title></title>

     5         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

     6 

     7         <style type="text/css">

     8             @-webkit-keyframes spin {

     9                 0% { -webkit-transform: rotate(0deg); }

    10                 100% { -webkit-transform: rotate(360deg); }

    11             }

    12             @keyframes spin {

    13                 0% { transform: rotate(0deg); }

    14                 100% { transform: rotate(360deg); }

    15             }

    16 

    17             .rotate {

    18                 -webkit-animation-name: spin;

    19                 -webkit-animation-duration: 3s;

    20                 -webkit-animation-iteration-count: infinite;

    21                 -webkit-animation-direction: alternate;

    22                 

    23                 animation-name: spin;

    24                 animation-duration: 3s;

    25                 animation-iteration-count: infinite;

    26                 animation-direction: alternate;

    27             }

    28 

    29             #scene {

    30                 position: relative;

    31                 top: 60px;

    32                 text-align: center;

    33             }

    34             

    35             #words span {

    36                 border: 1px solid #ccc;

    37                 background: rgba(255,255,155,0.8);

    38                 text-align: center;

    39                 font-size: 30px;                

    40                 -webkit-box-shadow: inset 0 0 40px rgba(0,0,0,0.4);

    41                 position: absolute;

    42             }

    43 

    44             #words span:nth-child(1) { left: 45%; top: 0px; }

    45             #words span:nth-child(2) { left: 25%; top: 100px; }

    46             #words span:nth-child(3) { left: 65%; top: 100px; }

    47             #words span:nth-child(4) { left: 10%; top: 200px; }

    48             #words span:nth-child(5) { left: 45%; top: 200px; }

    49             #words span:nth-child(6) { left: 80%; top: 200px; }

    50             

    51         </style>

    52 

    53     </head>

    54     <body>

    55         <h1>Words Demo</h1>

    56         <input data-bind="value: message, valueUpdate: 'afterkeydown'" size="80">

    57         <br>

    58         <button data-bind="enable: !on(), click: $root.turnOn">Start</button>

    59         <button data-bind="enable: on, click: $root.turnOff">Stop</button>

    60 

    61         <div id="scene">

    62             <span id="words" data-bind="foreach: words">

    63                 <span data-bind="text: $data, css: { 'rotate' : $root.on } "></span>

    64             </span>

    65         </div>

    66         <script type="text/javascript" src="bck2brwsr.js"></script>

    67         <script>

    68             var vm = bck2brwsr('${project.build.finalName}.jar');

    69             vm.loadClass('${package}.Main');

    70         </script>

    71     </body>

    72 </html>
hg/bck2brwsr