xav76

<div class="buttonsController">
  <button type="button" data-set="magenta" data-color="#8DD3C7">Magenta</button>
  <button type="button" data-set="green"data-color="#FFFFB3">Green</button>
  <button type="button" data-set="blue"data-color="#BEBADA">Blue</button>
  <button type="button" data-set="yellow"data-color="#FB8072">Yellow</button>
</div>

 <footer>
  Denys Mishunov @mishunov
</footer>

xav76

<div class="shelf">

  <div class="bookend_left"></div>
	<div class="bookend_right"></div>
	<div class="reflection"></div>

</div>

xav76

<div>
  <h1>Paralax effect without a plugin</h1>
  
  <h2>The Odyssey</h2>

  <p><cite>By Homer</cite></p>

  <p><date>Written 800 B.C.E</date></p>

  <p>Tell me, O muse, of that ingenious hero who travelled far and wide after he had sacked the famous town of Troy. Many cities did he visit, and many were the nations with whose manners and customs he was acquainted; moreover he suffered much by sea while trying to save his own life and bring his men safely home; but do what he might he could not save his men, for they perished through their own sheer folly in eating the cattle of the Sun-god Hyperion; so the god prevented them from ever reaching home. Tell me, too, about all these things, O daughter of Jove, from whatsoever source you may know them.</p><p>So now all who escaped death in battle or by shipwreck had got safely home except Ulysses, and he, though he was longing to return to his wife and country, was detained by the goddess Calypso, who had got him into a large cave and wanted to marry him. But as 

xav76

<ul>
  	<li><div></div></li>
		<li><div></div></li>
		<li><div></div></li>
		<li><div></div></li>
		<li><div></div></li>
		<li><div></div></li>
		<li><div></div></li>
		<li><div></div></li>
		<li><div></div></li>

xav76

<br>
<input type="checkbox"/> <br>
<input type="checkbox"/> <br>
<input type="checkbox"/>

xav76

var canvas = document.body.appendChild( document.createElement( 'canvas' ) ),
    context = canvas.getContext( '2d' ),
    t = 0,
    w, h;

context.globalCompositeOperation = 'lighter';
window.addEventListener( 'resize', resize, false );

resize();
animate();

xav76

<ul>
  <li class="pendulum-1"></li>
  <li class="pendulum-2"></li>
  <li class="pendulum-3"></li>
  <li class="pendulum-4"></li>
  <li class="pendulum-5"></li>
  <li class="pendulum-6"></li>
  <li class="pendulum-7"></li>
  <li class="pendulum-8"></li>
  <li class="pendulum-9"></li>

xav76

var canvas = document.body.appendChild( document.createElement( 'canvas' ) ),
    context = canvas.getContext( '2d' );
context.globalCompositeOperation = 'lighter';
canvas.width = 1280;
canvas.height = 800;
draw();

var textStrip = ['诶', '比', '西', '迪', '伊', '吉', '艾', '杰', '开', '哦', '屁', '提', '维'];

var stripCount = 60, stripX = new Array(), stripY = new Array(), dY = new Array(), stripFontSize = new Array();

xav76

<figure>
  <img src="http://lorempixel.com/200/200/" alt="">
  <figcaption>This is the caption</figcaption>
</figure>

xav76

var c = document.createElement('canvas');
var ctx = c.getContext('2d');
var cw = c.width = 400;
var ch = c.height = 200;
document.body.appendChild(c);

ctx.font = 'normal 20px monospace';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillStyle = '#3f3';