index.html
<!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', 'blur', 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>