+ effects

11 years ago · f7900f7425
3 changed files with 83 additions and 35 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1 +1,2 @@
 node_modules
+mock.png
--- a/index.html
+++ b/index.html
@ -10,11 +10,9 @@
 	<meta name="description" content="Sortable - is a minimalist JavaScript library for modern browsers and touch devices (No jQuery)."/>
 	<meta name="viewport" content="width=device-width, initial-scale=1"/>

+	<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'/>

 	<style>
-		@import url(http://fonts.googleapis.com/css?family=Roboto:300);
-
-
 		html {
 			background-image: -webkit-linear-gradient(bottom, #F4E2C9 20%, #F4D7C9 100%);
 			background-image: -ms-linear-gradient(bottom, #F4E2C9 20%, #F4D7C9 100%);
@ -38,6 +36,7 @@
 			font-size: 20px;
 			font-family: 'Roboto', sans-serif;
 			font-weight: 300;
+			text-align: center;
 		}


@ -47,7 +46,6 @@
 			list-style: none;
 		}

-
 		.container {
 			width: 80%;
 			margin: auto;
@ -88,6 +86,7 @@
 			display: inline-block;
 			position: relative;
 			background-color: #FF7373;
+			z-index: 1000;
 		}
 			.title_xl {
 				padding: 3px 15px;
@ -184,16 +183,16 @@
 	<a href="https://github.com/RubaXa/Sortable"><img style="position: absolute; top: 0; right: 0; border: 0;" src="//s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>

 	<div class="container">
-		<div style="padding: 80px 0 0 195px; height: 160px;">
-			<a class="logo" href="https://github.com/RubaXa/Sortable"><img src="logo.png"/></a>
-			<h1>The JavaScript library for modern browsers and touch devices (No jQuery).</h1>
+		<div style="padding: 80px 150px 0; height: 160px;">
+			<a class="layer logo" href="https://github.com/RubaXa/Sortable"><img src="st/logo.png"/></a>
+			<h1>The JavaScript library for modern browsers and touch devices. No&nbsp;jQuery.</h1>
 		</div>
 	</div>


 	<div class="container" style="height: 520px">
-		<div class="block" style="left: 14.5%; top: 0; width: 37%">
-			<div class="title">List A</div>
+		<div data-force="30" class="layer block" style="left: 14.5%; top: 0; width: 37%">
+			<div class="layer title">List A</div>
 			<ul id="foo" class="block__list block__list_words">
 				<li>бегемот</li>
 				<li>корм</li>
@ -206,8 +205,8 @@
 			</ul>
 		</div>

-		<div class="block" style="left: 58%; top: 143px; width: 40%;">
-			<div class="title">List B</div>
+		<div data-force="18" class="layer block" style="left: 58%; top: 143px; width: 40%;">
+			<div class="layer title">List B</div>
 			<ul id="bar" class="block__list block__list_tags">
 				<li>казнить</li>
 				<li>,</li>
@ -220,9 +219,9 @@

 	<div class="container">
 		<div id="multi" style="margin-left: 30px">
-			<div><div class="title title_xl">Multi</div></div>
+			<div><div data-force="5" class="layer title title_xl">Multi</div></div>

-			<div class="tile">
+			<div class="layer tile" data-force="30">
 				<div class="tile__name">Group A</div>
 				<div class="tile__list">
 					<img src="//fbcdn-profile-a.akamaihd.net/hprofile-ak-prn1/c9.9.113.113/s100x100/59436_1391411357920_1388516_s.jpg"/><!--
@ -232,7 +231,7 @@
 				</div>
 			</div>

-			<div class="tile">
+			<div class="layer tile" data-force="25">
 				<div class="tile__name">Group B</div>
 				<div class="tile__list">
 					<img src="//fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/c8.8.105.105/s100x100/558916_4874661741992_448469446_s.jpg"/><!--
@ -241,7 +240,7 @@
 				</div>
 			</div>

-			<div class="tile">
+			<div class="layer tile" data-force="20">
 				<div class="tile__name">Group C</div>
 				<div class="tile__list">
 					<img src="//fbcdn-profile-a.akamaihd.net/hprofile-ak-frc3/c12.12.156.156/s100x100/303317_320632284665935_15996162_a.jpg"/><!--
@ -255,8 +254,8 @@

 	<div class="container" style="margin-top: 100px">
 		<div style="margin-left: 30px">
-			<div><div class="title title_xl">Code example</div></div>
-			<pre class="javascript" style="margin-top: 10px; margin-left: 10px; width: 90%"><code>// Simple list
+			<div><div class="layer title title_xl">Code example</div></div>
+			<pre data-force="100" class="layer javascript" style="margin-top: -8px; margin-left: 10px; width: 90%"><code>// Simple list
 var list = document.getElementById("my-ui-list");
 new Sortable(list); // That's all.

@ -289,6 +288,7 @@ sort.destroy();
 	</div>


+
 	<script src="Sortable.js"></script>

 	<script>
@ -331,35 +331,82 @@ sort.destroy();


 		// Background
-		function setNoiseBackground(el, width, height, opacity){
-			var canvas = document.createElement("canvas");
-			var context = canvas.getContext("2d");
-
-			canvas.width = width;
-			canvas.height = height;
-
-			for( var i = 0; i < width; i++ ){
-				for( var j = 0; j < height; j++ ){
-					var val = Math.floor(Math.random() * 255);
-					context.fillStyle = "rgba(" + val + "," + val + "," + val + "," + opacity + ")";
-					context.fillRect(i, j, 1, 1);
+		document.addEventListener( "DOMContentLoaded", function (){
+			function setNoiseBackground(el, width, height, opacity){
+				var canvas = document.createElement("canvas");
+				var context = canvas.getContext("2d");
+
+				canvas.width = width;
+				canvas.height = height;
+
+				for( var i = 0; i < width; i++ ){
+					for( var j = 0; j < height; j++ ){
+						var val = Math.floor(Math.random() * 255);
+						context.fillStyle = "rgba(" + val + "," + val + "," + val + "," + opacity + ")";
+						context.fillRect(i, j, 1, 1);
+					}
 				}
+
+				el.style.background = "url(" + canvas.toDataURL("image/png") + ")";
 			}

-			el.style.background = "url(" + canvas.toDataURL("image/png") + ")";
-		}
+			setNoiseBackground(document.getElementsByTagName('body')[0], 50, 50, 0.02);
+		}, false );
+	</script>
+
+

+	<!-- Parallax -->
+	<script>
+		(function (){
+			var x, y;
+
+			var items = [].slice.call(document.querySelectorAll('.layer')).map(function (el){
+				var rect = el.getBoundingClientRect();
+				el.x = rect.left;
+				el.y = rect.top;
+				el.w = rect.right - rect.left;
+				el.h = rect.bottom - rect.top;
+				el.force = el.getAttribute('data-force') || 10;
+				return el;
+			});
+
+
+			document.addEventListener('dragover', function (evt){
+				x = evt.clientX;
+				y = evt.clientY;
+			}, false);
+
+			document.addEventListener('mousemove', function (evt){
+				x = evt.clientX;
+				y = evt.clientY;
+			}, false);


-		window.onload = function (){
-			// Usage
-			setNoiseBackground(document.getElementsByTagName('body')[0], 50, 50, 0.01);
-		};
+			(function _loop(){
+				var winWidth = window.innerWidth;
+				var winHeight = window.innerHeight;
+				var halfWidth = winWidth / 2;
+				var halfHeight = winHeight / 2;
+
+				var rx = x - winWidth/2;
+				var ry = winHeight/2 - y;
+
+				items.forEach(function (el){
+					var dx = el.w/el.force * (rx / -halfWidth);
+					var dy = el.h/el.force * (ry / halfHeight);
+					el.style['transform'] = 'translate3d('+dx+'px,'+dy+'px,0)';
+				});
+
+				requestAnimationFrame(_loop);
+			})();
+		})();
 	</script>




+
 	<!-- highlight.js -->
 	<style>
 		/* Tomorrow Theme */
--- a/st/logo.png
+++ b/st/logo.png