Интересный эффект для курсора мыши

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


За основу взят код с этого сайта. Большое спасибо разработчику.
Создайте сайт в Pixli и в начале разметки вставьте виджет HTML-код. Не принципиально, где будет находиться наша функция, но в первой области будет проще ее редактировать и контролировать.

Добавьте изображение к вашему сайту. Его не надо выводить на экран, но в библиотеке оно должно присутствовать. Воспользуйтесь кнопкой загрузки на правой панели. Когда откроется окно, нажмите загрузить.

Именно эта картинка будет следовать за указателем мыши.
Добавьте в виджет код.
<img id="point" src="/images/images4659/1.png" 
 style="z-index: 99; position: relative; transition: left .165s ease-in, top .165s ease-in;">
<script type="text/javascript">
document.body.addEventListener("mousemove", getMouseCursor, false);
function getMouseCursor (e) {
 var point = document.querySelector("#point");
 var parentPosition = getPointer(e.currentTarget);
 var xPosition = e.clientX - parentPosition.x - (point.clientWidth / 2);
 var yPosition = e.clientY - parentPosition.y - (point.clientHeight / 2);
 point.style.left = xPosition + "px";
 point.style.top = yPosition + "px";
}
function getPointer(element) { 
 var xPos = 0;
 var yPos = 0;
 while (element) {
  if (element.tagName == "BODY") {
   var xScroll = element.scrollLeft || document.documentElement.scrollLeft;
   var yScroll = element.scrollTop || document.documentElement.scrollTop;
   xPos += (element.offsetLeft - xScroll + element.clientLeft);
   yPos += (element.offsetTop - yScroll + element.clientTop);
  } 
  else {
   xPos += (element.offsetLeft - element.scrollLeft + element.clientLeft);
   yPos += (element.offsetTop - element.scrollTop + element.clientTop);
  }
  element = element.offsetParent;
 }
 return { x: xPos, y: yPos };
}
</script>
В первой строке находится ссылка на изображение. Вам надо указать адрес собственного рисунка. Он зависит от сайта и имени файла. Для этого снова откройте каталог изображений и нажмите на ярлыке картинки правую кнопку мыши.

Скопируйте URL картинки. Вы получите вот такую строку:
http://ИМЯ_САЙТА.pixli.ru/images/images4659/mini/1.png
Вам надо убрать начало и ссылку на папку mini (в ней хранятся маленькие изображения для просмотра). Останется нужный путь:
/images/images4659/1.png
Попробуйте запустить. В итоге, куда бы вы не направили мышь, рисунок будет перемещаться следом.

Разбираем код


Чтобы понять, как это работает, необходимо иметь представление об объекте EVENT. Каждый браузер умеет работать со свойствами и методами этого класса. Это предусматривается разработчиками.
document.body.addEventListener("mousemove", getMouseCursor, false);
В строке мы добавляем «слушатель» события. У нас этой mousemove – движение мыши. Когда пользователь начинает двигать манипулятор, вызывается функция getMouseCursor.
function getMouseCursor (e) {
 var point = document.querySelector("#point");
 var parentPosition = getPointer(e.currentTarget);
 var xPosition = e.clientX - parentPosition.x - (point.clientWidth / 2);
 var yPosition = e.clientY - parentPosition.y - (point.clientHeight / 2);
 point.style.left = xPosition + "px";
 point.style.top = yPosition + "px";
}
В качестве параметра в названии передается ссылка на объект Event – переменная e. Далее мы получаем указатель на элемент рисунка. У него значение атрибута id равно «point».
В следующей строке мы получаем текущую координату мыши, вызывая функцию getPointer. Далее рассчитываем позицию курсора по горизонтали и вертикали и устанавливаем новую позицию рисунка (две последние строки).
Вернемся к тегу . Обратите внимание, что для него указан стиль:
style="z-index: 99; position: relative; transition: left .165s ease-in, top .165s ease-in;"
z-index позволяет указать слой, в котором находится рисунок. Большое значение размещает его поверх всех остальных элементов страницы. Поэтому наша картинка бегает над сайтом.
Position позволяет установить позиционирование. Чтобы у элемента появились координаты top и left, необходимо относительное позиционирование (relative). Благодаря этой элемент не выпадет из потока, но сможет перемещаться за счет изменения координат.
Transition дает возможность изменять координаты плавно. Подберите время для эффекта. У нас это сотая доля секунды (.165). easy-in – это функция смягчения, она придает плавность движению.
В функции getPointer можно указать, для какого элемента будет работать эффект. У нас это все тело документа Body.
if (element.tagName == "BODY") {}
Далее происходит вычисление позиции. Дело в том, что в каждом браузере есть несколько областей просмотра. Мы пользуемся клиентской – она исключает все панели, полосы прокрутки и т.д. Ее ширину и высоту возвращают свойства clientWidth и clientHeight.
А для вычисления смещения мыши относительно левого верхнего угла клиентской области используем методы offsetLeft и offsetTop. А свойства scrollLeft и scrollTop дают нам значение прокрутки страницы. Таким образом, вычисляя координаты мы учитываем и положение в клиентской области, и величину прокрутки. Все это дает нам смещение курсора мыши (переменные xPos и yPos).
xPos += (element.offsetLeft - element.scrollLeft + element.clientLeft);
 yPos += (element.offsetTop - element.scrollTop + element.clientTop);
Попробуйте добавить код на страницу и привлекайте пользователей необычными эффектами!
31 августа 2017, 12:41    Ivan Web-дизайн 0    5 0

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.