网站首页炫酷动态背景实现

程序员文章站 2022-05-26 16:45:29

...

网站首页炫酷动态背景实现

网站首页炫酷动态背景实现 实现过程

先来一个html简单的显示界面

<!doctype html>
<html>
  <head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body style="margin: 0; overflow: hidden;">
  </body>
</html>

让后拉出js文件
远程js文件可以直接调用
src=“http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.js”
本地js文件如下

var streams = [];
var fadeInterval = 1.6;
var symbolSize = 14;

function setup() {
  createCanvas(
    window.innerWidth,
    window.innerHeight
  );
  background(0);

  var x = 0;
  for (var i = 0; i <= width / symbolSize; i++) {
    var stream = new Stream();
    stream.generateSymbols(x, random(-2000, 0));
    streams.push(stream);
    x += symbolSize
  }

  textFont('Consolas');
  textSize(symbolSize);
}

function draw() {
  background(0, 150);
  streams.forEach(function(stream) {
    stream.render();
  });
}

function Symbol(x, y, speed, first, opacity) {
  this.x = x;
  this.y = y;
  this.value;

  this.speed = speed;
  this.first = first;
  this.opacity = opacity;

  this.switchInterval = round(random(2, 25));

  this.setToRandomSymbol = function() {
    var charType = round(random(0, 5));
    if (frameCount % this.switchInterval == 0) {
      if (charType > 1) {
        // set it to Katakana
        this.value = String.fromCharCode(
          0x30A0 + round(random(0, 96))
        );
      } else {
        // set it to numeric
        this.value = round(random(0,9));
      }
    }
  }

  this.rain = function() {
    this.y = (this.y >= height) ? 0 : this.y += this.speed;
  }

}

function Stream() {
  this.symbols = [];
  this.totalSymbols = round(random(5, 35));
  this.speed = random(5, 22);

  this.generateSymbols = function(x, y) {
    var opacity = 255;
    var first = round(random(0, 4)) == 1;
    for (var i =0; i <= this.totalSymbols; i++) {
      symbol = new Symbol(
        x,
        y,
        this.speed,
        first,
        opacity
      );
      symbol.setToRandomSymbol();
      this.symbols.push(symbol);
      opacity -= (255 / this.totalSymbols) / fadeInterval;
      y -= symbolSize;
      first = false;
    }
  }

  this.render = function() {
    this.symbols.forEach(function(symbol) {
      if (symbol.first) {
        fill(140, 255, 170, symbol.opacity);
      } else {
        fill(0, 255, 70, symbol.opacity);
      }
      text(symbol.value, symbol.x, symbol.y);
      symbol.rain();
      symbol.setToRandomSymbol();
    });
  }
}

网站首页炫酷动态背景实现

网站首页炫酷动态背景实现

C#实现炫酷启动图-动态进度条效果

通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)

基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式

js实现3D粒子酷炫动态旋转特效

Python 数据可视化实现5种炫酷的动态图

C#实现炫酷启动图-动态进度条效果

Qt实现炫酷启动图-动态进度条

炫酷多彩的粒子效果——canvas实现前端页面背景点缀

3D炫酷雪花背景的实现

网站首页炫酷动态背景实现