Skip to content

Instantly share code, notes, and snippets.

View loonfly's full-sized avatar
💭
I may be slow to respond.

Loonb loonfly

💭
I may be slow to respond.
0 followers · 1 following
View GitHub Profile
@loonfly
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
loonfly / index.html
Created September 2, 2012 22:15
<button class="depth" type="button">&#10004;</button>​
@loonfly
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
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 :)
<i class="macbook"></i>
@loonfly
loonfly / index.haml
Created September 2, 2012 22:08
Tetris loader in CSS (tetrisfriends.com)
.tetris
.block1
.block2
.block3
.block4
@loonfly
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
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
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();