JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<script src="https://raw.github.com/MikeMcTiernan/Janis/master/janis.js"></script>
<div id="flexSky"><input type="button" id="button" value="Hier klicken!"><span>Hier steht ein toller Text!</span><canvas></canvas></div>

CSS

#flexSky, canvas{width:160px;height:600px;border-radius: 20px}
#flexSky {position:relative}
#flexSky span {
    -webkit-animation-name: marquee;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration:10s;
    -webkit-animation-iteration-count: infinite;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: block;
    white-space: nowrap;
}
#button {position:absolute;top:446px;left:60px}
#button {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 14px;
   font-family: Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   }
#button:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
#button:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }

JavaScript

(function(w, d) {

    Janis('#button').chain().animate({
        'rotate': '359deg',
        'duration': 5000,
        'delay': 0,
        'easing': 'linear'
    }).animate({
        'rotate': '0deg',
        'delay': 0,
        'duration': 0
    }).loop();
    
    var canvas = d.querySelectorAll('#flexSky canvas'),
        graphics;

    if (canvas[0].getContext) {
        graphics = canvas[0].getContext('2d');
    }

    (function draw() {
        var theme = ["#004488", "#0066aa", "#0088cc", "#00aaee", "#00ccff"],
            font = ["Arial", "Papyrus", "Baskerville"],
            x = Math.random() * 600,
            y = Math.random() * 150,
            size = (Math.random() * 50) + 10;

        graphics.font = size + "px '" + font[(Math.random() * 5 >> 0)] + "'";
        if (Math.random() > .5) {
            graphics.fillStyle = theme[(Math.random() * 5 >> 0)];
            graphics.fillText("Aidu", x, y);
        } else {
            graphics.strokeStyle = theme[(Math.random() * 5 >> 0)];
            graphics.strokeText("Aidu", x, y);
        }


        t = setTimeout(draw, 950);
    })();
})(window, document);