From 79ab6e3d8d6f32a4ae3927c36edf109754d0fa18 Mon Sep 17 00:00:00 2001 From: Tommaso Lanza Date: Thu, 20 Jun 2013 19:15:19 +0100 Subject: First commit --- css/CooperBlackStd.otf | Bin 0 -> 35728 bytes css/SF Movie Poster Condensed.ttf | Bin 0 -> 24472 bytes css/SF Movie Poster.ttf | Bin 0 -> 24568 bytes css/radial4.png | Bin 0 -> 162545 bytes css/reset.css | 75 ++++++++++++++++++++++++ css/style.css | 116 ++++++++++++++++++++++++++++++++++++++ index.html | 57 +++++++++++++++++++ js/index.js | 113 +++++++++++++++++++++++++++++++++++++ 8 files changed, 361 insertions(+) create mode 100644 css/CooperBlackStd.otf create mode 100644 css/SF Movie Poster Condensed.ttf create mode 100644 css/SF Movie Poster.ttf create mode 100644 css/radial4.png create mode 100644 css/reset.css create mode 100644 css/style.css create mode 100644 index.html create mode 100644 js/index.js diff --git a/css/CooperBlackStd.otf b/css/CooperBlackStd.otf new file mode 100644 index 0000000..96f32bc Binary files /dev/null and b/css/CooperBlackStd.otf differ diff --git a/css/SF Movie Poster Condensed.ttf b/css/SF Movie Poster Condensed.ttf new file mode 100644 index 0000000..69058f5 Binary files /dev/null and b/css/SF Movie Poster Condensed.ttf differ diff --git a/css/SF Movie Poster.ttf b/css/SF Movie Poster.ttf new file mode 100644 index 0000000..2e58e26 Binary files /dev/null and b/css/SF Movie Poster.ttf differ diff --git a/css/radial4.png b/css/radial4.png new file mode 100644 index 0000000..d2200af Binary files /dev/null and b/css/radial4.png differ diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 0000000..37d2012 --- /dev/null +++ b/css/reset.css @@ -0,0 +1,75 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +/* + With addtions by Tommaso Lanza +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + background: transparent; + cursor: default; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + + +/* +tmslnz additions + */ + +/* Clean up anchors */ +a { + margin: 0; + padding: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; + color: inherit; + text-decoration: inherit; +} + +/*html { + -webkit-text-size-adjust: none; + -ms-text-size-adjust: none; +}*/ \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..0cb0f0f --- /dev/null +++ b/css/style.css @@ -0,0 +1,116 @@ +/* apply a natural box layout model to all elements */ +* { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + + +@font-face { + font-family: Poster; + src: url('SF Movie Poster.ttf'); + /*font-weight: bol/d;*/ + font-style: normal; +} + +@font-face { + font-family: Poster Condensed; + src: url('SF Movie Poster Condensed.ttf'); + /*font-weight: bol/d;*/ + font-style: normal; +} + +@font-face { + font-family: Cooper Black; + src: url('CooperBlackStd.otf'); + font-style: normal; +} + +html, body { + height:100%; + width: 100%; + margin: 0; + padding: 0; + border: 0; +} + +body { + font-size: 20px; + font-family: 'Chango', sans-serif; + color: black; +} + +#main { + width: 100%; + height: 100%; + text-align: center; + line-height: 0; + background-image: url(radial4.png); + background-size: 1000px; + background-position: 50%; +} + +/*.jtag { + display: inline-block; + -webkit-transform: rotate(-10deg); + -webkit-backface-visibility:hidden; +}*/ + +.tighter { + letter-spacing: -10px; +} + +.center { + line-height: normal; + display: inline-block; + vertical-align: middle; +} + +.highlight { + color: rgb(255, 50, 50); +} + +.groove { + z-index: 1000; + position: relative; + font-size: 140px; + margin-bottom: 100px; + /*font-weight: 800;*/ + color: rgba(0,0,0,0.05); +} + +.info { + /*text-transform: uppercase;*/ + margin-top: 100px; + font-family: Poster Condensed; + line-height: 45px; + font-size: 60px; + color: rgb(230,230,230); + letter-spacing: 1px; + text-shadow: 0 0 20px rgb(0,0,0); +} + +a { + /*border-bottom-color: white; + border-bottom-width: 1px; + border-bottom-style: solid; + padding-bottom: 1px;*/ + text-decoration: underline; +} +.date { + color: rgb(255,255,255); + font-weight: 800; + text-shadow: 0 0 20px rgb(0,50,0); +} +/*.normal-small { + font-size: 60px; +}*/ +.small { + font-size: 40px; + line-height: 36px; +} + +/*.small-small { + font-size: 30px; + line-height: 33px; +}*/ \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..43b11e3 --- /dev/null +++ b/index.html @@ -0,0 +1,57 @@ + + + + + + + + + JTAG + + + + + + + +
+
+

+ JTAG +

+

29.06

+

~8PM

+
+

JRD, TOMM, ARIANE, and DR. GIO PRESENT

+

JTAG at SHOREDITCH HOUSE roof garden

+

event entrance + 13 BETHNAL GREEN ROAD

+

featuring DEAN WEI of chicago, il

+

with music by SILKEYE

+
+
+
+ + + + diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..d398243 --- /dev/null +++ b/js/index.js @@ -0,0 +1,113 @@ +/*global */ + +(function() { + // http://paulirish.com/2011/requestanimationframe-for-smart-animating/ + // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating + // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel + // MIT license + var lastTime = 0; + var vendors = ['ms', 'moz', 'webkit', 'o']; + for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || + window[vendors[x]+'CancelRequestAnimationFrame']; + } + + if (!window.requestAnimationFrame) { + window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, + timeToCall); + lastTime = currTime + timeToCall; + return id; + }; + } + + if (!window.cancelAnimationFrame) { + window.cancelAnimationFrame = function(id) { + clearTimeout(id); + }; + } +}()); + +Element.prototype.hasClassName = function (a) { + return new RegExp("(?:^|\\s+)" + a + "(?:\\s+|$)").test(this.className); +}; + +Element.prototype.addClassName = function (a) { + if (!this.hasClassName(a)) { + this.className = [this.className, a].join(" "); + } +}; + +Element.prototype.removeClassName = function (b) { + if (this.hasClassName(b)) { + var a = this.className; + this.className = a.replace(new RegExp("(?:^|\\s+)" + b + "(?:\\s+|$)", "g"), " "); + } +}; + +Element.prototype.toggleClassName = function (a) { + this[this.hasClassName(a) ? "removeClassName" : "addClassName"](a); +}; + + +function toDegrees (angle) { + return angle * (180 / Math.PI); +} + +function toRadians (angle) { + return angle * (Math.PI / 180); +} + +function deadCenter(){ + var el = document.querySelectorAll('#main')[0]; + el.style.lineHeight = window.innerHeight+'px'; +} + +var Shoreditch = function( elem ) { + + this.elem = elem; + this.panes = parseInt( this.elem.getAttribute('data-panes'), 15 ); + + this.colorTime = ~~( Math.random() * 360 ); + this.waveTheta = 0; + + this.colorIncrement = -1; + this.degrees = 1; + + this.animate(); +}; + +Shoreditch.prototype.getTextShadow = function( x, y, blur, hue, alpha ) { + return ', ' + x + 'px ' + y + 'px ' + blur + 'px ' + 'hsla(' + hue + ', 100%, 45%, ' + alpha + ')'; +}; + +Shoreditch.prototype.animate = function() { + var shadows = '0 0 transparent', + i, j, x, y; + this.degrees = (this.degrees !== void 0) ? this.degrees - 1 : 0; + // renders rainbow river + for ( i = 1; i < this.panes; i++ ) { + var normI = i / this.panes; + var hue = ( normI * 50 + this.colorTime * 0.5 ) % 360; + var alpha = ( 1 - normI ) * 0.8; + x = Math.cos(toRadians(this.degrees + i*Math.PI*Math.PI)) * i*(i/10); + // x = 0; + y = Math.sin(toRadians(this.degrees + i*Math.PI*Math.PI)) * i*(i*2); + shadows += this.getTextShadow( x, y, i*(i/5), hue, alpha ); + } + + this.elem.style.textShadow = shadows; + this.colorTime += this.colorIncrement; + window.requestAnimationFrame( this.animate.bind( this ) ); +}; + +window.addEventListener( 'resize', deadCenter ); + +window.addEventListener( 'DOMContentLoaded', function() { + deadCenter(); + var grov = new Shoreditch(document.querySelectorAll('#txt')[0]); +}, false ); + -- cgit v1.2.3