Загрузка...

Funny
We put the character in the angle of the screen (PNG | GIF | Webp)

Thread in Extentions created by AnimeHeHe Sep 16, 2025. 369 views

  1. AnimeHeHe
    AnimeHeHe Topic starter Sep 16, 2025 https://lolz.live/threads/7680775/
    Who's liked this post (5)
    Чтобы не скучать, добавляем себе аниме персонажа [IMG]
    ​
    Для установки необходимо расширение tampermonkey

    После успешной загрузки, берете понравившийся вариант кода и вставляете в расширение, внутри кода есть подсказки, как подогнать все мелочи под себя

    Также я оставлю некоторые подсказки ниже    ​

    Всего есть 4 варианта:
    ​
    Видео лолз не пропускат, гифки больше 200мб тоже, так что гифки будут в 10 фпс

    [IMG]

    Чтобы поставить свою картинку, загружаем ее с локального диска на сервисы по типу Imgur, а лучше на лолз, чтобы точно не снесли

    после вставляем в код(место подписано) и все, радуемся

    Code
    // ==UserScript==
    
// @name         Аниме
    
// @namespace    http://tampermonkey.net/
    
// @version      1.0
    
// @author       AnimeHeHe
    
// @match        https://lolz.live/*
    
// @match        https://*lolz.live/*
    
// @grant        none
    
// ==/UserScript==
    

    
(function() {
    
    'use strict';
    

    
    let character = document.createElement('div');
    
    character.style.cssText = `
    
        position: fixed;
    
        width: 400px;/* Ширина */
    
        height: 500px;/* Высота */
    
        right: 100px;/* Сдвиг влево */
    
        bottom: 0px;/* Сдвиг вверх */
    
        background: url('https://nztcdn.com/files/32db45c1-919b-4034-b368-2c78a81271ba.webp') no-repeat; /* Сюда вставляем ссылку */
    
        background-size: cover;
    
        z-index: 9999;
    
        pointer-events: none;
    
    `;
    
    document.body.appendChild(character);
    
})();
    ​
    [IMG]

    Здесь для установки своей собственной картинки придется немного поработать в фотошопе, так как скрипту нужно аж 3 картинки:

    задник - тело

    сами глазки

    веки, закрывающие глаза

    ВАЖНО! Когда будете сохранять слои, убедитесь, что размер холста у всех одинаковый, иначе придется подгонять слои в коде

    Code
    // ==UserScript==
    
// @name         Глаза
    
// @namespace    http://tampermonkey.net/
    
// @version      1.0
    
// @author       AnimeHeHe
    
// @match        https://lolz.live/*
    
// @match        https://*lolz.live/*
    
// @grant        GM_addStyle
    
// ==/UserScript==
    

    
(function() {
    
    'use strict';
    

    
    GM_addStyle(`
    
        #character-container {
    
            position: fixed;
    
            right: 20px;
    
            bottom: 0px;
    
            width: 300px;
    
            height: 300px;
    
            z-index: 9999;
    
            pointer-events: none;
    
        }
    

    
        .character-layer {
    
            position: absolute;
    
            top: 0;
    
            left: 0;
    
            width: 100%;
    
            height: 100%;
    
            pointer-events: none;
    
            background-size: contain;
    
            background-repeat: no-repeat;
    
            background-position: center;
    
        }
    
        #character-back-layer {
    
            background-image: url('https://nztcdn.com/files/e689be51-bdd4-463b-9a59-c7aa1b253b56.webp');//верхний слой
    
            z-index: 1;
    
        }
    
        #character-eyes-layer {
    
            background-image: url('https://nztcdn.com/files/9c03c13d-b40d-4417-9000-5e1d9d9258c4.webp');//глаза
    
            z-index: 2;
    

    
            transition: transform 0.1s ease-out;//регулировка плавности движения глаз
    
        }
    
        #character-front-layer {
    
            background-image: url('https://nztcdn.com/files/97bd5248-476c-42c6-af23-e3c2e64b6f49.webp');//нижний слой
    
            z-index: 3;
    
        }
    
    `);
    

    
  let container = document.createElement('div');
    
    container.id = 'character-container';
    

    
    let backLayer = document.createElement('div');
    
    backLayer.id = 'character-back-layer';
    
    backLayer.className = 'character-layer';
    

    
    let eyesLayer = document.createElement('div');
    
    eyesLayer.id = 'character-eyes-layer';
    
    eyesLayer.className = 'character-layer';
    

    
    let frontLayer = document.createElement('div');
    
    frontLayer.id = 'character-front-layer';
    
    frontLayer.className = 'character-layer';
    

    
    container.appendChild(backLayer);
    
    container.appendChild(eyesLayer);
    
    container.appendChild(frontLayer);
    
    document.body.appendChild(container);
    

    
    const MAX_OFFSET_X = 10;  // смещение глаз влево/вправо
    
    const MAX_OFFSET_Y = 8;  // смещение глаз вверх/вниз
    

    
    function moveEyesToMouse(e) {
    

    
        const viewportWidth = window.innerWidth;
    
        const viewportHeight = window.innerHeight;
    

    
        // коректировка точки отсчета движения глаз(меняем последнее значение от 0 до 1)
    
        let normalizedX = (e.clientX / viewportWidth) * 2 - 0.8;
    
        let normalizedY = (e.clientY / viewportHeight) * 2 - 0.8;
    

    
        normalizedX = Math.max(-1, Math.min(1, normalizedX));
    
        normalizedY = Math.max(-1, Math.min(1, normalizedY));
    

    
        let offsetX = normalizedX * MAX_OFFSET_X;
    
        let offsetY = normalizedY * MAX_OFFSET_Y;
    

    
        eyesLayer.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
    

    
        console.log(`Cursor: ${e.clientX}, ${e.clientY} | Norm: ${normalizedX.toFixed(2)}, ${normalizedY.toFixed(2)} | Offset: ${offsetX.toFixed(1)}, ${offsetY.toFixed(1)}`);
    
    }
    

    
    document.addEventListener('mousemove', moveEyesToMouse);
    

    
})();
    ​
    [IMG]

    В данном случае слоя всего два - голова и тело, делать все также, как и в предыдущем варианте

    Code
    // ==UserScript==
    
// @name         Головатряс
    
// @namespace    http://tampermonkey.net/
    
// @version      1.0
    
// @author       AnimeHeHe
    
// @match        https://lolz.live/*
    
// @match        https://*lolz.live/*
    
// @grant        GM_addStyle
    
// ==/UserScript==
    

    
(function() {
    
    'use strict';
    

    
    GM_addStyle(`
    
        #head-container {
    
            position: fixed;
    
            right: 50px;
    
            bottom: 0px;
    
            width: 400px;
    
            height: 300px;
    
            z-index: 9999;
    
            pointer-events: none;
    
        }
    
        #head-back-layer {
    
            position: absolute;
    
            width: 100%;
    
            height: 100%;
    
            background: url('https://nztcdn.com/files/009405d5-f300-46d0-a191-5c3cbf4dd57b.webp') no-repeat;/* тело */
    
            background-size: contain;
    
            background-position: center bottom;
    
            pointer-events: none;
    
        }
    
        #head-rotating-layer {
    
            position: absolute;
    
            width: 100%;
    
            height: 100%;
    
            background: url('https://nztcdn.com/files/28a4fb2b-0353-4e59-b8c5-46d6bf01e448.webp') no-repeat; /* голова */
    
            background-size: contain;
    
            background-position: center bottom;
    
            pointer-events: none;
    
            transition: transform 0.1s ease; //плавность анимации
    
            transform-origin: center 55%; //точка вращения головы
    
        }
    
    `);
    

    
    let container = document.createElement('div');
    
    container.id = 'head-container';
    

    
    let backLayer = document.createElement('div');
    
    backLayer.id = 'head-back-layer';
    

    
    let rotatingLayer = document.createElement('div');
    
    rotatingLayer.id = 'head-rotating-layer';
    

    
    container.appendChild(backLayer);
    
    container.appendChild(rotatingLayer);
    
    document.body.appendChild(container);
    

    
    const MAX_TILT_ANGLE = 15;
    
    const NEUTRAL_RETURN_TIME = 10000;
    

    
    let lastKnownYPosition = null;
    
    let returnToNeutralTimeout = null;
    

    
    function tiltHeadToMouse(e) {
    

    
        lastKnownYPosition = e.clientY;
    

    
        if (returnToNeutralTimeout) {
    
            clearTimeout(returnToNeutralTimeout);
    
            returnToNeutralTimeout = null;
    
        }
    

    
        const viewportHeight = window.innerHeight;
    
        let normalizedY = (lastKnownYPosition / viewportHeight) * 2 - 1;
    
        normalizedY = Math.max(-1, Math.min(1, normalizedY));
    

    
        let tiltAngle = -normalizedY * MAX_TILT_ANGLE;
    
        rotatingLayer.style.transform = `rotate(${tiltAngle}deg)`;
    
    }
    

    
    function smoothlyReturnToNeutral() {
    
        if (returnToNeutralTimeout) return;
    

    
        returnToNeutralTimeout = setTimeout(() => {
    
            rotatingLayer.style.transform = 'rotate(0deg)';
    
            lastKnownYPosition = null;
    
        }, NEUTRAL_RETURN_TIME);
    
    }
    

    
    function resetHeadTilt() {
    
        smoothlyReturnToNeutral();
    
    }
    

    
    document.addEventListener('mousemove', tiltHeadToMouse);
    

    
    document.addEventListener('mouseenter', function(e) {
    
        if (lastKnownYPosition !== null) {
    
            tiltHeadToMouse(e);
    
        }
    
    });
    

    
    document.addEventListener('mouseleave', resetHeadTilt);
    

    

    
    document.addEventListener('mouseover', function(e) {
    
        if (e.target.tagName === 'A' || e.target.closest('a')) {
    
            smoothlyReturnToNeutral();
    
        }
    
    });
    

    
})();
    ​
    [IMG]

    Тут все просто, берем 2 заготовленные картинки, при клике на картинку, она будет сменяться другой, повторный клик отменяет анимацию

    Code
    // ==UserScript==
    
// @name         Клик
    
// @namespace    http://tampermonkey.net/
    
// @version      1.0
    
// @author       AnimeHeHe
    
// @match        https://lolz.live/*
    
// @match        https://*lolz.live/*
    
// @grant        GM_addStyle
    
// ==/UserScript==
    

    
(function() {
    
    'use strict';
    

    
    GM_addStyle(`
    
        #character-container {
    
            position: fixed;
    
            right: 100px;
    
            bottom: 0px;
    
            width: 400px;
    
            height: 500px;
    
            z-index: 9999;
    
            cursor: pointer;
    
        }
    
        #character-image {
    
            position: absolute;
    
            width: 100%;
    
            height: 100%;
    
            background-size: contain;
    
            background-repeat: no-repeat;
    
            background-position: center bottom;
    
            transition: opacity 1.6s ease, background-image 1.6s ease;/* устанавливаем плавность перехода между изображениями */
    
        }
    
        #character-image.default {
    
            background-image: url('https://nztcdn.com/files/7fab23dd-568f-4779-9c9e-d84c42e5a29c.webp');
    
            opacity: 1;
    
        }
    
        #character-image.alternative {
    
            background-image: url('https://nztcdn.com/files/ec4c9243-de07-4c75-b833-18c0831179e4.webp');
    
            opacity: 1;
    
        }
    
    `);
    

    
    let container = document.createElement('div');
    
    container.id = 'character-container';
    

    
    let characterImage = document.createElement('div');
    
    characterImage.id = 'character-image';
    
    characterImage.className = 'default';
    

    
    container.appendChild(characterImage);
    
    document.body.appendChild(container);
    

    
    let isDefaultImage = true;
    
    let returnTimeout = null;
    
    const RETURN_DELAY = 4000; //время продолжительности существования 2 картинки
    

    
    function switchToAlternative() {
    
        characterImage.classList.remove('default');
    
        characterImage.classList.add('alternative');
    
        isDefaultImage = false;
    

    
        returnTimeout = setTimeout(switchToDefault, RETURN_DELAY);
    
    }
    

    
    function switchToDefault() {
    
        characterImage.classList.remove('alternative');
    
        characterImage.classList.add('default');
    
        isDefaultImage = true;
    

    
        if (returnTimeout) {
    
            clearTimeout(returnTimeout);
    
            returnTimeout = null;
    
        }
    
    }
    

    
    function handleCharacterClick() {
    

    
        if (returnTimeout) {
    
            clearTimeout(returnTimeout);
    
            returnTimeout = null;
    
        }
    

    
        if (isDefaultImage) {
    

    
            switchToAlternative();
    
        } else {
    

    
            switchToDefault();
    
        }
    
    }
    

    
    container.addEventListener('click', handleCharacterClick);
    

    
})();
    ​
    Thread restrictions:
    The topic author allowed to post messages in the topic only to the following groups (and higher ranked): Artificial Intelligence, Staff Members and Curators
     
    This article was useful for you?
    You can thank the author of the topic by transferring funds to your balance
    Thank the author
    Sep 16, 2025
    1. llimonix
      avatarAnimeHeHe , :obsmoke: лучше бы что то полезное делал
      Sep 16, 2025
    2. AnimeHeHe Topic starter
      avatarllimonix , развлекаться тоже надо :animehehe:
      Sep 16, 2025
Loading...