Курсор с эффектами









Здравствуйте уважаемые веб-мастера.

Курсор с эффектом гарантированно выделит ваш сайт из миллионов других сайтов.

Скрипт имеет простые настройки с широкими возможностями.

Например, вместо элемента <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>

Желаю творческих успехов.


Запись опубликована в рубрике Уроки javascript и jQuery. Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *