Seo-Бизнес блог Progress-project

Все о создании, продвижении сайтов и заработке в интернете

Обновлённый дизайн блога Progress-project
logotip «Progress-project»
logotip «Progress-project»

Муха летающая по сайту — скрипт

Здравствуйте, рад приветствовать Вас на «Progress-project», сегодня я хочу представить Вам код Java-скрипта: мухи ползающей по экрану.

Постоянные читатели думаю уже заметили, что время от времени в зависимости от времени года на блоге появляется летающая или ползающая муха. Когда знакомые спрашивают меня, как это реализовано, я делаю вид, будто бы удивлён и говорю, что видимо где то в CMS или на сервере появилась очередная дыра. Но дыры wordpress и защиту админки мы с Вами рассматривали в прошлых статьях поэтому сегодня на этом останавливаться уже не будим а перейдём сразу непосредственно к скрипту.

Муха ползает по экрану — JavaScript

Небольшой скрипт с довольно широкими, гибкими настройками, способный увеличивать время нахождения посетителей на сайте, конечно у меня муха довольно активная и думаю не у всех хватает терпения за ней долго гоняться, но если сделать её немного помедленнее то кликом можно её прихлопнуть, то есть при клике скрипт сменяет изображение с:

на:

Вот так собственно выглядит сам скрипт:

<!-- ВСТАВЛЯЕМ МУХУ. transition:all 2s - отвечает за ее скорость -->

<a id="fly" onmouseover="fly();" href="javascript: flyClick();" onclick="this.onmouseover='';this.onclick='';" style="top: 75px; left: 30%; position: absolute; -webkit-transition: all 2s; -moz-transition: all 2s; -o-transition: all 2s; transition: all 2s;"><img onclick="javascript: src='http://ваш_сайт/fly2.png'" src="http://ваш_сайт/fly.png" border="0" alt="OyO"></a>

<script type="text/javascript"><!--
function idd(id) { return document.getElementById(id); }

//Позиция по вертикали
function totop(){ return self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop); }

// Управление мухой
function fly () {

//Определяем высоту и ширину Боди - 100px для полета мухи (чтобы без прокрутки при ее вращении). 
var hei = document.getElementsByTagName("body")[0].offsetHeight-1000;
var wi = document.getElementsByTagName("body")[0].offsetWidth-1000;

//Вращаем муху случайным образом 
idd("fly").style.transform="rotate("+(Math.random()*360)+"deg)";

//Перемещаем случайным образом
idd("fly").style.top=(Math.random()*hei)+"px";
idd("fly").style.left=(Math.random()*wi)+"px";
}
//Вставьте сюда fly (); для первого случайного полета мухи.

//Функция. При нажатии на муху замедляем ее
function flyClick() { idd('fly').style.transition='99999s'; }

//Отдельное рандомное вращение при загрузке и пока сидит. 
idd("fly").style.transform="rotate("+(Math.random()*360)+"deg)";

setInterval( function() {
//Вставьте сюда fly (); для постоянного случайного полета мухи раз в 60 секунд (можно изменить).
//Можно добавить такие же рандомы для облета мухой нужных точек.
//Например (можно в %):
//idd("fly").style.top="1000px";
//idd("fly").style.left="100px";
idd("fly").style.transform="rotate("+(Math.random()*360)+"deg)"; } , (Math.random()*60000));
//--></script>

Как видите он сопровождается довольно подробными комментариями по настройке, думаю, что разберутся все и описывать заново не имеет смысла.

Единственное это сохраните оба изображения из примера выше, загрузите их в папку темы «images» и пропишите их полный путь в коде скрипта, вместо:

  • http://ваш_сайт/fly.png и http://ваш_сайт/fly2.png.

Устанавливается наш скрипт мухи летающий по странице в самый низ файла темы «footer.php» до закрывающегося тега </body>.

На этом в общем то на сегодня у меня и всё, а в одной из следующих статей мы с Вами рассмотрим скрипт создающий эффект параллакса или относительного смещения, это когда элементы ресурса во время скроллинга (прокрутки) движутся с различной скоростью, кому это интересно подпишитесь на обновления, чтобы не пропустить.

Желаю всего доброго и до новых встреч на «Прогресс-проект»!

С уважением, автор блога!
© progress-project
★Обновлено:2016-08-24

Введите свой e-mail:

Вы можете поделиться статьёй в социальных сетях:

Комментарии к статье

1 комментарийна “Муха летающая по сайту — скрипт”
  1. Александр:

    Очень забавная штука. Давно уже хотел сделать себе на сайте что-то похожее. Спасибо за информацию.

    Ответить

Ваш комментарий

Внимание! Перед тем, как вставить в комментарий: html, php либо JavaScript, преобразуйте его в HTML сущность!

» Подписаться на комментарии по RSS
Поиск по блогу

Введите свой e-mail:

ВКонтакте Google+ Facebook RSS-лента сайта abrek-ad-abra.ru

Топ комментаторов

Виктор(6)
seoonly.ru(4)
Иван(3)
Олег(3)
Николай(3)

© 2015-2017

SEO-Бизнес блог «Progress-project».

Все материалы, опубликованные на сайте: принадлежат автору и охраняются в соответствии с законодательством РФ.

При использовании материалов сайта гиперссылка на обязательна!



seo-блог