Okazari/Rythm.js

View on GitHub
index.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Rythm.js</title>
    <link rel="stylesheet" href="./demo/rythm.css" media="screen" title="no title" charset="utf-8">
  </head>
  <body>
    <div class="container">
      <h1 class="shake3">
        Rythm.js - v2.2.5
      </h1>
      <h2>
        A javascript library that makes your page dance.
      </h2>
      <div id="quote">
        <div class="quote-title">Random quote about Rythm.js</div>
        <div id="quote-text">
        </div>
        <div id="quote-author">
        </div>
      </div>
      <div id='player'>
        <button id='start'>Start Demo</button>
        <button id='stop'>Stop Demo</button>
        <button id='mic'>Use Microphone</button>
      </div>
      <div>
        <a class="twist3" href="https://github.com/Okazari/Rythm.js">View on github</a>
        <a class="twist1" href="https://github.com/Okazari/Rythm.js/releases">Release notes</a>
      </div>
      <h1>
        Basic usage
      </h1>
      <section>
        <div class="demo">
          <div class="rythm rythm-bass">♫</div>
          <pre class="prettyprint">
            use css class 'rythm-bass'
          </pre>
        </div>
        <div class="demo">
          <div class="rythm rythm-medium">♫</div>
          <pre class="prettyprint">
            use css class 'rythm-medium'
          </pre>
        </div>
        <div class="demo">
          <div class="rythm rythm-high">♫</div>
          <pre class="prettyprint">
            use css class 'rythm-high'
          </pre>
        </div>
      </section>
      <h1>
        Added in v2.2.5
      </h1>
      <section>
        <h3>
          Tilt
        </h3>
        <div class="demo">
          <div class="rythm tilt1">♫</div>
          <pre class="prettyprint">
            rythm.addRythm('tilt1', 'tilt', 0, 10)
          </pre>
        </div>
        <div class="demo">
          <div class="rythm tilt2">♫</div>
          <pre class="prettyprint">
            rythm.addRythm('tilt2', 'tilt', 0, 10, {
              reverse : true
            })
          </pre>
        </div>
      </section>
      <section>
        <h3>
          Font-color
        </h3>
        <div class="demo">
          <div class="rythm font fontColor1">
            <div class="font__placeholder"></div>Font-color !
          </div>
          <pre class="prettyprint">
            rythm.addRythm('fontColor1', 'color', 0, 10)
          </pre>
        </div>
        <div class="demo">
          <div class="rythm font fontColor2">
            <div class="font__placeholder"></div>Font-color !
          </div>
          <pre class="prettyprint">
            rythm.addRythm('fontColor2', 'color', 0, 10, {
              from: [0,0,255],
              to:[255,0,255]
            })
          </pre>
        </div>
      </section>
      <h1>
        Added in v2.2.4
      </h1>
      <section>
        <h3>
          Font-size
        </h3>
        <div class="demo">
          <div class="rythm font fontSize1">
            <div class="font__placeholder"></div>Font-dance !
          </div>
          <pre class="prettyprint">
            rythm.addRythm('fontSize1', 'fontSize', 0, 2)
          </pre>
        </div>
        <div class="demo">
          <div class="rythm font fontSize2">
              <div class="font__placeholder"></div>Font-dance !
          </div>
          <pre class="prettyprint">
            rythm.addRythm('fontSize', 'fontSize', 0, 2, {
              min: 0.5,
              max: 2
            })
          </pre>
        </div>
      </section>
      <h1>
        Added in v2.2.3
      </h1>
      <section>
        <h3>
          Border-Width
        </h3>
        <div class="demo">
          <div class="rythm">
            <div class="borderWidth1"></div>
          </div>
          <pre class="prettyprint">
                  rythm.addRythm('borderWidth1', 'borderWidth', 0, 2)
                </pre>
        </div>
        <div class="demo">
          <div class="rythm">
            <div class="borderWidth2"></div>
          </div>
          <pre class="prettyprint">
            rythm.addRythm('borderWidth2', 'borderWidth', 0, 2, {
              min: 2,
              max: 10
            })
          </pre>
        </div>
      </section>
      <h1>
        Added in v2.2.2
      </h1>
      <section>
        <h3>
          Neon
        </h3>
        <div class="demo">
          <div class="rythm neon1"></div>
          <pre class="prettyprint">
            rythm.addRythm('neon1', 'neon', 0, 10)
          </pre>
        </div>
        <div class="demo">
          <div class="rythm neon2"></div>
          <pre class="prettyprint">
            rythm.addRythm('neon2', 'neon', 0, 10, {
              from: [0,0,255],
              to:[255,0,255]
            })
          </pre>
        </div>
        <div class="demo">
          <div class="rythm neon3"></div>
          <pre class="prettyprint">
            rythm.addRythm('neon3', 'neon', 0, 10, {
              from: [255,255,0],
              to:[255,0,0]
            })</pre>
        </div>
      </section>
      <section>
        <h3>
          Border-Color
        </h3>
        <div class="demo">
          <div class="rythm borderColor1"></div>
          <pre class="prettyprint">
            rythm.addRythm('borderColor1', 'borderColor', 0, 10)
          </pre>
        </div>
        <div class="demo">
          <div class="rythm borderColor2"></div>
          <pre class="prettyprint">
            rythm.addRythm('borderColor2', 'borderColor', 0, 10, {
              from: [0,0,255],
              to:[255,0,255]
            })
          </pre>
        </div>
        <div class="demo">
          <div class="rythm borderColor3"></div>
          <pre class="prettyprint">
            rythm.addRythm('borderColor3', 'color', 0, 10, {
              from: [255,255,0],
              to:[255,0,0]
            })
          </pre>
        </div>
      </section>
      <section>
        <h3>
          Kern
        </h3>
        <div class="demo">
          <div class="rythm font kern1">𐇑🕪 rythm.js</div>
          <pre class="prettyprint">
            rythm.addRythm('kern1', 'kern', 0, 10 , {
              min: -5,
              max: 5
            })
          </pre>
        </div>
        <div class="demo">
          <div class="rythm font kern2">𐇑🕪 rythm.js</div>
          <pre class="prettyprint">
            rythm.addRythm('kern2', 'kern', 0, 10 , {
              min: -5,
              max: 5,
              reverse: true,
            })
          </pre>
        </div>
      </section>
      <h1>
        Added in v2.2.1
      </h1>
      <section>
        <h3>
          Blur
        </h3>
        <div class="demo">
          <div class="rythm blur1">♫</div>
          <pre class="prettyprint">
            rythm.addRythm('blur1', 'blur', 0, 10)
          </pre>
        </div>
        <div class="demo">
          <div class="rythm blur2">♫</div>
          <pre class="prettyprint">
            rythm.addRythm('blur2', 'blur', 0, 10, {
              reverse: true
            })
          </pre>
        </div>
        <div class="demo">
          <div class="rythm blur3">♫</div>
          <pre class="prettyprint">
            rythm.addRythm('blur3', 'color', 0, 10, {
              max: 16
            })</pre>
        </div>
      </section>
      <section>
        <h3>
          Swing
        </h3>
        <div class="demo">
          <div class="rythm swing1">♫</div>
          <pre class="prettyprint">
            rythm.addRythm('swing1', 'swing', 0, 10)
          </pre>
        </div>
        <div class="demo">
          <div class="rythm swing2">♫</div>
          <pre class="prettyprint">
            rythm.addRythm('swing2', 'swing', 0, 10, {
              curve: 'up',
            })
          </pre>
        </div>
        <div class="demo">
          <div class="rythm swing3">♫</div>
          <pre class="prettyprint">
            rythm.addRythm('swing3', 'swing', 0, 10, {
              direction: 'left',
            })
          </pre>
        </div>
        <div class="demo">
          <div class="rythm swing4">♫</div>
          <pre class="prettyprint">
            rythm.addRythm('swing4', 'swing', 0, 10, {
              radius: 10,
            })
          </pre>
        </div>
      </section>
      <h1>
        Added in v2.2.0
      </h1>
      <section>
        <h3>Border-Radius</h3>
        <div class="demo">
          <div class="rythm radius1"></div>
          <pre class="prettyprint">
            rythm.addRythm('radius1', 'radius', 0, 10, {
              min: 0,
              max: 30
            })
          </pre>
        </div>
        <div class="demo">
          <div class="rythm radius2"></div>
          <pre class="prettyprint">
            rythm.addRythm('radius1', 'radius', 0, 10, {
              reverse: true,
              min: 0,
              max: 30
            })
          </pre>
        </div>
      </section>
      <h1>
        Added in v2.0.0
      </h1>
      <section>
        <h3>
          Pulse
        </h3>
        <div class="demo">
          <div class="rythm pulse1">♫</div>
          <pre class="prettyprint">
            rythm.addRythm('pulse1', 'pulse', 0, 10)
          </pre>
        </div>
        <div class="demo">
          <div class="rythm pulse2">♫</div>
          <pre class="prettyprint">
            rythm.addRythm('pulse2', 'pulse', 0, 10, {
              min: 0.1,
              max: 1
            })
          </pre>
        </div>
        <div class="demo">
          <div class="rythm pulse3">♫</div>
          <pre class="prettyprint">
            rythm.addRythm('pulse3', 'pulse', 0, 10, {
              min: 1,
              max: 1.75
            })
          </pre>
        </div>
      </section>
      <section>
        <h3>
          Jump
        </h3>
        <div class="demo">
          <div class="rythm jump1">♫</div>
          <pre class="prettyprint">
            rythm.addRythm('jump1', 'jump', 0, 10)
          </pre>
        </div>
        <div class="demo">
          <div class="rythm jump2">♫</div>
          <pre class="prettyprint">
            rythm.addRythm('jump2', 'jump', 150, 40, {
              min: -20,
              max: 20
            })
          </pre>
        </div>
      </section>
      <section>
        <h3>
          Shake
        </h3>
        <div class="demo">
          <div class="rythm shake1">♫</div>
          <pre class="prettyprint">
            rythm.addRythm('shake1', 'shake', 0, 10)
          </pre>
        </div>
        <div class="demo">
          <div class="rythm shake2">♫</div>
          <pre class="prettyprint">
            rythm.addRythm('shake2', 'shake', 150, 40, {
              min: 0,
              max: 20
            })
          </pre>
        </div>
        <div class="demo">
          <div class="rythm shake3">♫</div>
          <pre class="prettyprint">
            rythm.addRythm('shake3', 'shake', 0, 10, {
              direction: 'left'
            })
          </pre>
        </div>
      </section>
      <section>
        <h3>
          Twist
        </h3>
        <div class="demo">
          <div class="rythm twist1">♫</div>
          <pre class="prettyprint">
            rythm.addRythm('twist1', 'twist', 0, 10)
          </pre>
        </div>
        <div class="demo">
          <div class="rythm twist2">♫</div>
          <pre class="prettyprint">
            rythm.addRythm('twist2', 'twist', 0, 10, {
              min: 20,
              max: 180
            })
          </pre>
        </div>
        <div class="demo">
          <div class="rythm twist3">♫</div>
          <pre class="prettyprint">
            rythm.addRythm('twist3', 'twist', 0, 10, {
              direction: 'left'
            })
          </pre>
        </div>
      </section>
      <section>
        <h3>
          Vanish
        </h3>
        <div class="demo">
          <div class="rythm vanish vanish1">♫</div>
          <pre class="prettyprint">
            rythm.addRythm('vanish1', 'vanish', 0, 10)
          </pre>
        </div>
        <div class="demo">
          <div class="rythm vanish vanish2">♫</div>
          <pre class="prettyprint">
            rythm.addRythm('vanish2', 'vanish', 0, 10, {
              reverse: true
            })
          </pre>
        </div>
      </section>
      <section>
        <h3>
          Background-Color
        </h3>
        <div class="demo">
          <div class="rythm color1"></div>
          <pre class="prettyprint">
            rythm.addRythm('color1', 'color', 0, 10)
          </pre>
        </div>
        <div class="demo">
          <div class="rythm color2"></div>
          <pre class="prettyprint">
            rythm.addRythm('color2', 'color', 0, 10, {
              from: [0,0,255],
              to:[255,0,255]
            })
          </pre>
        </div>
        <div class="demo">
          <div class="rythm color3"></div>
          <pre class="prettyprint">
            rythm.addRythm('color3', 'color', 0, 10, {
              from: [255,255,0],
              to:[255,0,0]
            })</pre>
        </div>
      </section>
      <div id='playerBottom'>
          <button id='startBottom'>Start Demo</button>
          <button id='stopBottom'>Stop Demo</button>
          <button id='micBottom'>Use Microphone</button>
        </div>
      <div>
      <div id="shout" class="shout">
      </div>
    </div>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/scrollingelement@1.5.2/scrollingelement.min.js"></script>
    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
    <script type="text/javascript">
      const quotes = [
        { text: "I hope you're collecting what people song into the microphone. My wife just laid down a pretty sweet riff.", author: "jk3us" },
        { text: "I think there's a bug, it also makes me dance.", author: "moogeekfull-stack" },
        { text: "Where was this when I was making Geocities pages!?", author: "shabibbles" },
        { text: "It's fun for a demo. But if I ever find it used on a web page I visit, I shall track the owner down and place them in isolation for life.", author: "crispinb" },
        { text: "Jesus christ it's 1994 again", author: "WeaponizedMath" },
        { text: "I don't know what it is but I like it!!!", author: "blairanderson" },
        { text: "Turned on microphone, started finger drumming on laptop. This was more fun than I expected it to be.", author: "harel" },
        { text: "This will be everywhere on April Fools 2018.", author: "prawn" },
        { text: "Why.js", author: "Robby517" },
        { text: "Blink tag 2: godzilla strikes back", author: "@erez" },
        { text: "<Marque> tag back with vengeance", author: "@udayms" },
        { text: "I. need. this. On. all. my. websites.", author: "@Lordmau5" },
        { text: "With great power comes great responsibility. Or just obnoxious fun.", author: "@TheMeteorChef" },
        { text: "I both recognize the obnoxiousness of this AND want to use it everywhere", author: "@ekmpls" },
        { text: "lolwat.js", author: "@psychronautron" },
        { text: "At this point, we're coming full circle back to my 1997 AngelFire site on Ultima Online... I'm OK with it.", author: "@ryanpoe85" },
        { text: "<blink> tag on steroids!", author: "@master_mitch" },
        { text: "This is why I love internet", author: "@builtbymiken" },
        { text: "Played around with[...]. accidentally created a nightmare", author: "@becckitt" },
      ]
      const quote = quotes[Math.floor(Math.random() * quotes.length)]
      document.getElementById('quote-author').innerText = quote.author
      document.getElementById('quote-text').innerText = quote.text
    </script>
        <script type="text/javascript" src="./rythm.js"></script>
    <script type="text/javascript" src="./demo/example.js"></script>
  </body>
</html>