using wow.js and animate.css
A Pen by Avaz Bokiev on CodePen.
/* | |
Copy this into the console of any web page that is interactive and doesn't | |
do hard reloads. You will hear your DOM changes as different pitches of | |
audio. | |
I have found this interesting for debugging, but also fun to hear web pages | |
render like UIs do in movies. | |
*/ | |
const audioCtx = new (window.AudioContext || window.webkitAudioContext)() |
// https://codepen.io/cmykw/pen/gemxJm | |
// layout | |
<nav/> | |
// style | |
<style> | |
body { min-height: 200vh; } | |
nav { |
using wow.js and animate.css
A Pen by Avaz Bokiev on CodePen.
<div class="cc">creativecircle</div> |
<input checked data-tooltip='r' class='test1' name='test' type='radio' /> | |
<input class='test2' data-tooltip='g' name='test' type='radio' /> | |
<input class='test3' data-tooltip='b' name='test' type='radio' /> | |
<div></div> |
<img src="http://iweb.uz/wp-content/uploads/2012/08/html5.png"> | |
<div class="bg"> | |
<span>offline</span> | |
<div class="offline"></div> | |
</div> | |
<div class="bg"> | |
<span>storage</span> | |
<div class="storage"></div> | |
</div> |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<!-- IF PEN IS PRIVATE --> | |
<!-- <meta name="robots" content="noindex"> --> | |
<!-- END --> |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Transparent 3D Sphere Web browser · CodePen</title> | |
<style> |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Bouncing 3D ball · CodePen</title> | |
<style> |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Animated Gears · CodePen</title> | |
<style> |