loonfly’s gists

loonfly / script.js

Created September 2, 2012 22:05

A simulation of the Matrix "Code Rain" effect.

	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();

loonfly / script.js

Created September 2, 2012 22:07

	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';

loonfly / index.html

Created September 2, 2012 22:07

Just tried to make a polyfill for position:sticky; Wrote a Modernizr test. Tested in Chrome 23 (supported), Safari 6 and Firefox 14/15 doesn't work on iOS.


	<div id="shim"></div>
	<div class="textHolder"><h1>Try to scroll</h1><div class="sticky">Java script</div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
	</div><div class="textHolde

loonfly / index.haml

Created September 2, 2012 22:08

Tetris loader in CSS (tetrisfriends.com)

	.tetris
	.block1
	.block2
	.block3
	.block4

loonfly / index.html

Created September 2, 2012 22:11

This is just an experiment! There are certainly better ways to show an image of a MacBook, but none as fun as this :)

loonfly / index.html

Created September 2, 2012 22:13

Created this timeline for the company history section of www.meridianapps.com. Uses the LESS CSS framework and some jquery hover/click events.

	<div id="history">

	<div id="history_clock">

	<div id="clockface">

	<div id="clockglare"></div>
	<div id="clockarm_1" ></div>
	<div id="clockarm_2"></div>

loonfly / index.html

Created September 2, 2012 22:15

loonfly / index.html

Created September 2, 2012 22:17

CSS3 animations, transforms, transitions, filters, the whole deal. And oh yeah, Spongebob.


	<h1>Choose your character</h1>
	<form>
	<li>
	<input name="r" type="radio" id="spongebob" />
	<label>Spongebob</label>
	</li>
	<li>
	<input name="r" type="radio" id="patrick" />
	<label>Patrick</label>

loonfly / index.html

Created September 2, 2012 22:25

Nice looking image hover/caption reveal with JS fallback. After looking at http://mattbango.com/notebook/web-development/hover-zoom-effect-with-jquery-and-css/ I wanted to make my own using only CSS. Decided to opt for the figure and figcaption elements.

	<figure>

	<figcaption>
	<p><span>Gibson</span> Les Paul</p>
	</figcaption>

	<img src="http://upload.wikimedia.org/wikipedia/commons/9/97/Gibson_Les_Paul_03.jpg" alt="">

	</figure>

loonfly / index.html

Created September 2, 2012 23:05

From : http://simurai.com/post/9214147117/css3-brushed-metal

	<button class="metal radial">✈</button>
	<button class="metal linear">2</button>
	<button class="metal linear">1</button>
	<button class="metal linear">0</button>

	<a class="metal linear oval" href="http://simurai.com/post/9214147117/css3-brushed-metal">i</a>

	<h1>Brushed Metal by <a href="http://simurai.com/post/9214147117/css3-brushed-metal" title="Brushed Metal by Simurai">Simurai</a></h1>

Loonb loonfly