Phnataly
Создатель
- Регистрация
- 22 Июн 2017
- Сообщения
- 55
- Реакции
- 56
- Автор темы
- #1
Помогите пожалуйста с кодом, не могу изменить размер указателя мыши при наведении.
код отвечающий за изменение курсора. При наведении круг становится очень большой.
код отвечающий за изменение курсора. При наведении круг становится очень большой.
Код:
<div class="cursor" id="js-cursor">
<div class="cursor__inner">
<div class="cursor__follower"></div>
<div class="cursor__label">
<div class="cursor__label-text"></div>
</div>
</div>
</div>
.cursor {
position: fixed;
top: 0;
left: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
z-index: 10000;
display: none;
background: transparent !important;
}
.cursor__follower {
width: 100px;
height: 100px;
border-radius: 100%;
opacity: 100 !important;
transform: scale(0.2);
user-select: none;
pointer-events: none;
}
.cursor__inner {
position: relative;
/* width: 100px;
height: 100px;*/
}
var Cursor = function () {
var
$cursor = $('#js-cursor'),
self = this,
tl = new TimelineMax();
this.startLoading = function () {
window.$document.off('mouseenter mouseleave');
if ($cursor.length) {
revealCursor();
}
};
this.finishLoading = function () {
finishLoading();
if ($cursor.length) {
registerEventListeners();
clearCursor();
}
};
this.mouseX = 0;
this.mouseY = 0;
this.update = function () {
self.mouseX = self.mouseX + pageXOffset;
self.mouseY = self.mouseY + pageYOffset;
}
// don't launch on mobiles
if (!$cursor.length || Modernizr.touchevents) {
return;
}
var
tl = new TimelineMax(),
$follower = $('.cursor__follower'),
$labelText = $('.cursor__label-text'),
offset = parseInt(window.$html.css('marginTop'), 10),
posX = 0,
posY = 0,
cursorNoneClass = 'cursor-none',
trailingDelay = parseFloat(window.theme.animations.cursorAttractionDelay) || 0;
start();
function start() {
var moveEvt = new MouseEvent('mousemove');
if (!$cursor.length || Modernizr.touchevents) {
return;
}
TweenMax.to($cursor, 1.2, {
display: 'block',
autoAlpha: 1,
y: '-50%',
x: '-50%',
ease: Elastic.easeOut.config(1, 0.6),
});
TweenMax.to({}, 0.01, {
repeat: -1,
onRepeat: function () {
posX += (self.mouseX - posX) / 9;
posY += (self.mouseY - posY - offset) / 9;
TweenMax.to($cursor, trailingDelay, {
x: posX,
y: posY + offset,
});
}
});
registerEventListeners();
document.dispatchEvent(moveEvt);
}
function startLoading() {
if (!$cursor.length || Modernizr.touchevents) {
return;
}
tl
.stop()
.clear()
.play()
.add(function () {
revealHelper(window.theme.cursorFollower.labels.loading);
});
}
function finishLoading() {
if (!$cursor.length || Modernizr.touchevents) {
return;
}
tl
.stop()
.clear()
.play()
.add(function () {
hideHelper();
});
}
function registerEventListeners() {
window.$document
.on('mousemove', function (e) {
self.mouseX = e.clientX;
self.mouseY = e.clientY;
});
registerEventListener('a, .slider__dot, .slider__arrow, #js-burger, .js-scroll-down, .button, .audio-control', function () {
revealCursor();
}, function () {
clearCursor();
});
if (window.theme.cursorFollower.labels.slider !== '') {
registerEventListener('.slider_draggable, .dialog-lightbox-widget .swiper-container .elementor-lightbox-prevent-close', function () {
revealHelper(window.theme.cursorFollower.labels.slider);
}, function () {
hideHelper();
});
}
}
function registerEventListener(elements, fEnter, fLeave) {
window.$document
.on('mouseenter', elements, function () {
fEnter();
})
.on('mouseleave', elements, function () {
fLeave();
});
}
function revealHelper(label) {
tl
.clear()
.add(function () {
$labelText.html(label);
window.$body.addClass(cursorNoneClass);
})
.set($cursor, {
mixBlendMode: 'normal'
})
.to($follower, 0.6, {
autoAlpha: 1,
scale: 1,
ease: Elastic.easeOut.config(1, 0.6),
})
.to($labelText, 0.3, {
y: '0%',
autoAlpha: 1,
ease: Power3.easeInOut,
}, '-=0.6');
}
function hideHelper() {
tl
.clear()
.add(function () {
window.$body.removeClass(cursorNoneClass);
})
.to($labelText, 0.3, {
y: '100%',
autoAlpha: 0,
ease: Power3.easeInOut,
})
.set($cursor, {
clearProps: 'mixBlendMode'
})
.to($follower, 0.6, {
autoAlpha: 0.5,
scale: 0.2,
ease: Elastic.easeOut.config(1, 0.6),
}, '-=0.1')
.add(function () {
$labelText.html('');
});
}
function revealCursor() {
tl
.clear()
.set($cursor, {
clearProps: 'mixBlendMode'
})
.add([
TweenMax.to($labelText, 0.3, {
y: '100%',
autoAlpha: 0,
ease: Power3.easeInOut,
}),
TweenMax.to($follower, 0.6, {
autoAlpha: 0.5,
scale: 0.8,
ease: Elastic.easeOut.config(1, 0.6),
})
]);
}
function clearCursor() {
tl
.clear()
.set($cursor, {
clearProps: 'mixBlendMode'
})
.add([
TweenMax.to($labelText, 0.3, {
y: '100%',
autoAlpha: 0,
ease: Power3.easeInOut,
}),
TweenMax.to($follower, 0.6, {
autoAlpha: 0.5,
scale: 0.2,
ease: Elastic.easeOut.config(1, 0.6),
})
]);
}
}