Изменение формы курсора при наведении на ссылку
Эффект двойного курсора, когда за привычной стрелкой двигается кружок. Когда наводим на элемент с определенным классом, например на ссылку, то кружок плавно увеличивается в размере. Для придания плавности движения кружку используется библиотека GSAP.Для демонстрации эффекта сверстана простенькая страничка. Но нас будет интересовать только кружок следующий за курсором мыши.
HTML
<div class="js-pointer pointer">
<div class="pointer__circle"></div>
</div>CSS
Стили кружка.pointer {
position: absolute;
width: 100px;
height: 100px;
pointer-events: none;
z-index: 100;
top: 50%;
left: 50%;
opacity: 0
}
.pointer .pointer__circle {
position: absolute;
top: 50%;
transform: scale(1) translateY(-50%);
left: 0;
right: 0;
margin: 0 auto;
width: 10px;
height: 10px;
background: #4FC3F7;
border-radius: 50%;
transition: all .5s cubic-bezier(.37, .01, 0, .98)
}
.pointer.hide .pointer__circle {
transition: all .3s;
opacity: .2;
width: 60px;
height: 60px
}JS
В конце документа подключаем GSAP для плавной анимации и скрипт кружка:<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<script src="js/index.js"></script>Тут вызываем функцию trackMouse() с двумя параметрами.
Первый параметр определяет класс, селектор элемента, при наведении на который кружок будет масштабироваться.
Второй параметр это селектор самого кружка.
window.onload = function(){
trackMouse('.hoverable', '.js-pointer');
}
function trackMouse(hover, pointer) {
var $hover = document.querySelectorAll(hover);
var $pointer = document.querySelector(pointer);
var off = 50;
var first = !0;
function mouseX(evt) {
if (!evt) evt = window.event;
if (evt.pageX) return evt.pageX;
else if (evt.clientX) return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
else return 0
}
function mouseY(evt) {
if (!evt) evt = window.event;
if (evt.pageY) return evt.pageY;
else if (evt.clientY) return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
else return 0
}
function follow(evt) {
if (first) {
first = !1;
$pointer.style.opacity = 1;
}
TweenMax.to($pointer, .7, {
left: (parseInt(mouseX(evt)) - off) + 'px',
top: (parseInt(mouseY(evt)) - off) + 'px',
ease: Power3.easeOut
});
}
document.onmousemove = follow;
(function hoverable(){
$hover.forEach(function(item){
item.addEventListener('mouseover', function(){
$pointer.classList.add('hide');
});
item.addEventListener('mouseout', function(){
$pointer.classList.remove('hide');
});
})
})();
}Ссылки
