├── .gitattributes
├── README.md
├── atvImg-min.js
├── atvImg.css
├── atvImg.js
└── package.json


/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # atvImg
 2 | 
 3 | `atvImg` = 'AppleTV Image'
 4 | 
 5 | Made by http://drewwilson.com
 6 | 
 7 | ---
 8 | 
 9 | This lightweight (2kb) plug-in will automatically turn your layered Apple TV PNGs into
10 | 3D parallax icons, the same way the new Apple TV treats app icons.
11 | You can have any number of AppleTV Images on your web page. 
12 | 
13 | No dependencies, this plugin is just plain ol' vanilla javascript. Works on all 
14 | major browsers. It even supports touch and mobile.
15 | 
16 | <img src="http://d.pr/i/12IWV+" alt="atcImg example" width="246" height="240">
17 |  
18 | A live example of this plug-in can bee seen here: http://kloc.pm
19 | 
20 | Here is a video explaining how it works: http://d.pr/v/18YXv
21 | 
22 | Here is a video showing off the touch/mobile support: http://d.pr/v/1k2Ju
23 |  
24 | -------------------
25 |  
26 | Here is how to setup the HTML for a single `atvImg`:
27 | ```html
28 | <div class="atvImg">
29 |    <img src="/images/flattened-icon.jpg">
30 |    
31 |    <div class="atvImg-layer" data-img="/images/back.png"></div>
32 |    <div class="atvImg-layer" data-img="/images/front.png"></div>
33 | </div>
34 | ```
35 |  
36 | You can have any number of `'.atvImg-layer'` elements. So add as many as your icon needs. Be sure to use 2x (retina) scale PNGs. The plug-in will downscale for 1x screens. Using 2x scale PNGs is recommended so the icon will appear crisp on 2x screens.
37 | 
38 | Layer images should be 2x the size you want to display the icon as. The plug-in will adapt the `atvImg` to be whatever size it's parent element is. So if you set your `'.atvImg'` element to be 320px X 190px, that is how big the icon will appear. If you set it to be 640px X 380px, that is how big it will appear. Just be sure to use the correct aspect ratio for AppleTV icons.
39 | 
40 | The `<img>` element in the example above is a fallback in case javascript is not allowed to run. It will be removed when the plug-in is running. Put a flattened version (no layers) of you icon in there.
41 | 
42 | Then call the function in you `<script>` tag or JS file like this: 
43 | 
44 | `atvImg();`
45 | 
46 | Just be sure you add that line after you've loaded the DOM. So put it below all your page's HTML just before the closing `</body>` tag or in a document.ready() function.
47 | 
48 | -------------------
49 | 
50 | This `atvImg` plug-in is dual licensed under the MIT and GPL licenses:
51 |  * http://www.opensource.org/licenses/mit-license.php
52 |  * http://www.gnu.org/licenses/gpl.html
53 | 
54 | I used http://designmodo.com/apple-tv-effect as reference and inspiration when creating this plug-in.
55 | 


--------------------------------------------------------------------------------
/atvImg-min.js:
--------------------------------------------------------------------------------
1 | function atvImg(){function e(e,t,a,r,n,o){var i=l.scrollTop||s.scrollTop,d=l.scrollLeft,c=t?e.touches[0].pageX:e.pageX,m=t?e.touches[0].pageY:e.pageY,v=a.getBoundingClientRect(),f=a.clientWidth||a.offsetWidth||a.scrollWidth,g=a.clientHeight||a.offsetHeight||a.scrollHeight,h=320/f,u=.52-(c-v.left-d)/f,p=.52-(m-v.top-i)/g,y=m-v.top-i-g/2,E=c-v.left-d-f/2,C=(u-E)*(.07*h),I=(y-p)*(.1*h),N="rotateX("+I+"deg) rotateY("+C+"deg)",x=Math.atan2(y,E),b=180*x/Math.PI-90;0>b&&(b+=360),-1!=a.firstChild.className.indexOf(" over")&&(N+=" scale3d(1.07,1.07,1.07)"),a.firstChild.style.transform=N,o.style.background="linear-gradient("+b+"deg, rgba(255,255,255,"+(m-v.top-i)/g*.4+") 0%,rgba(255,255,255,0) 80%)",o.style.transform="translateX("+u*n-.1+"px) translateY("+p*n-.1+"px)";for(var L=n,S=0;n>S;S++)r[S].style.transform="translateX("+u*L*(2.5*S/h)+"px) translateY("+p*n*(2.5*S/h)+"px)",L--}function t(e,t){t.firstChild.className+=" over"}function a(e,t,a,r,n){var l=t.firstChild;l.className=l.className.replace(" over",""),l.style.transform="",n.style.cssText="";for(var s=0;r>s;s++)a[s].style.transform=""}var r=document,n=r.documentElement,l=r.getElementsByTagName("body")[0],s=r.getElementsByTagName("html")[0],o=window,i=r.querySelectorAll(".atvImg"),d=i.length,c="ontouchstart"in o||navigator.msMaxTouchPoints;if(!(0>=d))for(var m=0;d>m;m++){var v=i[m],f=v.querySelectorAll(".atvImg-layer"),g=f.length;if(!(0>=g)){for(;v.firstChild;)v.removeChild(v.firstChild);var h=r.createElement("div"),u=r.createElement("div"),p=r.createElement("div"),y=r.createElement("div"),E=[];v.id="atvImg__"+m,h.className="atvImg-container",u.className="atvImg-shine",p.className="atvImg-shadow",y.className="atvImg-layers";for(var C=0;g>C;C++){var I=r.createElement("div"),N=f[C].getAttribute("data-img");I.className="atvImg-rendered-layer",I.setAttribute("data-layer",C),I.style.backgroundImage="url("+N+")",y.appendChild(I),E.push(I)}h.appendChild(p),h.appendChild(y),h.appendChild(u),v.appendChild(h);var x=v.clientWidth||v.offsetWidth||v.scrollWidth;v.style.transform="perspective("+3*x+"px)",c?(o.preventScroll=!1,function(r,n,l,s){v.addEventListener("touchmove",function(t){o.preventScroll&&t.preventDefault(),e(t,!0,r,n,l,s)}),v.addEventListener("touchstart",function(e){o.preventScroll=!0,t(e,r)}),v.addEventListener("touchend",function(e){o.preventScroll=!1,a(e,r,n,l,s)})}(v,E,g,u)):!function(r,n,l,s){v.addEventListener("mousemove",function(t){e(t,!1,r,n,l,s)}),v.addEventListener("mouseenter",function(e){t(e,r)}),v.addEventListener("mouseleave",function(e){a(e,r,n,l,s)})}(v,E,g,u)}}}


--------------------------------------------------------------------------------
/atvImg.css:
--------------------------------------------------------------------------------
 1 | .atvImg {
 2 | 	border-radius: 5px;
 3 | 	transform-style: preserve-3d;
 4 | 	-webkit-tap-highlight-color: rgba(#000,0);
 5 | }
 6 | 
 7 | .atvImg img {
 8 | 	border-radius: 5px;
 9 | 	box-shadow: 0 2px 8px rgba(14,21,47,0.25);
10 | }
11 | 
12 | .atvImg-container {
13 | 	position: relative;
14 | 	width: 100%;
15 | 	height: 100%;
16 | 	border-radius: 5px;
17 | 	transition: all 0.2s ease-out;
18 | }
19 | 
20 | .atvImg-container.over .atvImg-shadow {
21 | 	box-shadow: 0 45px 100px rgba(14,21,47,0.4), 0 16px 40px rgba(14,21,47,0.4);
22 | }
23 | 
24 | .atvImg-layers {
25 | 	position: relative;
26 | 	width: 100%;
27 | 	height: 100%;
28 | 	border-radius: 5px;
29 | 	overflow: hidden;
30 | 	transform-style: preserve-3d;
31 | }
32 | 
33 | .atvImg-rendered-layer {
34 | 	position: absolute;
35 | 	width: 104%;
36 | 	height: 104%;
37 | 	top: -2%; 
38 | 	left: -2%;
39 | 	background-repeat: no-repeat;
40 | 	background-position: center;
41 | 	background-color: transparent;
42 | 	background-size: cover;
43 | 	transition: all 0.1s ease-out;
44 | }
45 | 
46 | .atvImg-shadow {
47 | 	position: absolute;
48 | 	top: 5%; 
49 | 	left: 5%;
50 | 	width: 90%;
51 | 	height: 90%;
52 | 	transition: all 0.2s ease-out;
53 | 	box-shadow: 0 8px 30px rgba(14,21,47,0.6);
54 | }
55 | 
56 | .atvImg-shine {
57 | 	position: absolute;
58 | 	top: 0; 
59 | 	left: 0; 
60 | 	right: 0; 
61 | 	bottom: 0;
62 | 	border-radius: 5px;
63 | 	background: linear-gradient(135deg, rgba(255,255,255,.25) 0%,rgba(255,255,255,0) 60%);
64 | }


--------------------------------------------------------------------------------
/atvImg.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * atvImg
  3 |  * Copyright 2015 Drew Wilson
  4 |  * http://drewwilson.com
  5 |  *
  6 |  * Version 1.2   -   Updated: Dec. 09, 2015
  7 |  *
  8 |  * atvImg = 'AppleTV Image'
  9 |  * 
 10 |  * This plug-in will automatically turn your layered Apple TV PNGs into
 11 |  * 3D parallax icons, the same way the new Apple TV treats app icons.
 12 |  * You can have any number of AppleTV Images on the page.
 13 |  *
 14 |  * An example of this plug-in can bee seen here: http://kloc.pm
 15 |  *
 16 |  * -------------------
 17 |  *
 18 |  * Here is how to setup the HTML for a single atvImg:
 19 |  * <div class="atvImg">
 20 |  * 		<img src="/images/flattened-icon.jpg">
 21 |  *
 22 |  *		<div class="atvImg-layer" data-img="/images/back.png"></div>
 23 |  *		<div class="atvImg-layer" data-img="/images/front.png"></div>
 24 |  * </div>
 25 |  * 
 26 |  * You can have any number of 'atvImg-layer' elements. So add as many
 27 |  * as your icon needs. Be sure to use 2x (retina) scale PNGs. The plug-in
 28 |  * will downscale for 1x screens. Using 2x scale PNGs is recommended
 29 |  * so the icon will appear crisp on 2x screens. 
 30 |  * Layer images should be 2x the size you want to display the icon as.
 31 |  * The plug-in will adapt the atvImg to be whatever size it's parent
 32 |  * element is. So if you set your '.atvImg' element to be 320px X 190px,
 33 |  * that is how big the icon will appear. If you set it to be 
 34 |  * 640px X 380px, that is how big it will appear. Just be sure to
 35 |  * use the correct aspect ratio for AppleTV icons.
 36 |  *
 37 |  * The <img> element in the example above is a fallback in case 
 38 |  * javascript is not allowed to run. It will be removed when the plug-in
 39 |  * is running. Put a flattened version (no layers) of you icon in there.
 40 |  * 
 41 |  * Then call the funciton in you <script> tag or JS file like this: 
 42 |  *
 43 |  * atvImg();
 44 |  *
 45 |  *
 46 |  * Just be sure you add that line after you've loaded the DOM. So put
 47 |  * it below all your page's HTML just before the closing </body> tag or
 48 |  * in a document.ready() function.
 49 |  *
 50 |  * -------------------
 51 |  *
 52 |  * This atvImg plug-in is dual licensed under the MIT and GPL licenses:
 53 |  *   http://www.opensource.org/licenses/mit-license.php
 54 |  *   http://www.gnu.org/licenses/gpl.html
 55 |  *
 56 |  * I used http://designmodo.com/apple-tv-effect as reference and
 57 |  * inspiration when creating this plug-in.
 58 |  */
 59 | 
 60 | function atvImg(){
 61 | 
 62 | 	var d = document,
 63 | 		de = d.documentElement,
 64 | 		bd = d.getElementsByTagName('body')[0],
 65 | 		htm = d.getElementsByTagName('html')[0],
 66 | 		win = window,
 67 | 		imgs = d.querySelectorAll('.atvImg'),
 68 | 		totalImgs = imgs.length,
 69 | 		supportsTouch = 'ontouchstart' in win || navigator.msMaxTouchPoints;
 70 | 
 71 | 	if(totalImgs <= 0){
 72 | 		return;
 73 | 	}
 74 | 
 75 | 	// build HTML
 76 | 	for(var l=0;l<totalImgs;l++){
 77 | 
 78 | 		var thisImg = imgs[l],
 79 | 			layerElems = thisImg.querySelectorAll('.atvImg-layer'),
 80 | 			totalLayerElems = layerElems.length;
 81 | 
 82 | 		if(totalLayerElems <= 0){
 83 | 			continue;
 84 | 		}
 85 | 
 86 | 		while(thisImg.firstChild) {
 87 | 			thisImg.removeChild(thisImg.firstChild);
 88 | 		}
 89 | 	
 90 | 		var containerHTML = d.createElement('div'),
 91 | 			shineHTML = d.createElement('div'),
 92 | 			shadowHTML = d.createElement('div'),
 93 | 			layersHTML = d.createElement('div'),
 94 | 			layers = [];
 95 | 
 96 | 		thisImg.id = 'atvImg__'+l;
 97 | 		containerHTML.className = 'atvImg-container';
 98 | 		shineHTML.className = 'atvImg-shine';
 99 | 		shadowHTML.className = 'atvImg-shadow';
100 | 		layersHTML.className = 'atvImg-layers';
101 | 
102 | 		for(var i=0;i<totalLayerElems;i++){
103 | 			var layer = d.createElement('div'),
104 | 				imgSrc = layerElems[i].getAttribute('data-img');
105 | 
106 | 			layer.className = 'atvImg-rendered-layer';
107 | 			layer.setAttribute('data-layer',i);
108 | 			layer.style.backgroundImage = 'url('+imgSrc+')';
109 | 			layersHTML.appendChild(layer);
110 | 
111 | 			layers.push(layer);
112 | 		}
113 | 
114 | 		containerHTML.appendChild(shadowHTML);
115 | 		containerHTML.appendChild(layersHTML);
116 | 		containerHTML.appendChild(shineHTML);
117 | 		thisImg.appendChild(containerHTML);
118 | 
119 | 		var w = thisImg.clientWidth || thisImg.offsetWidth || thisImg.scrollWidth;
120 | 		thisImg.style.transform = 'perspective('+ w*3 +'px)';
121 | 
122 | 		if(supportsTouch){
123 | 			win.preventScroll = false;
124 | 
125 | 	        (function(_thisImg,_layers,_totalLayers,_shine) {
126 | 				thisImg.addEventListener('touchmove', function(e){
127 | 					if (win.preventScroll){
128 | 						e.preventDefault();
129 | 					}
130 | 					processMovement(e,true,_thisImg,_layers,_totalLayers,_shine);		
131 | 				});
132 | 	            thisImg.addEventListener('touchstart', function(e){
133 | 	            	win.preventScroll = true;
134 | 					processEnter(e,_thisImg);		
135 | 				});
136 | 				thisImg.addEventListener('touchend', function(e){
137 | 					win.preventScroll = false;
138 | 					processExit(e,_thisImg,_layers,_totalLayers,_shine);		
139 | 				});
140 | 	        })(thisImg,layers,totalLayerElems,shineHTML);
141 | 	    } else {
142 | 	    	(function(_thisImg,_layers,_totalLayers,_shine) {
143 | 				thisImg.addEventListener('mousemove', function(e){
144 | 					processMovement(e,false,_thisImg,_layers,_totalLayers,_shine);		
145 | 				});
146 | 	            thisImg.addEventListener('mouseenter', function(e){
147 | 					processEnter(e,_thisImg);		
148 | 				});
149 | 				thisImg.addEventListener('mouseleave', function(e){
150 | 					processExit(e,_thisImg,_layers,_totalLayers,_shine);		
151 | 				});
152 | 	        })(thisImg,layers,totalLayerElems,shineHTML);
153 | 	    }
154 | 	}
155 | 
156 | 	function processMovement(e, touchEnabled, elem, layers, totalLayers, shine){
157 | 
158 | 		var bdst = bd.scrollTop || htm.scrollTop,
159 | 			bdsl = bd.scrollLeft,
160 | 			pageX = (touchEnabled)? e.touches[0].pageX : e.pageX,
161 | 			pageY = (touchEnabled)? e.touches[0].pageY : e.pageY,
162 | 			offsets = elem.getBoundingClientRect(),
163 | 			w = elem.clientWidth || elem.offsetWidth || elem.scrollWidth, // width
164 | 			h = elem.clientHeight || elem.offsetHeight || elem.scrollHeight, // height
165 | 			wMultiple = 320/w,
166 | 			offsetX = 0.52 - (pageX - offsets.left - bdsl)/w, //cursor position X
167 | 			offsetY = 0.52 - (pageY - offsets.top - bdst)/h, //cursor position Y
168 | 			dy = (pageY - offsets.top - bdst) - h / 2, //@h/2 = center of container
169 | 			dx = (pageX - offsets.left - bdsl) - w / 2, //@w/2 = center of container
170 | 			yRotate = (offsetX - dx)*(0.07 * wMultiple), //rotation for container Y
171 | 			xRotate = (dy - offsetY)*(0.1 * wMultiple), //rotation for container X
172 | 			imgCSS = 'rotateX(' + xRotate + 'deg) rotateY(' + yRotate + 'deg)', //img transform
173 | 			arad = Math.atan2(dy, dx), //angle between cursor and center of container in RAD
174 | 			angle = arad * 180 / Math.PI - 90; //convert rad in degrees
175 | 
176 | 		//get angle between 0-360
177 | 		if (angle < 0) {
178 | 			angle = angle + 360;
179 | 		}
180 | 
181 | 		//container transform
182 | 		if(elem.firstChild.className.indexOf(' over') != -1){
183 | 			imgCSS += ' scale3d(1.07,1.07,1.07)';
184 | 		}
185 | 		elem.firstChild.style.transform = imgCSS;
186 | 		
187 | 		//gradient angle and opacity for shine
188 | 		shine.style.background = 'linear-gradient(' + angle + 'deg, rgba(255,255,255,' + (pageY - offsets.top - bdst)/h * 0.4 + ') 0%,rgba(255,255,255,0) 80%)';
189 | 		shine.style.transform = 'translateX(' + (offsetX * totalLayers) - 0.1 + 'px) translateY(' + (offsetY * totalLayers) - 0.1 + 'px)';	
190 | 
191 | 		//parallax for each layer
192 | 		var revNum = totalLayers;
193 | 		for(var ly=0;ly<totalLayers;ly++){
194 | 			layers[ly].style.transform = 'translateX(' + (offsetX * revNum) * ((ly * 2.5) / wMultiple) + 'px) translateY(' + (offsetY * totalLayers) * ((ly * 2.5) / wMultiple) + 'px)';
195 | 			revNum--;
196 | 		}
197 | 	}
198 | 
199 | 	function processEnter(e, elem){
200 | 		elem.firstChild.className += ' over';
201 | 	}
202 | 
203 | 	function processExit(e, elem, layers, totalLayers, shine){
204 | 
205 | 		var container = elem.firstChild;
206 | 
207 | 		container.className = container.className.replace(' over','');
208 | 		container.style.transform = '';
209 | 		shine.style.cssText = '';
210 | 		
211 | 		for(var ly=0;ly<totalLayers;ly++){
212 | 			layers[ly].style.transform = '';
213 | 		}
214 | 
215 | 	}
216 | 
217 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "atvimg",
 3 |   "version": "1.0.0",
 4 |   "description": "3D parallax icons like those in Apple TV.",
 5 |   "main": "atvImg.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/drewwilson/atvImg.git"
12 |   },
13 |   "keywords": [
14 |     "html",
15 |     "parallax",
16 |     "icon"
17 |   ],
18 |   "author": "Drew Wilson",
19 |   "license": "MIT",
20 |   "bugs": {
21 |     "url": "https://github.com/drewwilson/atvImg/issues"
22 |   },
23 |   "homepage": "https://github.com/drewwilson/atvImg#readme"
24 | }
25 | 


--------------------------------------------------------------------------------