Здравствуйте уважаемые веб-мастера.
Курсор с эффектом гарантированно выделит ваш сайт из миллионов других сайтов.
Скрипт имеет простые настройки с широкими возможностями.
Например, вместо элемента <hr> можно вставить любые картинки. Можно изменить число элементов и расстояние между ними.
Огромный простор для экспериментов со стилевым оформлением шлейфа.
В общем — дерзайте и делайте Ваш сайт неповторимым.
Код:
HTML
<div style="z-index:1"> <!--z-index задаётся всему коду-->
<div id="adot0" style="position: absolute; visibility: hidden; left: 0px; top: 0px;"><hr style="width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, white, red 40%);"></div>
<div id="adot1" style="position: absolute; left: 892px; top: 340.011px;"><hr style="width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, white, red 40%);"></div>
<div id="adot2" style="position: absolute; left: 892px; top: 375.028px;"><hr style="width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle, white, red 40%);"></div>
<div id="adot3" style="position: absolute; left: 892px; top: 405.045px;"><hr style="width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, white, red 40%);"></div>
<div id="adot4" style="position: absolute; left: 892px; top: 430.052px;"><hr style="width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle, white, red 40%);"></div>
<div id="adot5" style="position: absolute; left: 892px; top: 450.058px;"><hr style="width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, white, red 40%);"></div>
<div id="adot6" style="position: absolute; left: 892px; top: 465.068px;"><hr style="width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle, white, red 40%);"></div>
<div id="adot7" style="position: absolute; left: 892px; top: 480.058px;"><hr style="width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, white, red 40%);"></div>
<div id="adot8" style="position: absolute; left: 892px; top: 500.068px;"><hr style="width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle, white, red 40%);"></div>Javascript
<script>
var nDots = 9; // Число элементов шлейфа +1
var Xbpos = 0;
var Ybpos = 0;
var DELTAT = .01;
var SEGLEN = 10;
var SPRINGK = 10;
var MASS = 1;
var XGRAVITY = 0;
var YGRAVITY = 50;
var RESISTANCE = 10;
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 11;
var BOUNCE = 0.75;
var followmouse = true;
var dots = new Array();
init();
function init()
{
var i = 0;
for (i = 0; i < nDots; i++)
{
dots[i] = new dot(i);
}
for (i = 0; i < nDots; i++)
{
dots[i].obj.left = dots[i].X + "px";
dots[i].obj.top = dots[i].Y + "px";
}
setTimeout("startanimate()", 10);
}
function dot(i)
{
this.X = Xbpos;
this.Y = Ybpos;
this.dx = 0;
this.dy = 0;
var id = "adot" + i;
var elem = document.getElementById(id);
this.obj = elem.style;
}
function startanimate()
{
setInterval("animate()", 20);
}
function setInitPositions(dots)
{
var startloc = document.all.tags("Li");
var i = 0;
for (i = 0; i < startloc.length && i < (nDots - 1); i++)
{
dots[i+1].X = startloc[i].offsetLeft + startloc[i].offsetParent.offsetLeft - DOTSIZE;
dots[i+1].Y = startloc[i].offsetTop + startloc[i].offsetParent.offsetTop + 2*DOTSIZE;
}
dots[0].X = dots[1].X;
dots[0].Y = dots[1].Y - SEGLEN;
}
function MoveHandler(e)
{
if (window.event)
{
Xbpos = window.event.x + document.body.scrollLeft;
Ybpos = window.event.y + document.body.scrollTop;
}
else
{
Xbpos = e.pageX;
Ybpos = e.pageY;
return true;
}
}
document.onmousemove = MoveHandler;
function vec(X, Y)
{
this.X = X;
this.Y = Y;
}
function springForce(i, j, spring)
{
var dx = (dots[i].X - dots[j].X);
var dy = (dots[i].Y - dots[j].Y);
var len = Math.sqrt(dx*dx + dy*dy);
if (len > SEGLEN)
{
var springF = SPRINGK * (len - SEGLEN);
spring.X += (dx / len) * springF;
spring.Y += (dy / len) * springF;
}
}
function animate()
{
var start = 0;
if (followmouse)
{
dots[0].X = Xbpos;
dots[0].Y = Ybpos;
start = 1;
}
for (i = start ; i < nDots; i++ )
{
var spring = new vec(0, 0);
if (i > 0)
{
springForce(i-1, i, spring);
}
if (i < (nDots - 1))
{
springForce(i+1, i, spring);
}
var resist = new vec(-dots[i].dx * RESISTANCE, -dots[i].dy * RESISTANCE);
var accel = new vec((spring.X + resist.X)/MASS + XGRAVITY, (spring.Y + resist.Y)/ MASS + YGRAVITY);
dots[i].dx += (DELTAT * accel.X);
dots[i].dy += (DELTAT * accel.Y);
if (Math.abs(dots[i].dx) < STOPVEL &&
Math.abs(dots[i].dy) < STOPVEL &&
Math.abs(accel.X) < STOPACC &&
Math.abs(accel.Y) < STOPACC)
{
dots[i].dx = 0;
dots[i].dy = 0;
}
dots[i].X += dots[i].dx;
dots[i].Y += dots[i].dy;
var height, width;
if (typeof window.innerWidth != 'undefined')
{
width = window.innerWidth + window.pageXOffset;
height = window.innerHeight + window.pageYOffset;
}
else
if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
{
width = document.documentElement.clientWidth + document.body.scrollLeft;
height = document.documentElement.clientHeight + document.body.scrollTop;
}
else
{
width = document.getElementsByTagName('body')[0].clientWidth + document.body.scrollLeft;
height = document.getElementsByTagName('body')[0].clientHeight + document.body.scrollTop;
}
if (dots[i].Y >= height - DOTSIZE - 1)
{
if (dots[i].dy > 0)
{
dots[i].dy = BOUNCE * -dots[i].dy;
}
dots[i].Y = height - DOTSIZE - 1;
}
if (dots[i].X >= width - DOTSIZE)
{
if (dots[i].dx > 0)
{
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = width - DOTSIZE - 1;
}
if (dots[i].X < 0)
{
if (dots[i].dx < 0)
{
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = 0;
}
dots[i].obj.left = dots[i].X + "px";
dots[i].obj.top = dots[i].Y + "px";
}
}
</script>
</div>
Желаю творческих успехов.
В раздел >>>
Плавающий блок CSS
Вращающийся куб баннер CSS
Текст появляющийся на изображениях CSS
Блок перевёртыш CSS
Анимация для шапки сайта CSS
Логотип для сайта
В раздел
Доброго времени суток. Скорее всего что-то с вашей стороны. Только-что посмотрел — работает. Посмотрите Код страницы в отдельной вкладке и увидите куда вставлять.
Доброго дня. К сожалению не работает функция. Висит сопля. Отзывы почитал сделал как написано все тоже самое. Помогите пожалуйста. Кто то писал что не туда вставляете. Заранее спсибо.
НЕ работает, мне нужна помощь!
Пожалуйста. А то я уж собрался подробно расписать. Скрипт действительно древний. Я его тоже в гугле нашёл, но работал криво, что-то ковырял, сразу и не вспомнишь. Давно это было. Только даты публикации обновляю, в плане SEO. Ну ладно, раз всё хорошо.
Картинки нашел, невидимкой экземпляр был представлен, звиняюсь — не увидел сразу! Еще раз Спасибо за скрипт!
Добрый день! Классный скрипт, но когда-то я его уже видел, давным давно еще в начале 2000 годов! Абонент, который говорит что скрипт весит в виде сопли, не туды его вставляет, т.е. до , а нужно в весь код — вот и все дела! Спасибо за скрипт! Вопрос один, а как подцепить картинку вместо точек?
Я не про браузер. Ладно, давайте так — куда вы вставляете код скрипта, прежде чем открыть его в браузере — в редактор, CMS, песочницу?
Завтра ещё раз отправлю код на вашу почту. Возможно что-то на странице надо поправить, так как разик переделывал, но сейчас совсем нет времени в этом ковырятся.
Файл с кодом сделаю в блокноте винды, чтоб уж точно открылся
> Я же дал на почту работающий код. Зачем что-то подсовывать.
Странно, я ничего не получил…
>3. Браузер легко проверить. Откройте страницу моего сайта.
>Если работает — всё нормально.
>Вы какую программу используете для запуска скрипта?
Ну, я использую в основном Mozilly Firefox, но и в IE пытался открыть файл и в Safari и в Хроме…
Нигде не работает…
Может, загрузку скрипта надо к какому-то событию прикрутить?
Только что проверил на всякий случай — в IE тоже работает, хоть и притормаживает чуть-чуть.
1. За угловую скобку большое спасибо. Это чисто небрежно выполненная подсветка кода.
2. Я же дал на почту работающий код. Зачем что-то подсовывать.
3. Браузер легко проверить. Откройте страницу моего сайта. Если работает — всё нормально. Вы какую программу используете для запуска скрипта?
Только что проверил на всякий случай — в IE тоже работает, хоть и притормаживает чуть-чуть.
Сомнительными представляются 1-я строчка (слово script) с двумя закрывающими символами «>»
и последний тег — /div.
Что это? Небрежное вырезание js-кода из исходника? 🙁
М.б. надо в body onload=» » подсунуть какую-то функцию?
М.б. у меня вообще во всех браузерах тупо запрещено выполнение js-скриптов?
Как это проверить в IE и MzFrx?
попробуйте убрать межстрочные пробелы в js коде. Попробуйте вставить js непосредственно в html документ.
Я только-только приступил к изучению JS и не могу понять, что надо сделать, чтобы скрипт заработал.
Я вынес его в отдельный файл с расширением js. Далее в заголовке html-документа я его подключил:
В тело html-документа (…) я вставил HTML-код, приведённый выше ( и т.д. до конца).
Открываю страничку в браузере и… ничего не происходит. По середине экрана висит какая-то «сопля» и всё.
Спасибо!
Если прокручивать страницу — висюльки останутся наверху. Фиксится вот так:
1. Находим в скрипте строчку Ybpos = window.event.y + document.body.scrollTop;
2. Заменяем на: Ybpos = window.event.y + document.body.scrollTop + window.pageYOffset;