Классная фишка

Ребятки, привет! Я тут в телеграме такую прикольную фишку нашла. Вообще давно его не обновляла: работал он и работал, а тут перестал открываться, и волей-неволей пришлось заапдейтить. Они там добавили много новых фич, но меня торкнула одна — попробуйте сами!

Перейдите в профиль (тапните внизу «Профиль») и плавно поскрольте страницу, чтобы фотка профиля ушла за экран. А теперь поскрольте обратно, чтобы она вернулась. Видите, как классно? Как стекающая капелька жидкости!

Мне так запал этот эффект, что я решила его повторить. Пока сделаю чистую заготовку на HTML/CSS и чуточке JavaScript (будем использовать SVG-фильтр gooey effect и высчитывать сдвиг через window.scrollY), а потом использую этот код на каких-нибудь своих сайтах.


Стефания
https://github.com/ST3PH-X



P.S. Ниже делюсь базовым шаблоном. Забирайте себе в копилку кодинга!

html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: sans-serif;
            background: #111;
            color: #fff;
            overflow-x: hidden;
        }
        .container {
            height: 200vh; /* Чтобы было куда скроллить */
            position: relative;
        }
        /* Окно фиксации эффекта */
        .header-sticky {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            /* Тот самый магический фильтр размытия и контраста */
            filter: url('#gooey');
            pointer-events: none;
        }
        /* Главный круг (аватарка) */
        .avatar {
            width: 120px;
            height: 120px;
            background: #2481cc;
            border-radius: 50%;
            position: absolute;
            top: 50px;
            transition: transform 0.05s linear;
        }
        /* Базовая точка, от которой "отрывается" капля */
        .base-drop {
            width: 120px;
            height: 40px;
            background: #2481cc;
            position: absolute;
            top: 50px;
            border-radius: 50%;
            opacity: 0.8;
        }
        .content {
            padding-top: 350px;
            text-align: center;
            font-size: 1.2rem;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="header-sticky">
            <div class="base-drop"></div>
            <div class="avatar" id="avatar"></div>
        </div>
       
        <div class="content">
            <h2>Листай вниз!</h2>
            <p>Смотри, как аватарка превращается в каплю при скролле.</p>
        </div>
    </div>

    <!-- SVG Фильтр для создания эффекта тягучей жидкости -->
    <svg xmlns="http://w3.org" version="1.1" style="display:none;">
        <defs>
            <filter id="gooey">
                <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
                <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10" result="gooey" />
                <feBlend in="SourceGraphic" in2="gooey" />
            </filter>
        </defs>
    </svg>

    <script>
        const avatar = document.getElementById('avatar');
       
        window.addEventListener('scroll', () => {
            let dy = window.scrollY;
            
            // Плавное натяжение капли в зависимости от скролла
            if (dy < 150) {
                avatar.style.transform = `translateY(${dy * 0.8}px) scaleX(${1 - dy*0.002}) scaleY(${1 + dy*0.004})`;
            } else {
                // Эффект отрыва, когда проскроллили слишком далеко
                avatar.style.transform = `translateY(${dy}px) scale(0)`;
            }
        });
    </script>
</body>
</html>