Загрузка...

Анимированное html сердце

Тема в разделе Frontend создана пользователем krutyshkin 5 фев 2025. 253 просмотра

Загрузка...
Сортировать
  1. krutyshkin
    Кому понравилось (5) Скопировать BBCode
    krutyshkin Автор темы 5 фев 2025 148 1124 6 фев 2019
    Как выглядит:


    HTML
    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Document</title>
    
    <style>
    
        canvas {
    
            position: absolute;
    
            left: 0;
    
            top: 0;
    
            width: 100%;
    
            height: 100%;
    
            background-color: rgba(0, 0, 0, .2);
    
        }
    
    </style>
    
</head>
    
<body>
    
    <canvas id="heart"></canvas>
    

    
    <script>
    
        window.requestAnimationFrame =
    
            window.__requestAnimationFrame ||
    
            window.requestAnimationFrame ||
    
            window.webkitRequestAnimationFrame ||
    
            window.mozRequestAnimationFrame ||
    
            window.oRequestAnimationFrame ||
    
            window.msRequestAnimationFrame ||
    
            (function () {
    
                return function (callback, element) {
    
                    var lastTime = element.__lastTime;
    
                    if (lastTime === undefined) {
    
                        lastTime = 0;
    
                    }
    
                    var currTime = Date.now();
    
                    var timeToCall = Math.max(1, 33 - (currTime - lastTime));
    
                    window.setTimeout(callback, timeToCall);
    
                    element.__lastTime = currTime + timeToCall;
    
                };
    
            })();
    
        window.isDevice = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(((navigator.userAgent || navigator.vendor || window.opera)).toLowerCase()));
    
        var loaded = false;
    
        var init = function () {
    
            if (loaded) return;
    
            loaded = true;
    
            var mobile = window.isDevice;
    
            var koef = mobile ? 0.5 : 1;
    
            var canvas = document.getElementById('heart');
    
            var ctx = canvas.getContext('2d');
    
            var width = canvas.width = koef * innerWidth;
    
            var height = canvas.height = koef * innerHeight;
    
            var rand = Math.random;
    
            ctx.fillStyle = "rgba(0,0,0,1)";
    
            ctx.fillRect(0, 0, width, height);
    

    
            var heartPosition = function (rad) {
    
                //return [Math.sin(rad), Math.cos(rad)];
    
                return [Math.pow(Math.sin(rad), 3), -(15 * Math.cos(rad) - 5 * Math.cos(2 * rad) - 2 * Math.cos(3 * rad) - Math.cos(4 * rad))];
    
            };
    
            var scaleAndTranslate = function (pos, sx, sy, dx, dy) {
    
                return [dx + pos[0] * sx, dy + pos[1] * sy];
    
            };
    

    
            window.addEventListener('resize', function () {
    
                width = canvas.width = koef * innerWidth;
    
                height = canvas.height = koef * innerHeight;
    
                ctx.fillStyle = "rgba(0,0,0,1)";
    
                ctx.fillRect(0, 0, width, height);
    
            });
    

    
            var traceCount = mobile ? 20 : 50;
    
            var pointsOrigin = [];
    
            var i;
    
            var dr = mobile ? 0.3 : 0.1;
    
            for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 210, 13, 0, 0));
    
            for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 150, 9, 0, 0));
    
            for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 90, 5, 0, 0));
    
            var heartPointsCount = pointsOrigin.length;
    

    
            var targetPoints = [];
    
            var pulse = function (kx, ky) {
    
                for (i = 0; i < pointsOrigin.length; i++) {
    
                    targetPoints[i] = [];
    
                    targetPoints[i][0] = kx * pointsOrigin[i][0] + width / 2;
    
                    targetPoints[i][1] = ky * pointsOrigin[i][1] + height / 2;
    
                }
    
            };
    

    
            var e = [];
    
            for (i = 0; i < heartPointsCount; i++) {
    
                var x = rand() * width;
    
                var y = rand() * height;
    
                e[i] = {
    
                    vx: 0,
    
                    vy: 0,
    
                    R: 2,
    
                    speed: rand() + 5,
    
                    q: ~~(rand() * heartPointsCount),
    
                    D: 2 * (i % 2) - 1,
    
                    force: 0.2 * rand() + 0.7,
    
                    f: "hsla(0," + ~~(40 * rand() + 60) + "%," + ~~(60 * rand() + 20) + "%,.3)",
    
                    trace: []
    
                };
    
                for (var k = 0; k < traceCount; k++) e[i].trace[k] = { x: x, y: y };
    
            }
    

    
            var config = {
    
                traceK: 0.4,
    
                timeDelta: 0.01
    
            };
    

    
            var time = 0;
    
            var loop = function () {
    
                var n = -Math.cos(time);
    
                pulse((1 + n) * .5, (1 + n) * .5);
    
                time += ((Math.sin(time)) < 0 ? 9 : (n > 0.8) ? .2 : 1) * config.timeDelta;
    
                ctx.fillStyle = "rgba(0,0,0,.1)";
    
                ctx.fillRect(0, 0, width, height);
    
                for (i = e.length; i--;) {
    
                    var u = e[i];
    
                    var q = targetPoints[u.q];
    
                    var dx = u.trace[0].x - q[0];
    
                    var dy = u.trace[0].y - q[1];
    
                    var length = Math.sqrt(dx * dx + dy * dy);
    
                    if (10 > length) {
    
                        if (0.95 < rand()) {
    
                            u.q = ~~(rand() * heartPointsCount);
    
                        }
    
                        else {
    
                            if (0.99 < rand()) {
    
                                u.D *= -1;
    
                            }
    
                            u.q += u.D;
    
                            u.q %= heartPointsCount;
    
                            if (0 > u.q) {
    
                                u.q += heartPointsCount;
    
                            }
    
                        }
    
                    }
    
                    u.vx += -dx / length * u.speed;
    
                    u.vy += -dy / length * u.speed;
    
                    u.trace[0].x += u.vx;
    
                    u.trace[0].y += u.vy;
    
                    u.vx *= u.force;
    
                    u.vy *= u.force;
    
                    for (k = 0; k < u.trace.length - 1;) {
    
                        var T = u.trace[k];
    
                        var N = u.trace[++k];
    
                        N.x -= config.traceK * (N.x - T.x);
    
                        N.y -= config.traceK * (N.y - T.y);
    
                    }
    
                    ctx.fillStyle = u.f;
    
                    for (k = 0; k < u.trace.length; k++) {
    
                        ctx.fillRect(u.trace[k].x, u.trace[k].y, 1, 1);
    
                    }
    
                }
    
                //ctx.fillStyle = "rgba(255,255,255,1)";
    
                //for (i = u.trace.length; i--;) ctx.fillRect(targetPoints[i][0], targetPoints[i][1], 2, 2);
    

    
                window.requestAnimationFrame(loop, canvas);
    
            };
    
            loop();
    
        };
    

    
        var s = document.readyState;
    
        if (s === 'complete' || s === 'loaded' || s === 'interactive') init();
    
        else document.addEventListener('DOMContentLoaded', init, false);
    
    </script>
    
</body>
    
</html>
     
    5 фев 2025
  2. CEKC_TEPMuHATOP
    Скопировать BBCode
    CEKC_TEPMuHATOP 5 фев 2025 Больше халявы WB :righthand: t.me/cheapwildb :lefthand:
    ебать прикольно, только где такое юзать
     
    5 фев 2025
    1. krutyshkin Автор темы
      CEKC_TEPMuHATOP, cайт визитка к примеру. Везде можно найти применение
      5 фев 2025
  3. rikksons
    Скопировать BBCode
    rikksons 5 фев 2025 15 9 апр 2019
    [IMG] В сайт визитку я бы такое не кидал
     
    5 фев 2025 Изменено
  4. Роснефть
    Кому понравилось (1) Скопировать BBCode
    Роснефть 13 мар 2025 Залью полный бак 2186 18 июн 2017

    Прикольно получилось
     
    13 мар 2025
    1. krutyshkin Автор темы
      13 мар 2025
    2. cerdicor
      19 мар 2025
Top