Главная » Файлы » Скрипты плагины и дополнения » Разное

Мордочка кисы

Прикольная мордочка котёнка которая двигается за курсором
И так делаем её:
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)
Поделись ссылкой с друзьями:
Просмотров:
2276
17.06.2014, 23:10
Категория: Разное | Добавил: туссин | Теги: киса, cat
Просмотров: 2276 | Загрузок: 0 | Рейтинг: 5.0/1
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
comments powered by HyperComments

Disqus comments

comments powered by Disqus
Гипер-ссылка на источник
HTML
BB-Code
Ссылка

Сообщить о неработающей ссылке

E-mail отправителя *:
Тема *:
Адрес материала *:
Адрес битой ссылки *:
Проверка *:

1
Свернуть
Развернуть чат
Необходима авторизация
0