Кот на сайт для uCoz

Кот на сайт для uCoz

12013-12-101047213Денис Абдуллин

Появление персонажей на сайте – не редкость, особенно популярно украшать сайты кошками, которые следят за перемещением курсора, а некоторые даже пытаются поймать курсор. Был у нас и такой. Этого кота можно установить на любой сайт, сделанном на uCoz. Он будет скромно наблюдать за действиями пользователей на сайте. Когда пользователь наведет курсор на кота, он будет застенчиво улыбаться и смотреть вверх.

Установка

Вставьте в Нижнюю часть сайта или в любой другой глобальный блок:

Код
<div id="cat">
  <div class="cat-paws"></div>
  <div class="cat-itself-wrap">
  <div class="cat-itself">
  <div id="cat-eye-left" class="cat-eye">
  <div class="cat-eyeball"></div>
  </div>
  <div id="cat-eye-right" class="cat-eye">
  <div class="cat-eyeball"></div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>

<script>
  $(function() {
  var el1 = $('#cat-eye-left'), eyeBall1 = el1.find('div');
  var el2 = $('#cat-eye-right'), eyeBall2 = el2.find('div');
  el1.show();
  el2.show();
  var x1 = el1.offset().left + 37, y1 = el1.offset().top + 15;
  var r = 6, x , y, x2, y2, isEyeProcessed = false;
  $('body').mousemove(function(e) {
  if (!isEyeProcessed) {
  isEyeProcessed = true;
  var x2 = e.pageX, y2 = e.pageY;
   
  y = ((r * (y2 - y1)) / Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1))) + y1;
  x = (((y - y1) * (x2 - x1)) / (y2 - y1)) + x1;
   
  eyeBall1.css({
  marginTop: (y - y1 + 1) + 'px',
  marginLeft: (x - x1) + 'px'
  });
  eyeBall2.css({
  marginTop: (y - y1 - 1) + 'px',
  marginLeft: (x - x1) + 'px'
  });
  isEyeProcessed = false;
  }
  });
   
  $('#cat').mousemove(function(e) {
  e.stopPropagation();
  return false;
  });
   
  });
  </script>

Вставьте следующий код в Таблицу стилей (CSS):

Код
#cat {
  position: fixed;
  right: 80px;
  bottom: 0;
  width: 146px;
  height: 55px;
}
#cat:hover .cat-itself {
  height: 103px;
}
#cat:hover .cat-eye {
  display: none !important;
}
.cat-paws {
  position: absolute;
  right: 0;
  bottom: -4px;
  width: 132px;
  height: 33px;
  z-index: 2;
  background: url(cat/cat-paws.png) no-repeat right bottom;
}
.cat-itself-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.cat-itself {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 125px;
  height: 55px;
  z-index: 0;
  background: url(cat/cat-itself.png) no-repeat;
  -webkit-transition: all 0.1s 0.1s ease-out;
  transition: all 0.1s 0.1s ease-out;
}
.cat-eye {
  position: absolute;
  display: none;
  width: 28px;
  height: 28px;
  background: url(cat/cat-eye.png);
}
.cat-eyeball {
  position: absolute;
  left: 7.5px;
  top: 7.5px;
  width: 13px;
  height: 13px;
  background: url(cat/cat-eyeball.png);
}
#cat-eye-left {
  left: 25px;
  top: 23px;
}
#cat-eye-right {
  left: 74px;
  top: 26px;
}

Посмотрите на кота для uCoz в действии, для этого откройте демо-страницу. Напоследок скажем честно, что этот кот взят с сайта конкурсного сайта uCoz. Нет, не с сайта участника, а прямо с сайта uBlogDesign.ru.


Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (13)
Сергей Борисович 2016-03-29 в 04:36 / МатериалСпам
Надо ещё рисунки найти и скачать, и это ещё не всё..

Подскажите, всё сделал как описано, но глаза у кота не двигаются, а когда на него навожу - кот подымается и видно что глаза двигаются за котом, как исправить?
То есть двигающиеся глаза надо на передний план сделать.. Всё перепробывал, что знаю, ни как не получается..

Или тут никто не подскажет?
0
Ксения Кройк 2015-04-11 в 17:07 / МатериалСпам
неполучается никак его установить! может кто помочь мне?
0
Давид Арахамия 2014-11-06 в 20:19 / МатериалСпам
А откуда скачать эти составные изображения?
На странице нет ссылки чтобы скачать.
0
Денис Абдуллин 2014-09-27 в 18:34 / Материал
Не-а
1
Даниил 2014-07-20 в 14:31 / МатериалСпам
Все работает! Просто нужно скачать все составные изображения Кота. Ну и залить их в файловый менеджер вашего сайта, создав там папку cat. В коде CSS данного скрипта можно увидеть что путь к картинкам прописан так: background: url(cat/cat-eye.png); , рекомендую поправить ссылку на background: url(/cat/cat-eye.png); ..и так у всех изображений в коде. у меня заработало после этого.
1
Dmitry 2014-06-21 в 04:17 / МатериалСпам
Не работает, все поставил как надо :С
0
White Whitov 2014-02-09 в 19:02 / МатериалСпам
кот не появился(
2
Илья Филиппов 2013-12-25 в 19:13 / МатериалСпам
А теперь отправился в будущее и нашел!
0
DEKLINE 2013-12-12 в 20:13 / МатериалСпам
года 3 назад искал)
0
Елена Иванцова 2013-12-12 в 16:37 / МатериалСпам
пребывание даже на скучном сайте станет веселее
1
Cry Deil 2013-12-11 в 22:21 / МатериалСпам
Да прикольный котик, но поздно выкладываете. Как только открылся сайт, я тут же его взял его себе :)
0
Матвей Иванов 2014-05-01 в 16:08 / МатериалСпам
Не появился всё сделал правильно
1
Павел Новосёлов 2014-09-07 в 17:03 / МатериалСпам
Cильная нагрузка на сайт будет? !
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.