Animated the thumbnail of a Chaturbate room on mouse hover
От
// ==UserScript== // @name Chaturbate Animate Thumbnail // @name:de Chaturbate Miniaturansicht Animieren // @name:fr Vignette Animée Chaturbate // @name:it Miniatura Animata Chaturbate // @author iXXX94 // @namespace https://sleazyfork.org/users/809625-ixxx94 // @icon https://www.google.com/s2/favicons?sz=64&domain=chaturbate.org // @description Animated the thumbnail of a Chaturbate room on mouse hover // @description:de Animieren die miniaturansicht eines Chaturbate-raums beim maus über // @description:fr Anime le vignette d'une salle Chaturbate au survol de la souris // @description:it Animata la miniatura di una stanza Chaturbate al passaggio del mouse // @copyright 2021, iXXX94 (https://sleazyfork.org/users/809625-ixxx94) // @license MIT // @version 1.3.0 // @homepageURL https://sleazyfork.org/scripts/431581-chaturbate-animate-thumbnail // @homepage https://sleazyfork.org/scripts/431581-chaturbate-animate-thumbnail // @supportURL https://sleazyfork.org/scripts/431581-chaturbate-animate-thumbnail/feedback // @require https://cdn.jsdelivr.net/npm/[email protected] // @require https://cdn.jsdelivr.net/npm/@violentmonkey/[email protected] // @match *://*.chaturbate.com/* // @exclude-match *://status.chaturbate.com/* // @exclude-match *://support.chaturbate.com/* // @run-at document-idle // @inject-into page // ==/UserScript== /* global $, VM */ (() => { VM.observe(document.body, () => { const rooms = $('#discover_root .room_list_room, #room_list .room_list_room, .followedContainer .roomElement') // if rooms exists if (rooms.length > 0) { // to be able to scale, on room list $('#room_list') .css('display', 'inline-flex') .css('overflow', 'visible') .css('white-space', 'nowrap') .css('align-content', 'flex-start') .css('justify-content', 'flex-start') .css('align-items', 'flex-start') .css('position', 'relative') .css('left', '0') .css('flex-wrap', 'wrap') $('#room_list .room_list_room') .css('transition', 'transform .1s ease-in-out') // for each room $(rooms).each((index, element) => { let timer const name = $(element).find('> a').data('room') const thumbnail = $(element).find('> a img') $(element) .mouseenter(() => { // on mouse enter // scale only on room list if ($(element).parent('#room_list').length > 0) { $(element) .css('transform-origin', 'center center') .css('transform', 'translateX(0px) scale(1.2)') .css('z-index', '999') } // animate thumbnail timer = setInterval(() => { $(thumbnail) .attr('src', `https://cbjpeg.stream.highwebmedia.com/minifwap/${name}.jpg?f=${Date.now()}`) }, 83) }) .mouseleave(() => { // on mouse leave // scale only on room list if ($(element).parent('#room_list').length > 0) { $(element) .css('transform-origin', 'center center') .css('transform', 'translateX(0px) scale(1)') .css('z-index', '0') } // stop animate thumbnail clearInterval(timer) timer = undefined }) }) return false } }) })()
