
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