流动的图像

下载代码

html

css

分享到微信朋友圈

html

css

body {
  margin: 0;
  overflow: hidden;
  display: flex;
  height: 100vh;
  background: black;
}

canvas {
  margin: auto;
  touch-action: none;
}

input {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  width: 80%;
  height: 34px;
  max-width: 400px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
input:active {
  cursor: grabbing;
}
input::-webkit-slider-runnable-track {
  box-sizing: border-box;
  height: 6px;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
}
input::-moz-range-track {
  box-sizing: border-box;
  height: 6px;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
}
input::-ms-track {
  box-sizing: border-box;
  height: 6px;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
}
input::-webkit-slider-thumb {
  margin-top: -12px;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid black;
  -webkit-appearance: none;
  appearance: none;
  cursor: grab;
}
input::-moz-range-thumb {
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid black;
  -webkit-appearance: none;
  appearance: none;
  cursor: grab;
}
input::-ms-thumb {
  margin-top: 0px;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid black;
  -webkit-appearance: none;
  appearance: none;
  cursor: grab;
}

section {
  box-sizing: border-box;
  font-size: 30px;
  color: white;
  position: fixed;
  left: 0;
  top: 20px;
  width: 100%;
  text-align: center;
  padding: 10px 10%;
  z-index: 10;
  pointer-events: none;
  text-shadow: 0 0 3px black, 0 0 4px black, 0 0 5px black;
  background: rgba(0, 0, 0, 0.7);
}
section p {
  margin: 0;
}
@media (max-width: 500px) {
  section {
    font-size: 24px;
  }
}

JavaScript

let img;
const detail = 6;
let particles = [];
let grid = [];
let particleImage;
let ctx;
function preload() {
  img = loadImage('https://www.jq22.com/tp/6375862148079013418198320.png');
}

class Particle {
  constructor (x, y) {
    this.x = x || random(width);
    this.y = y || random(height);
    this.prevX = this.x;
    this.speed = 0;
    this.v = random(0, 0.7);
  }
  
  update (speed) {
    if (grid.length) {
      this.speed = grid[floor(this.y / detail)][floor(this.x / detail)] * 0.97;
    }
    this.x += (1 - this.speed) * 3 + this.v;
    
    if (this.x > width) {
      this.x = 0;
    }
  }
  
  draw () {
    image(particleImage, this.x, this.y);
  }
}

/* ====== STEP 1 ====== */
function step1 () {
  clear();
  noLoop();
  image(img, 0, 0, width, height);
  noFill();
  stroke(120);
  strokeWeight(1);
  strokeCap(SQUARE);
  ctx.globalAlpha = 1;
  for (let y = 0; y < height; y+=detail) {
    for (let x = 0; x < width; x+=detail) {
      rect(x + 0.5, y + 0.5, detail, detail);
    }
  }
}

/* ====== STEP 2 ====== */
function step2 () {
  clear();
  ctx.globalAlpha = 1;
  noLoop();
  image(img, 0, 0, width, height);
  loadPixels();
  noStroke();
  for (let y = 0; y < height; y+=detail) {
    for (let x = 0; x < width; x+=detail) {
      const r = pixels[(y  * width + x) * 4];
      const g = pixels[(y  * width + x) * 4 + 1];
      const b = pixels[(y  * width + x) * 4 + 2];
      const _color = color(r, g, b);
      const _brightness = floor(brightness(_color) / 100 * 255);
      fill(_brightness);
      rect(x, y, detail, detail);
    }
  }
}

/* ====== STEP 3 ====== */
function goToStep3 () {
  ctx.globalAlpha = 1;
  loop();
  
  grid = [];
  particles = [];
  for (let i = 0; i < 20; i++) {
    particles.push(new Particle(null, (i/20) * height));
  }
}

function step3 () {
  clear();
  particles.forEach(p => {
    p.update();
    p.draw();
  });
}

/* ====== STEP 4 ====== */
function goToStep4 () {
  clear();
  ctx.globalAlpha = 1;
  loop();
  image(img, 0, 0, width, height);
  loadPixels();
  clear();
  noStroke();
  
  grid = [];
  for (let y = 0; y < height; y+=detail) {
    let row = [];
    for (let x = 0; x < width; x+=detail) {
      const r = pixels[(y * width + x) * 4];
      const g = pixels[(y * width + x) * 4 + 1];
      const b = pixels[(y * width + x) * 4 + 2];
      const _color = color(r, g, b);
      const _brightness = brightness(_color) / 100;
      fill(_brightness * 255);
      rect(x, y, detail, detail);
      row.push(_brightness);
    }
    grid.push(row);
  }
  
  particles = [];
  for (let i = 0; i < 3000; i++) {
    particles.push(new Particle(null, (i/3000) * height));
  }
}

function step4 () {
  clear();
  particles.forEach(p => {
    p.update();
    p.draw();
  });
}

/* ====== STEP 5 ====== */
function goToStep5 () {
  clear();
  ctx.globalAlpha = 1;
  loop();
  image(img, 0, 0, width, height);
  loadPixels();
  clear();
  noStroke();
  
  grid = [];
  for (let y = 0; y < height; y+=detail) {
    let row = [];
    for (let x = 0; x < width; x+=detail) {
      const r = pixels[(y * width + x) * 4];
      const g = pixels[(y * width + x) * 4 + 1];
      const b = pixels[(y * width + x) * 4 + 2];
      const _color = color(r, g, b);
      const _brightness = brightness(_color) / 100;
      fill(_brightness * 255);
      rect(x, y, detail, detail);
      row.push(_brightness);
    }
    grid.push(row);
  }
  
  particles = [];
  for (let i = 0; i < 3000; i++) {
    particles.push(new Particle(null, (i/3000) * height));
  }
}

function step5 () {
  clear();
  particles.forEach(p => {
    p.update();
    ctx.globalAlpha = p.speed * 0.3;
    p.draw();
  });
}

/* ====== STEP 6 ====== */
function goToStep6 () {
  clear();
  ctx.globalAlpha = 1;
  loop();
  image(img, 0, 0, width, height);
  loadPixels();
  clear();
  noStroke();
  
  grid = [];
  for (let y = 0; y < height; y+=detail) {
    let row = [];
    for (let x = 0; x < width; x+=detail) {
      const r = pixels[(y * width + x) * 4];
      const g = pixels[(y * width + x) * 4 + 1];
      const b = pixels[(y * width + x) * 4 + 2];
      const _color = color(r, g, b);
      const _brightness = brightness(_color) / 100;
      row.push(_brightness);
    }
    grid.push(row);
  }
  
  particles = [];
  for (let i = 0; i < 3000; i++) {
    particles.push(new Particle(null, (i/3000) * height));
  }
}

function step6 () {
  ctx.globalAlpha = 0.05;
  fill(0);
  rect(0,0,width,height);
  ctx.globalAlpha = 0.2;
  particles.forEach(p => {
    p.update();
    ctx.globalAlpha = p.speed * 0.3;
    p.draw();
  });
}

const texts = document.querySelectorAll('section p');
function draw () {
  window['step' + step.value]();
  
  texts.forEach(text => text.style.display = 'none');
  texts[step.value - 1].style.display = 'block';
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg