Suivi du curseur avec une image [Plyr Video Player]

Remplacer votre curseur par une image de votre choix ? C’est possible !
Copiez la ligne de code ci-dessous :

/* Follow picture Plyr Player */
function _pit_plyr_icon_follow_mouse() {

    $(document).on('mouseenter', '.plyr', function(ev) {

        /** Variables */
        var $plyr           = $(ev.currentTarget),
            $recouvrement   = $plyr.find('.recouvrement-video'),
            $icon           = $recouvrement.find('.icon-lecture'),
            $iconImg        = $icon.find('img');

        if (!$icon.length)
            return;

        /** Set default style for the icon img */
        $iconImg.css({
            transform: 'translate(-50%, -50%)',
            transformOrigin: 'center center',
        });

        $recouvrement.css({
            cursor: 'none',
        });
        $icon.css({
            position: 'relative',
        });

    })

    $(document).on('mouseleave', '.plyr', function(ev) {

        /** Variables */
        var $plyr           = $(ev.currentTarget),
            $recouvrement   = $plyr.find('.recouvrement-video'),
            $icon           = $recouvrement.find('.icon-lecture'),
            $iconImg        = $icon.find('img');

        if (!$icon.length)
            return;

        $recouvrement.css({
            cursor: 'default',
        });
        $icon.css({
            position: 'absolute',
        });

    })

    $(document).on('mousemove', '.plyr', function(ev) {

        /** Variables */
        var $plyr           = $(ev.currentTarget),
            $recouvrement   = $plyr.find('.recouvrement-video'),
            $icon           = $recouvrement.find('.icon-lecture'),
            $iconImg        = $icon.find('img'),
            iconDelayMs     = 100;

        if (!$icon.length)
            return;

        /** SetTimeout used to have a little delay effect */
        setTimeout(() => {

            /** Change the position properties of the icon element */
            $icon.offset({
                left: ev.pageX,
                top: ev.pageY,
            });

        }, iconDelayMs);

    });

}

/** Init */
_pit_plyr_icon_follow_mouse();

 

Quelle différence entre UX et UI design ?
Wireframe : les différents types et leurs objectifs
Le manuel du lead magnet : techniques avancées pour le marketeur averti