Изменить размер курсора при наведении

Тема в разделе "JavaScript", создана пользователем Phnataly, 28 июн 2020.

XEvil 4.0 Релиз Состоялся!
  1. Phnataly

    Phnataly Создатель

    Регистр.:
    22 июн 2017
    Сообщения:
    49
    Симпатии:
    37
    Помогите пожалуйста с кодом, не могу изменить размер указателя мыши при наведении.
    код отвечающий за изменение курсора. При наведении круг становится очень большой.

    Код:
    <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),
                    })
                ]);
        }
    
    }