23.6.19

Hình nền các hạt phân tử liên kết chuyển động mềm mại bằng Javascipt

Nội Dung Chính [Ẩn] [Hiển thị]
    Bài viết sẽ hướng dẫn bạn tạo hình nền các hạt phân tử chuyển động mềm mại liên kết với nhau bằng Javascript

    Sử dụng Javascript

    Bạn sử dụng đoạn Javascript bên dưới để tạo hình ảnh các hạt phân tử liên kết với nhau
        <script type="text/javascript" src="nodes.js"></script>
        <script type="text/javascript">
            var nodesjs = new NodesJs({
                id: 'nodes',
                width: window.innerWidth,
                height: window.innerHeight,
                backgroundFrom: [10, 25, 100],
                backgroundTo: [25, 50, 150],
                backgroundDuration: 4000,
                number: window.hasOwnProperty('orientation') ? 30: 100,
                speed: 20
            });
        </script>
    
    Nội dung file nodes.js
    /*
     * nodes.js is a nodes/particles animation useable for backgrounds
     *
     * http://oguzhaneroglu.com/projects/nodes.js/
     * https://github.com/rohanrhu/nodes.js
     *
     * Copyright (C) 2018, OÄŸuzhan EroÄŸlu <rohanrhu2@gmail.com>
     * Licensed under MIT
     */
    
    var NodesJs = (function (parameters) {
        t_NodesJs = this;
        t_NodesJs.id = parameters.id;
        t_NodesJs.width = parameters.width;
        t_NodesJs.height = parameters.height;
        t_NodesJs.backgroundFrom = parameters.backgroundFrom;
        t_NodesJs.backgroundTo = parameters.backgroundTo;
        t_NodesJs.backgroundDuration = parameters.backgroundDuration;
        t_NodesJs.number = parameters.number ? parameters.number: 100;
        t_NodesJs.speed = parameters.speed ? parameters.speed: 20;
    
        var canvas;
        var ctx;
        var cw;
        var ch;
    
        var t0 = Date.now();
        var dt = 0;
    
        t_NodesJs.setWidth = function (width) {
            canvas.width = width;
            cw = width;
        };
    
        t_NodesJs.setHeight = function (height) {
            canvas.height = height;
            ch = height;
        };
    
        t_NodesJs.placeNodes = function (number) {
            t_NodesJs.nodes = [];
    
            for (var i=0; i < number; i++) {
                t_NodesJs.nodes.push([
                    Math.floor(Math.random() * (cw - 0 + 1)) + 0,
                    Math.floor(Math.random() * (ch - 0 + 1)) + 0,
                    Math.random() * (Math.PI * 2 - 0 + 1) + 0
                ]);
            }
        };
    
        window[window.addEventListener ? 'addEventListener': 'attachEvent']
        (window.addEventListener ? 'load': 'onload', function () {
            canvas = document.getElementById(t_NodesJs.id);
            ctx = canvas.getContext('2d');
    
            canvas.width = t_NodesJs.width;
            canvas.height = t_NodesJs.height;
    
            cw = canvas.width;
            ch = canvas.height;
    
            t_NodesJs.placeNodes(t_NodesJs.number);
    
            var step = function () {
                window.requestAnimationFrame(step);
    
                var r = Math.floor(((Math.sin(Math.PI * 2 * Date.now() / t_NodesJs.backgroundDuration - Math.PI/2)+1)/2) * (t_NodesJs.backgroundFrom[0] - t_NodesJs.backgroundTo[0] + 1) + t_NodesJs.backgroundTo[0]);
                var g = Math.floor(((Math.sin(Math.PI * 2 * Date.now() / t_NodesJs.backgroundDuration - Math.PI/2)+1)/2) * (t_NodesJs.backgroundFrom[1] - t_NodesJs.backgroundTo[1] + 1) + t_NodesJs.backgroundTo[1]);
                var b = Math.floor(((Math.sin(Math.PI * 2 * Date.now() / t_NodesJs.backgroundDuration - Math.PI/2)+1)/2) * (t_NodesJs.backgroundFrom[2] - t_NodesJs.backgroundTo[2] + 1) + t_NodesJs.backgroundTo[2]);
    
                ctx.beginPath();
                ctx.fillStyle = 'rgb('+r+', '+g+', '+b+')';
                ctx.fillRect(0, 0, cw, ch);
                ctx.fill();
                
                t_NodesJs.nodes.forEach(function (_node, _node_i) {
                    _node[0] += Math.cos(_node[2]) * t_NodesJs.speed * (dt/1000.0);
                    _node[1] += Math.sin(_node[2]) * t_NodesJs.speed * (dt/1000.0);
    
                    if (_node[0] < 0) {
                        _node[0] = cw + (_node[0] % cw);
                    }
    
                    if (_node[0] > cw) {
                        _node[0] = _node[0] % cw;
                    }
    
                    if (_node[1] < 0) {
                        _node[1] = ch + (_node[1] % ch);
                    }
    
                    if (_node[1] > ch) {
                        _node[1] = _node[1] % ch;
                    }
    
                    ctx.fillStyle = 'rgba(255,255,255,0.3)';
    
                    ctx.beginPath();
                    ctx.arc(
                        _node[0],
                        _node[1],
                        2,
                        0,
                        Math.PI * 2,
                        true
                    );
                    ctx.fill();
    
                    t_NodesJs.nodes.forEach(function (_node2, _node2_i) {
                        if (_node_i == _node2_i) {
                            // return true;
                        }
    
                        var dx = Math.abs(_node[0] - _node2[0]);
                        var dy = Math.abs(_node[1] - _node2[1]);
                        var d = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
    
                        var alpha = 0;
    
                        if (d <= 300) {
                            alpha = 0.3 - ((0.3 * d) / 200);
                        }
    
                        ctx.strokeStyle = 'rgba(255,255,255,'+alpha+')';
    
                        ctx.beginPath();
                        ctx.moveTo(_node[0], _node[1]);
                        ctx.lineTo(_node2[0], _node2[1]);
                        ctx.stroke();
                    });
                });
    
                dt = Date.now() - t0;
                t0 = Date.now();
            };
    
            step();
        });
    });

    Sử dụng đoạn HTML để hiển thị hình nền

    <canvas id="nodes"></canvas>
    

    Cố định hình nền bằng CSS

    <style>
      body, html {
       position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
       margin: 0;
       padding: 0;
      }
      #nodes{
       position: fixed;
       top: 0;
       left: 0;
       z-index: -100;
      }
    </style>
    Cảm ơn đã theo dõi và chúc bạn thành công! ./.
    Nguồn: cssscript.com
    Bạn đang xem bài viết "Hình nền các hạt phân tử liên kết chuyển động mềm mại bằng Javascipt" tại chuyên mục: CSS , HTML , Javascript
    Xem thêm