diff options
| -rw-r--r-- | css/CooperBlackStd.otf | bin | 0 -> 35728 bytes | |||
| -rw-r--r-- | css/SF Movie Poster Condensed.ttf | bin | 0 -> 24472 bytes | |||
| -rw-r--r-- | css/SF Movie Poster.ttf | bin | 0 -> 24568 bytes | |||
| -rw-r--r-- | css/radial4.png | bin | 0 -> 162545 bytes | |||
| -rw-r--r-- | css/reset.css | 75 | ||||
| -rw-r--r-- | css/style.css | 116 | ||||
| -rw-r--r-- | index.html | 57 | ||||
| -rw-r--r-- | js/index.js | 113 |
8 files changed, 361 insertions, 0 deletions
diff --git a/css/CooperBlackStd.otf b/css/CooperBlackStd.otf Binary files differnew file mode 100644 index 0000000..96f32bc --- /dev/null +++ b/css/CooperBlackStd.otf diff --git a/css/SF Movie Poster Condensed.ttf b/css/SF Movie Poster Condensed.ttf Binary files differnew file mode 100644 index 0000000..69058f5 --- /dev/null +++ b/css/SF Movie Poster Condensed.ttf diff --git a/css/SF Movie Poster.ttf b/css/SF Movie Poster.ttf Binary files differnew file mode 100644 index 0000000..2e58e26 --- /dev/null +++ b/css/SF Movie Poster.ttf diff --git a/css/radial4.png b/css/radial4.png Binary files differnew file mode 100644 index 0000000..d2200af --- /dev/null +++ b/css/radial4.png 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 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <meta http-equiv="Content-Language" content="en"> + <meta name="author" content="The Workers London Ltd."> + <meta name="viewport" content="width=600" id="meta-viewport"> + <meta name="google" content="notranslate"> + <title>JTAG</title> + <link href='http://fonts.googleapis.com/css?family=Chango' rel='stylesheet' type='text/css'> + <!-- <link href='http://fonts.googleapis.com/css?family=Roboto:400,900' rel='stylesheet' type='text/css'> --> + <link rel="stylesheet" type="text/css" href="/css/reset.css"> + <link rel="stylesheet" type="text/css" href="/css/style.css"> + <script> + var _lr = _lr || {}; + _lr.host = (location.host || 'localhost').split(':')[0]; + _lr.port = 35729; + (function(doc, tag) { + var el = doc.createElement(tag); + var ct = doc.getElementsByTagName(tag)[0]; + el.src = '//' + _lr.host + ':' + _lr.port + '/livereload.js?snipver=1'; + ct.parentNode.insertBefore(el, ct); + }(document, 'script')); + </script> + </head> + <body> + <div id='main'> + <div class="center"> + <p id='txt' class='groove' data-panes="10"> + <span class="jtag">J</span><span class="jtag tighter">TA</span><span class="jtag">G</span> + </p> + <p class="date">29.06</p> + <p class="date">~8PM</p> + <div class="info"> + <p class="small"><a href="//jrdonaldson.com">JRD</a>, <a href="//theworkers.net">TOMM</a>, <a href="//arianeprin.com">ARIANE</a>, and <a href="//giorgiapiacentino.com">DR. GIO</a> PRESENT</p> + <p>JTAG at SHOREDITCH HOUSE roof garden</p> + <p><span class="normal-small">event entrance</span> + <a href="//maps.google.co.uk/maps?q=19+BETHNAL+GREEN+ROAD&hl=en&sll=51.48931,-0.08819&sspn=0.802934,2.108002&hnear=19+Bethnal+Green+Rd,+London+Borough+of+Tower+Hamlets,+London+E1,+United+Kingdom&t=m&z=16"><span class="highlight">13</span> BETHNAL GREEN ROAD</a></p> + <p class="small">featuring DEAN WEI of chicago, il</p> + <p class="small"><span class="small-small">with music by </span> <a href="//soundcloud.com/silkeye">SILKEYE</a></p> + </div> + </div> + </div> + <script src="/js/index.js"></script> + <script> + var sc_project = 0000000; + var sc_invisible = 1; + var sc_security = "000000"; + (function(doc, tag) { + var el = doc.createElement(tag); + var ct = doc.getElementsByTagName(tag)[0]; + el.src = ('https:' === location.protocol ? '//secure' : '//www') + '.statcounter.com/counter/counter.js'; + ct.parentNode.insertBefore(el, ct); + }(document, 'script')) + </script> + </body> +</html> 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 ); + |
