Browse Source

+ effects

pull/10/head
RubaXa 11 years ago
parent
commit
f7900f7425
  1. 1
      .gitignore
  2. 117
      index.html
  3. 0
      st/logo.png

1
.gitignore vendored

@ -1 +1,2 @@
node_modules node_modules
mock.png

117
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="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"/> <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> <style>
@import url(http://fonts.googleapis.com/css?family=Roboto:300);
html { html {
background-image: -webkit-linear-gradient(bottom, #F4E2C9 20%, #F4D7C9 100%); background-image: -webkit-linear-gradient(bottom, #F4E2C9 20%, #F4D7C9 100%);
background-image: -ms-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-size: 20px;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
font-weight: 300; font-weight: 300;
text-align: center;
} }
@ -47,7 +46,6 @@
list-style: none; list-style: none;
} }
.container { .container {
width: 80%; width: 80%;
margin: auto; margin: auto;
@ -88,6 +86,7 @@
display: inline-block; display: inline-block;
position: relative; position: relative;
background-color: #FF7373; background-color: #FF7373;
z-index: 1000;
} }
.title_xl { .title_xl {
padding: 3px 15px; 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> <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 class="container">
<div style="padding: 80px 0 0 195px; height: 160px;"> <div style="padding: 80px 150px 0; height: 160px;">
<a class="logo" href="https://github.com/RubaXa/Sortable"><img src="logo.png"/></a> <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 jQuery).</h1> <h1>The JavaScript library for modern browsers and touch devices. No&nbsp;jQuery.</h1>
</div> </div>
</div> </div>
<div class="container" style="height: 520px"> <div class="container" style="height: 520px">
<div class="block" style="left: 14.5%; top: 0; width: 37%"> <div data-force="30" class="layer block" style="left: 14.5%; top: 0; width: 37%">
<div class="title">List A</div> <div class="layer title">List A</div>
<ul id="foo" class="block__list block__list_words"> <ul id="foo" class="block__list block__list_words">
<li>бегемот</li> <li>бегемот</li>
<li>корм</li> <li>корм</li>
@ -206,8 +205,8 @@
</ul> </ul>
</div> </div>
<div class="block" style="left: 58%; top: 143px; width: 40%;"> <div data-force="18" class="layer block" style="left: 58%; top: 143px; width: 40%;">
<div class="title">List B</div> <div class="layer title">List B</div>
<ul id="bar" class="block__list block__list_tags"> <ul id="bar" class="block__list block__list_tags">
<li>казнить</li> <li>казнить</li>
<li>,</li> <li>,</li>
@ -220,9 +219,9 @@
<div class="container"> <div class="container">
<div id="multi" style="margin-left: 30px"> <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__name">Group A</div>
<div class="tile__list"> <div class="tile__list">
<img src="//fbcdn-profile-a.akamaihd.net/hprofile-ak-prn1/c9.9.113.113/s100x100/59436_1391411357920_1388516_s.jpg"/><!-- <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> </div>
<div class="tile"> <div class="layer tile" data-force="25">
<div class="tile__name">Group B</div> <div class="tile__name">Group B</div>
<div class="tile__list"> <div class="tile__list">
<img src="//fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/c8.8.105.105/s100x100/558916_4874661741992_448469446_s.jpg"/><!-- <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> </div>
<div class="tile"> <div class="layer tile" data-force="20">
<div class="tile__name">Group C</div> <div class="tile__name">Group C</div>
<div class="tile__list"> <div class="tile__list">
<img src="//fbcdn-profile-a.akamaihd.net/hprofile-ak-frc3/c12.12.156.156/s100x100/303317_320632284665935_15996162_a.jpg"/><!-- <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 class="container" style="margin-top: 100px">
<div style="margin-left: 30px"> <div style="margin-left: 30px">
<div><div class="title title_xl">Code example</div></div> <div><div class="layer title title_xl">Code example</div></div>
<pre class="javascript" style="margin-top: 10px; margin-left: 10px; width: 90%"><code>// Simple list <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"); var list = document.getElementById("my-ui-list");
new Sortable(list); // That's all. new Sortable(list); // That's all.
@ -289,6 +288,7 @@ sort.destroy();
</div> </div>
<script src="Sortable.js"></script> <script src="Sortable.js"></script>
<script> <script>
@ -331,35 +331,82 @@ sort.destroy();
// Background // Background
function setNoiseBackground(el, width, height, opacity){ document.addEventListener( "DOMContentLoaded", function (){
var canvas = document.createElement("canvas"); function setNoiseBackground(el, width, height, opacity){
var context = canvas.getContext("2d"); var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
canvas.width = width;
canvas.height = height; canvas.width = width;
canvas.height = height;
for( var i = 0; i < width; i++ ){
for( var j = 0; j < height; j++ ){ for( var i = 0; i < width; i++ ){
var val = Math.floor(Math.random() * 255); for( var j = 0; j < height; j++ ){
context.fillStyle = "rgba(" + val + "," + val + "," + val + "," + opacity + ")"; var val = Math.floor(Math.random() * 255);
context.fillRect(i, j, 1, 1); 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 (){ (function _loop(){
// Usage var winWidth = window.innerWidth;
setNoiseBackground(document.getElementsByTagName('body')[0], 50, 50, 0.01); 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> </script>
<!-- highlight.js --> <!-- highlight.js -->
<style> <style>
/* Tomorrow Theme */ /* Tomorrow Theme */

0
logo.png → st/logo.png

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

Loading…
Cancel
Save