В этой статье будет показана первая анимация, а в следующей расскажу уже о второй. Там будет указатель в виде компаса. Взял я скрипт, немножко его подправил и изменил принцип вывода изображения. Так же вместо кота смотрящего в бинокль, я добавил известного котика - Саймона из мультфильма Simon's Cat. Как и в исходнике предлагаю использовать данный скрипт на страницах типа 404. Конечно же все зависит от Вашей фантазии. Можете приспособить его для каких нибудь других целей. То что выйдет после установки себе на сайт данного материала, можете посмотреть ниже в примере, а также скачать исходники.
Понравилось? Если да, то приступим к описанию, как это работает и как добавить на свой сайт.
В первую очередь, давайте добавим HTML разметку нашей анимации.
<div id="cat"> <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>
По разметке, все просто. Имеем родительский блок с id - cat. Внутри него два блока отвечающие за глаза, внутри которых блоки отвечающие за зрачки. Получается мы определяем всего нашего кота, потом две зоны, а именно зоны глаз, внутри которых и будут двигаться зрачки. Данный код добавляете в то место сайта где хотите увидеть картинку с анимацией.
Следующим этапом будет добавление стилей, для корректного отображения будущей анимации.
#cat{
position: relative;
width: 100%;
}
#cat:before{
content:'';
width: 587px;
background: url(nofound.png) center top no-repeat;
height:410px;
position: absolute;
left:50%;
margin-left:-293px;
}
.cat-eye{
position: absolute;
display: none;
width: 60px;
height: 61px;
}
.cat-eyeball{
position: absolute;
left: 22.5px;
top: 24.5px;
width: 16px;
height: 16px;
background: url(eyes.png);
}
#cat-eye-left {
top: 82px;
left: 50%;
margin-left:-75px;
}
#cat-eye-right {
top: 82px;
left: 50%;
margin-left:-5px;
}
Если Вы хоть немного разбираетесь в CSS то тут все просто, а я надеюсь, что это так ибо если Вы решили самостоятельно добавлять скрипты к своему сайту, то как минимум изучаете и разбираетесь в элементарных, начальных понятиях. В противном случаи, рекомендую сначала изучить азы, а уже потом заниматься подобными доработками своего сайта. Вернемся к материалу.
Важно обратить внимание, что фон с котом задается псевдоэлементу :before для блока #cat. Следует, так же правильно указать путь к изображению. Чтобы получить все изображения - скачайте исходники по ссылке выше. Теперь по глазам и зрачкам.
- #cat - Основной блок, область, где будет картинка и анимация глаз.
- #cat:before - Псевдоэлемент для добавления общего фона. В данном случаи кот Саймон. Можете добавить другую картинку, но тогда следует правильно разместить область глаз на ней.
- .cat-eye - Это общий класс для двух глаз (не картинка, а именно область для зрачков). Задается размер по которому будет бегать зрачок. В данной ситуации -60x61px
- .cat-eyeball - Уже сами зрачки. Задаем положение относительно глаз, размер и самое главное указываем путь к картинке - eyes.png. Если картинки не лежат в той же папке что и стили, то укажите правильный путь.
- #cat-eye-left и #cat-eye-right - ID для левого и правого глаза. Расположение зон для движения зрачков. Если поменяете основную картинку, то в этих параметрах нужно будет менять расположение относительно родительского блока - #cat
Теперь пришла очередь самого скрипта, но для его работы сначала нужна библиотека jQuery. Если она у Вас подключена, то можно пропустить этот шаг. В системах управления она есть по умолчанию, если сайт самописный то нужно смотреть. Если ее все же нет, то нужно добавить ее. делается это или в шапке или в подвале сайта, добавлением такой строки:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Если библиотеку Вы добавили в шапке, то скрипт обязательно должен быть в подвале. Если библиотека тоже в подвале, то после нее добавляете от такой вот код:
<script type="text/javascript">
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 + 25;
var r = 10, x , y, x2, y2, isEyeProcessed = false;
$('html').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;}});
</script>
Расписывать работу скрипта не буду, обращу внимание лишь на некоторые моменты. Первое - это две первых строки. В них указаны айди левого и правого лаза. если Вы их переименуете в стилях и HTML, то сделать это нужно и в самом скрипте.
Второе - это область слежения за курсором. В данном скрипте в 7 строке указан - html. То есть по сути вся страница. Иногда используется body. Но если страница не полная и подвал не прижат к низу страницы, бывает что body лишь на пол страницы и выходя за его пределы, скрипт перестанет работать, так что лучше - html. Так же можно задать конкретный блок, внутри которого будет слежение за курсором, в то время, как на остальной странице это не будет происходить. В таком случаи вместо html нужно указать айди блок, например #block_name. Поместить HTML код из этой статьи внутрь блока с айди - #block_name и все.
Вот и все что нужно для установки данного скрипта на свой сайт. Как и писал в начале, данный скрипт не несет особой пользы и существует лишь для придания Вашему сайту необычного вида.
На этом все, спасибо за внимание. 🙂
