提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

有趣的HTML实例（八） 一个很有趣的动态背景（css+js）

JS实例HTMLCSS 一个 动态 背景 有趣
2023-09-11 14:19:30 时间

小时候，谁都觉得自己的未来闪闪发光，不是吗？但是一旦长大，没有一件事会遂自己心愿。

——《被嫌弃的松子的一生》

目录

一、前言

二、往期作品回顾

三、作品介绍

四、本期代码介绍

五、效果显示 

六、编码实现

index.html

style.css 

script.js

 七、获取源码

公众号获取源码 

获取源码？私信？关注？点赞？收藏？

 一、前言

        在我们的 html 学习过程中，会用到并见识到各种各样的实例，以及各种插件，并且有些 web 网页中的小插件又非常的吸引眼球，提升 web 网页的层次，显得非常好看并且非常使用。在本系列中，我将持续为大家更新有趣且使用的 html 实例，放在 web 网页中，凸显效果。

        特点一：都是符合学校或者学生考试期末作业的水平，都是最基础的简单的 html 样例，提升web网页整理效果，都是 div+css 框架原创代码写的，内容包括 js / css，也包含 视频+音乐+flash 等元素的插入…

        特点二：内容包括多种丰富类型，例如： 倒计时，404页面，Blog顶置卡片设计 (css+js)，To-Do-List设计 (css+js)，火柴盒动画 (css)，日历便签设计 (css+js)，搜索框设计 (css+js)，卡片式图片展示 (css+js)，咖啡选择 (css+js)……

     

          可满足多种需求，欢迎大家下载！

 

二、往期作品回顾

有趣的HTML实例（一） 倒计时_Enovo_飞鱼的博客-CSDN博客

有趣的HTML实例（二） 404页面_Enovo_飞鱼的博客-CSDN博客

有趣的HTML实例（三） 加载页面动画_Enovo_飞鱼的博客-CSDN博客

有趣的HTML实例（四） 旋转菜单_Enovo_飞鱼的博客-CSDN博客

有趣的HTML实例（五） 加载页面动画Ⅱ（css）_Enovo_飞鱼的博客-CSDN博客

有趣的HTML实例（六） 卡片翻转时钟_Enovo_飞鱼的博客-CSDN博客

有趣的HTML实例（七） 注册登录界面Ⅱ（css+js）_Enovo_飞鱼的博客-CSDN博客

三、作品介绍

        1.作品简介 ：HTML响应式布局网站源码！兼容 pc 以及移动端，内涵 js 交互，ui 交互。直接点击即可查看效果！

        2.作品编辑：个人主页网页设计题材，代码为 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、Vscode 、Sublime  所有编辑器均可使用）。

        3.作品技术：使用DIV+CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。

四、本期代码介绍

一款简单的 HTML+ CSS+JS  一个很有趣的动态背景（css+js）实例

1、HTML

2、CSS

3、JS

4、舒适的画面感

5、人潮汹涌

 可通用多种不同情景，

五、效果显示 

​

​

可使用在多种情景下，作为动态背景，提升层次轮廓效果——>

根据需求修改

六、编码实现

显示完整代码

注意路径(⊙o⊙)？

o(*￣▽￣*)ブ 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Enovo一个有趣的动态背景</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
<canvas id="canvas"></canvas>

<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js'></script><script src="./script.js"></script>
</body>
</html>

style.css 

html, body {
    height: 100%;
  }
  body {
    margin: 0;
  }
  
  #canvas {
    width: 100%;
    height: 100%;
  }

script.js

console.clear();
console.log('');

const config = {
  src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/open-peeps-sheet.png',
  rows: 15,
  cols: 7 };


// 公用

const randomRange = (min, max) => min + Math.random() * (max - min);

const randomIndex = array => randomRange(0, array.length) | 0;

const removeFromArray = (array, i) => array.splice(i, 1)[0];

const removeItemFromArray = (array, item) => removeFromArray(array, array.indexOf(item));

const removeRandomFromArray = array => removeFromArray(array, randomIndex(array));

const getRandomFromArray = (array) =>
array[randomIndex(array) | 0];



const resetPeep = ({ stage, peep }) => {
  const direction = Math.random() > 0.5 ? 1 : -1;

  // 使用 ease 函数将随机值倾斜到较低的值
  const offsetY = 100 - 250 * gsap.parseEase('power2.in')(Math.random());
  const startY = stage.height - peep.height + offsetY;
  let startX;
  let endX;

  if (direction === 1) {
    startX = -peep.width;
    endX = stage.width;
    peep.scaleX = 1;
  } else {
    startX = stage.width + peep.width;
    endX = 0;
    peep.scaleX = -1;
  }

  peep.x = startX;
  peep.y = startY;
  peep.anchorY = startY;

  return {
    startX,
    startY,
    endX };

};

const normalWalk = ({ peep, props }) => {
  const {
    startX,
    startY,
    endX } =
  props;

  const xDuration = 10;
  const yDuration = 0.25;

  const tl = gsap.timeline();
  tl.timeScale(randomRange(0.5, 1.5));
  tl.to(peep, {
    duration: xDuration,
    x: endX,
    ease: 'none' },
  0);
  tl.to(peep, {
    duration: yDuration,
    repeat: xDuration / yDuration,
    yoyo: true,
    y: startY - 10 },
  0);

  return tl;
};

const walks = [
normalWalk];



class Peep {
  constructor({
    image,
    rect })
  {
    this.image = image;
    this.setRect(rect);

    this.x = 0;
    this.y = 0;
    this.anchorY = 0;
    this.scaleX = 1;
    this.walk = null;
  }

  setRect(rect) {
    this.rect = rect;
    this.width = rect[2];
    this.height = rect[3];

    this.drawArgs = [
    this.image,
    ...rect,
    0, 0, this.width, this.height];

  }

  render(ctx) {
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.scale(this.scaleX, 1);
    ctx.drawImage(...this.drawArgs);
    ctx.restore();
  }}


const img = document.createElement('img');
img.onload = init;
img.src = config.src;

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

const stage = {
  width: 0,
  height: 0 };


const allPeeps = [];
const availablePeeps = [];
const crowd = [];

function init() {
  createPeeps();

  // 调整大小-填充阶段
  resize();

  gsap.ticker.add(render);
  window.addEventListener('resize', resize);
}

function createPeeps() {
  const {
    rows,
    cols } =
  config;
  const {
    naturalWidth: width,
    naturalHeight: height } =
  img;
  const total = rows * cols;
  const rectWidth = width / rows;
  const rectHeight = height / cols;

  for (let i = 0; i < total; i++) {
    allPeeps.push(new Peep({
      image: img,
      rect: [
      i % rows * rectWidth,
      (i / rows | 0) * rectHeight,
      rectWidth,
      rectHeight] }));


  }
}

function resize() {
  stage.width = canvas.clientWidth;
  stage.height = canvas.clientHeight;
  canvas.width = stage.width * devicePixelRatio;
  canvas.height = stage.height * devicePixelRatio;

  crowd.forEach(peep => {
    peep.walk.kill();
  });

  crowd.length = 0;
  availablePeeps.length = 0;
  availablePeeps.push(...allPeeps);

  initCrowd();
}

function initCrowd() {
  while (availablePeeps.length) {
    // 设置随机的两个进程
    addPeepToCrowd().walk.progress(Math.random());
  }
}

function addPeepToCrowd() {
  const peep = removeRandomFromArray(availablePeeps);
  const walk = getRandomFromArray(walks)({
    peep,
    props: resetPeep({
      peep,
      stage }) }).

  eventCallback('onComplete', () => {
    removePeepFromCrowd(peep);
    addPeepToCrowd();
  });

  peep.walk = walk;

  crowd.push(peep);
  crowd.sort((a, b) => a.anchorY - b.anchorY);

  return peep;
}

function removePeepFromCrowd(peep) {
  removeItemFromArray(crowd, peep);
  availablePeeps.push(peep);
}

function render() {
  canvas.width = canvas.width;
  ctx.save();
  ctx.scale(devicePixelRatio, devicePixelRatio);

  crowd.forEach(peep => {
    peep.render(ctx);
  });

  ctx.restore();
}

 七、获取源码

老规矩，先给朋友们看一下完整文件夹，

正确的文件如下图 ，复制源码的朋友们请注意了！！！

​

公众号获取源码 

第一步，通过微信公众号下载源码压缩包，解压并打开文件夹，即为上图样式（复制源码请注意路径及文件名）

第二步，点击 html 文件 打开即可查看

2023年第十七期，希望得到大家的喜欢🙇‍

也是新的系列，将会持续更新，🙇‍

希望大家有好的意见或者建议，欢迎私信

以上就是本篇文章的全部内容了

 ~ 关注我，点赞博文~ 每天带你涨知识!

1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。

2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、HTML模板 、C++、数据结构、Python程序设计、Java程序设计、爬虫等！ 「在这里有好多 开发者，一起探讨 前端 开发 知识，互相学习」！

3.以上内容技术相关问题可以相互学习，可 关 注 ↓公 Z 号 获取更多源码 !
 

获取源码？私信？关注？点赞？收藏？

👍+✏️+⭐️+🙇‍

有需要源码的小伙伴可以 关注下方微信公众号 " Enovo开发工厂 "，回复 关键词 " a-bg1 "

相关文章