| Главная » Файлы » Скрипты плагины и дополнения » Разное |
Мордочка кисы
И так делаем её: HTML: Код <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Кискина мордочка-Web-mas.ru</title> <link rel="stylesheet" href="/css/style.css" media="screen" type="text/css" /> </head> <body> <div class="wrapper"> <div class="sq sq0"></div> <div class="sq sq1"></div> <div class="sq sq2"></div> <div class="sq sq3"></div> <div class="sq sq4"></div> <div class="sq sq5"></div> <div class="sq sq6"></div> <div class="sq sq7"></div> <div class="sq sq9"></div> <div class="sq sq10"></div> <div class="sq sq11"></div> <div class="sq sq12"></div> <div class="sq sq13"></div> <div class="sq sq14"></div> </div> <script src="/js/index.js"></script> </body> </html> Путь к css и js прописываем свои CSS: Код * { margin: 0; padding: 0; outline: 0; border: 0; } html, body, .wrapper { display: block; width: 100%; height: 100%; background: #fff; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); overflow: hidden; } .sq { display: block; width: 920px; height: 920px; background: rgba(0,0,0,0.25); position: absolute; top: 0; left: 0; translate } .sq0 { background: url('http://web-mas.ru/demo/kisa/csZBTWg.png') center no-repeat; z-index: 99; } .sq1 { background: url('http://web-mas.ru/demo/kisa/Nx1ynN8.png') center no-repeat; z-index: 98; } .sq2 { background: url('http://web-mas.ru/demo/kisa/mjxuojh.png') center no-repeat; z-index: 97; } .sq3 { background: url('http://web-mas.ru/demo/kisa/Lco4D68.png') center no-repeat; z-index: 96; } .sq4 { background: url('http://web-mas.ru/demo/kisa/6ECfCYU.png') center no-repeat; z-index: 95; } .sq5 { background: url('http://web-mas.ru/demo/kisa/69f1r1R.png') center no-repeat; z-index: 94; } .sq6 { background: url('http://web-mas.ru/demo/kisa/T2aLa4j.png') center no-repeat; z-index: 93; } .sq7 { background: url('http://web-mas.ru/demo/kisa/ZFeqswq.png') center no-repeat; z-index: 92; } .sq8 { background: url('http://web-mas.ru/demo/kisa/pROjk3i.png') center no-repeat; z-index: 91; } .sq9 { background: url('http://web-mas.ru/demo/kisa/CHTO2AD.png') center no-repeat; z-index: 90; } .sq10 { background: url('http://web-mas.ru/demo/kisa/YWXzrsV.png') center no-repeat; z-index: 89; } .sq11 { background: url('http://web-mas.ru/demo/kisa/whx7JDJ.png') center no-repeat; z-index: 88; } .sq12 { background: url('http://web-mas.ru/demo/kisa/I4Y5DMd.png') center no-repeat; z-index: 87; } .sq13 { background: url('http://web-mas.ru/demo/kisa/4oN40ZA.png') center no-repeat; z-index: 86; } .sq14 { background: url('http://web-mas.ru/demo/kisa/w6U9R8c.png') center no-repeat; z-index: 85; } JS: Код // 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 (function() { 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); }; }()); var sqs = document.getElementsByClassName('sq'); var body = document.getElementsByTagName('body')[0]; var mousePos = {x: 0, y:0}; var delay = .5; body.addEventListener('mousemove', function(e){ mousePos.x = e.clientX; mousePos.y = e.clientY; },false); body.addEventListener('touchstart', function(e){ mousePos.x = e.touches[0].clientX; mousePos.y = e.touches[0].clientY; }) body.addEventListener('touchmove', function(e){ mousePos.x = e.touches[0].clientX; mousePos.y = e.touches[0].clientY; }) function render() { //console.log('render. mousePos.x=',mousePos.x) for (var i = 0; i < sqs.length; i++) { var elLeft = parseFloat(sqs[i].style.left||0); var elTop = parseFloat(sqs[i].style.top||0); var leftDist = elLeft + 460 - mousePos.x; var topDist = elTop + 460 - mousePos.y; // console.log("leftDist: ", leftDist, 'mousePos.x',mousePos.x) sqs[i].style.left = elLeft - (leftDist / ( 1 + i*delay)) + "px"; sqs[i].style.top = elTop - (topDist / (1+ i*delay)) + "px"; } window.requestAnimationFrame(render); } window.requestAnimationFrame(render) | |
|
Демо Просмотров: 2224
| 17.06.2014, 23:10 |
| Просмотров: 2224 | Загрузок: 0 | | |
Рекомендую к прочтению
 Игровой шаблон Dota для uCoz |  Suerte white шаблон для Ucoz |
 Sakura шаблон для Ucoz |  Объемный индикатор загрузки для сай... |
 HTML онлайн редактор для проверки с... |  Feel the Music шаблон для Ucoz |
| Всего комментариев: 0 | |
Disqus comments
comments powered by Disqus| HTML | |
| BB-Code | |
| Ссылка |
