html--瀑布效果

news2024/11/15 21:34:42 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>瀑布效果</title>

<style>
body {
  background: #222;
  color: white;
  overflow:hidden;
}

#container {
  box-shadow: inset 0 1px 0 #444, 0 -1px 0 #000;
  height: 100vh;
  width: 100vw;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  will-change: transform;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

canvas#waterfall {
  display: block;
  margin: 0 auto;
  width: 30%;
  height: 55%;
  will-change: transform;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

.emma {
  height: 100vh;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
}

h1 {
  color: #0af;
  font-size: 30vw;
}

canvas#surface {
  -webkit-animation: fade-in 3000ms forwards;
          animation: fade-in 3000ms forwards;
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  z-index: -1;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>

</head>
<body>

<div id="container">

	<canvas id="waterfall"></canvas>
	
    <div class="emma flex">
        <div> </div>
    </div>
	
</div>

<script type="text/javascript" src="js/pixi.min.js"></script>
<script type="text/javascript" src="js/tinycolor.min.js"></script>

<script type="text/javascript">
+!~-(function(PIXI, window, document, undefined) {
  var waterfallCanvas = function(c, cw, ch) {
    var _this = this;
    this.c = c;
    this.ctx = c.getContext('2d');
    this.cw = cw;
    this.ch = ch;
    this.particles = [];
    this.particleRate = 6;
    this.gravity = 0.15;
    this.init = function() {
      this.loop();
    };
    this.reset = function() {
      this.ctx.clearRect(0, 0, this.cw, this.ch);
      this.particles = [];
    };
    this.rand = function(rMi, rMa) {
      return ~~((Math.random() * (rMa - rMi + 1)) + rMi);
    };
    this.Particle = function() {
      var newWidth = _this.rand(1, 20);
      var newHeight = _this.rand(1, 45);
      this.x = _this.rand(10 + (newWidth / 2), _this.cw - 10 - (newWidth / 2));
      this.y = -newHeight;
      this.vx = 0;
      this.vy = 0;
      this.width = newWidth;
      this.height = newHeight;
      this.hue = _this.rand(200, 220);
      this.saturation = _this.rand(30, 60);
      this.lightness = _this.rand(30, 60);
    };
    this.Particle.prototype.update = function(i) {
      this.vx += this.vx;
      this.vy += _this.gravity;
      this.x += this.vx;
      this.y += this.vy;
    };
    this.Particle.prototype.render = function() {
      _this.ctx.strokeStyle = 'hsla(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness + '%, .05)';
      _this.ctx.beginPath();
      _this.ctx.moveTo(this.x, this.y);
      _this.ctx.lineTo(this.x, this.y + this.height);
      _this.ctx.lineWidth = this.width / 2;
      _this.ctx.lineCap = 'round';
      _this.ctx.stroke();
    };
    this.Particle.prototype.renderBubble = function() {
      _this.ctx.fillStyle = 'hsla(' + this.hue + ', 40%, 40%, 1)';
      _this.ctx.fillStyle = 'hsla(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness + '%, .3)';
      _this.ctx.beginPath();
      _this.ctx.arc(this.x + this.width / 2, _this.ch - 20 - _this.rand(0, 10), _this.rand(1, 8), 0, Math.PI * 2, false);
      _this.ctx.fill();
    };
    this.createParticles = function() {
      var i = this.particleRate;
      while (i--) {
        this.particles.push(new this.Particle());
      }
    };
    this.removeParticles = function() {
      var i = this.particleRate;
      while (i--) {
        var p = this.particles[i];
        if (p.y > _this.ch - 20 - p.height) {
          p.renderBubble();
          _this.particles.splice(i, 1);
        }
      }
    };
    this.updateParticles = function() {
      var i = this.particles.length;
      while (i--) {
        var p = this.particles[i];
        p.update(i);
      }
    };
    this.renderParticles = function() {
      var i = this.particles.length;
      while (i--) {
        var p = this.particles[i];
        p.render();
      }
    };
    this.clearCanvas = function() {
      this.ctx.globalCompositeOperation = 'destination-out';
      this.ctx.fillStyle = 'rgba(255,255,255,.06)';
      this.ctx.fillRect(0, 0, this.cw, this.ch);
      this.ctx.globalCompositeOperation = 'lighter';
    };
    this.loop = function() {
      var loopIt = function() {
        requestAnimationFrame(loopIt, _this.c);
        _this.clearCanvas();
        _this.createParticles();
        _this.updateParticles();
        _this.renderParticles();
        _this.removeParticles();
      };
      loopIt();
    };
  };
  var isCanvasSupported = function() {
    var elem = document.createElement('canvas');
    return !!(elem.getContext && elem.getContext('2d'));
  };
  var setupRAF = function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
      window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
      window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
    }
    if (!window.requestAnimationFrame) {
      window.requestAnimationFrame = function(callback, element) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function() {
          callback(currTime + timeToCall);
        }, timeToCall);
        lastTime = currTime + timeToCall;
        return id;
      };
    }
    if (!window.cancelAnimationFrame) {
      window.cancelAnimationFrame = function(id) {
        clearTimeout(id);
      };
    }
  };
  if (isCanvasSupported()) {
    var c = document.getElementById('waterfall');
    var cw = c.width = Math.max(document.getElementById('waterfall').scrollWidth, document.getElementById('waterfall').offsetWidth, document.getElementById('waterfall').clientWidth, document.getElementById('waterfall').scrollWidth, document.getElementById('waterfall').offsetWidth);
    var ch = c.height = Math.max(document.getElementById('waterfall').scrollHeight, document.getElementById('waterfall').offsetHeight, document.getElementById('waterfall').clientHeight, document.getElementById('waterfall').scrollHeight, document.getElementById('waterfall').offsetHeight);
    var waterfall = new waterfallCanvas(c, cw, ch);
    setupRAF();
    waterfall.init();
  } /* Second plugin */
  var w, h, renderer, stage, waveGraphics, partGraphics, waveTexture, partTexture, waveCount, partCount, waves, parts;

  function init() {
    renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight / 2, {
      backgroundColor: '0x' + tinycolor('hsl(200, 50%, 10%)').toHex()
    });
    stage = new PIXI.Container();
    waveCount = 2000;
    partCount = 1000;
    waves = [];
    parts = [];
    document.body.appendChild(renderer.view);
    reset();
    for (var i = 0; i < 300; i++) {
      step();
    }
    loop();
  }

  function reset() {
    w = window.innerWidth;
    h = window.innerHeight;
    renderer.resize(w, h);
    waveGraphics = null;
    waveTexture = null;
    partGraphics = null;
    partTexture = null;
    waveGraphics = new PIXI.Graphics();
    waveGraphics.cacheAsBitmap = true;
    waveGraphics.beginFill('0x' + tinycolor('hsl(200, 74%, 40%)').toHex(), 0.15);
    waveGraphics.drawCircle(0, 0, 20);
    waveGraphics.endFill();
    waveTexture = waveGraphics.generateTexture();
    partGraphics = new PIXI.Graphics();
    partGraphics.cacheAsBitmap = true;
    partGraphics.beginFill('0x' + tinycolor('hsl(200, 70%, 40%)').toHex(), 0.2);
    partGraphics.drawCircle(0, 0, 15);
    partGraphics.endFill();
    partTexture = partGraphics.generateTexture();
  }

  function step() {
    if (waves.length < waveCount) {
      for (var i = 0; i < 10; i++) {
        var wave = new PIXI.Sprite(waveTexture),
          scale = 0.2 + Math.random() * 0.8;
        wave.position.x = w / 2;
        wave.position.y = h / 2;
        wave.anchor.x = 0.5;
        wave.anchor.y = 0.5;
        wave.scale.x = scale * 10;
        wave.scale.y = scale * 0.5;
        wave.blendMode = PIXI.BLEND_MODES.SCREEN;
        waves.push({
          sprite: wave,
          x: wave.position.x,
          y: wave.position.y,
          vx: 0,
          vy: 0,
          angle: Math.PI / 2 + Math.random() * Math.PI + Math.PI * 1.5,
          speed: 0.01 + Math.random() / 10
        });
        stage.addChild(wave);
      }
    }
    for (var i = 0, length = waves.length; i < length; i++) {
      var wave = waves[i];
      wave.sprite.position.x = wave.x;
      wave.sprite.position.y = wave.y;
      wave.vx = Math.cos(wave.angle) * wave.speed;
      wave.vy = Math.sin(wave.angle) * wave.speed;
      wave.x += wave.vx;
      wave.y += wave.vy;
      wave.speed *= 1.01;
      if (wave.x > w + 200 || wave.x < -200 || wave.y > h + 200) {
        wave.x = w / 2;
        wave.y = h / 2;
        wave.speed = 0.01 + Math.random() / 10;
      }
    }
    if (parts.length < partCount) {
      var part = new PIXI.Sprite(partTexture),
        scale = 0.2 + Math.random() * 0.8,
        type = Math.random() > 0.5 ? 1 : 0;
      part.position.x = w / 2 + Math.random() * 380 - 190;
      part.position.y = h / 2 + 0;
      part.anchor.x = 0.5;
      part.anchor.y = 0.5;
      part.scale.x = type ? scale : scale * 0.5;
      part.scale.y = type ? scale : scale * 15;
      part.blendMode = PIXI.BLEND_MODES.SCREEN;
      parts.push({
        sprite: part,
        ox: part.position.x,
        oy: part.position.y,
        x: part.position.x,
        y: part.position.y,
        vx: 0,
        vy: 0,
        angle: (-Math.PI * 0.5) + (w / 2 - part.position.x) / 750,
        speed: 0.0001 + Math.random() / 50
      });
      stage.addChild(part);
    }
    for (var i = 0, length = parts.length; i < length; i++) {
      var part = parts[i];
      part.sprite.position.x = part.x;
      part.sprite.position.y = part.y;
      part.vx = Math.cos(part.angle) * part.speed;
      part.vy = Math.sin(part.angle) * part.speed;
      part.x += part.vx;
      part.y += part.vy;
      part.speed *= 1.01;
      if (part.x > w + 50 || part.x < -50 || part.y < -50) {
        part.x = part.ox;
        part.y = part.oy;
        part.speed = 0.01 + Math.random() / 50;
      }
    }
    renderer.render(stage);
  }

  function loop() {
    step();
    requestAnimationFrame(loop);
  }
  window.addEventListener('resize', reset);
  init();
})(PIXI, this, document);
</script>

</body>
</html>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1656630.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Windows远程桌面实现之十四：实现AirPlay接收端，让苹果设备（iOS，iPad等）屏幕镜像到PC端

Windows远程桌面实现之十四：实现AirPlay接收端，让苹果设备（iOS，iPad等）屏幕镜像到PC端

by fanxiushu 2024-05-04 转载或引用请注明原始作者。 这个课题已经持续了好几年&#xff0c;已经可以说是很长时间了。 实现的程序是 xdisp_virt&#xff0c; 可以去github下载使用:GitHub - fanxiushu/xdisp_virt: xfsredir file system 一开始是基于测试镜像驱动的目的随便开…
阅读更多...
【FX110】2024外汇市场中交易量最大的货币对是哪个？

【FX110】2024外汇市场中交易量最大的货币对是哪个？

作为最大、最流动的金融市场之一&#xff0c;外汇市场每天的交易量高达几万亿美元&#xff0c;涉及到数百种货币。不同货币对的交易活跃程度并不一样&#xff0c;交易者需要根据货币对各自的特点去进行交易。 全年外汇市场中涉及美元的外汇交易超过50%&#xff01; 实际上&…
阅读更多...
对象复制工具Orika，快速实现两个java对象的属性赋值

对象复制工具Orika，快速实现两个java对象的属性赋值

一、maven依赖引入orika <dependency><groupId>ma.glasnost.orika</groupId><artifactId>orika-core</artifactId><version>1.5.4</version></dependency>二、Orika工具类 import io.swagger.annotations.ApiModel; import io…
阅读更多...
百面算法工程师 | 支持向量机面试相关问题——SVM

百面算法工程师 | 支持向量机面试相关问题——SVM

本文给大家带来的百面算法工程师是深度学习支持向量机的面试总结&#xff0c;文章内总结了常见的提问问题&#xff0c;旨在为广大学子模拟出更贴合实际的面试问答场景。在这篇文章中&#xff0c;我们还将介绍一些常见的深度学习算法工程师面试问题&#xff0c;并提供参考的回答…
阅读更多...
Leetcode127.单词接龙

Leetcode127.单词接龙

https://leetcode.cn/problems/word-ladder/description/?envTypestudy-plan-v2&envIdtop-interview-150 文章目录 题目描述解题思路代码-BFS解题思路二——双向BFS代码 题目描述 字典 wordList 中从单词 beginWord 和 endWord 的 转换序列 是一个按下述规格形成的序列 …
阅读更多...
django中的cookie与session

django中的cookie与session

获取cookie request.COOKIE.GET 使用cookie response.set-cookie views.py from django.http import HttpResponse from django.shortcuts import render# Create your views here. def cookie_test(request):r HttpResponse("hello world")r.set_cookie(lan, py…
阅读更多...
设计软件有哪些？渲染软件篇（2），渲染100邀请码1a12

设计软件有哪些？渲染软件篇（2），渲染100邀请码1a12

好用的渲染软件有很多&#xff0c;今天我们接着介绍。 1、渲染100(http://www.xuanran100.com/?ycode1a12) 渲染100是网渲平台&#xff0c;为设计师提供高性能的渲染服务。通过它设计师可以把本地渲染移到云端进行&#xff0c;速度快价格便宜&#xff0c;支持3dmax、vray、c…
阅读更多...
k8s 理论知识基本介绍

k8s 理论知识基本介绍

目录 一 k8s 理论前言 &#xff08;一&#xff09;微服务是什么 1&#xff0c;应用场景 2&#xff0c;API 是什么 &#xff08;二&#xff09;&#xff0c;微服务 如何做版本迭代 1. Docker镜像构建 2. 版本标记 3. Docker Registry 4. 环境一致性 5. 滚动更新…
阅读更多...
《二十一》QT QML编程基础

《二十一》QT QML编程基础

QML概述 QML&#xff08;Qt Meta-Object Language&#xff09;是一种声明性语言&#xff0c;它被用于描述Qt框架中用户界面的结构和行为。QML提供了一种简洁、灵活的方式来创建动态和交互式的界面。 QML基于JavaScript语法&#xff0c;通过使用QML类型和属性来定义界面的元素…
阅读更多...
[C++核心编程-01]----C++内存四区详细解析

[C++核心编程-01]----C++内存四区详细解析

目录 前言 正文 01-内存区域简介 02-全局区 03-栈区 04-堆区 05-new操作符 总结 前言 当程序运行时&#xff0c;操作系统会为程序分配一块内存空间&#xff0c;这块内存空间被划分为不同的区域&#xff0c;每个区域有其独特的作用…
阅读更多...
ps5电玩计时收费系统软件教程，电玩店适合的计时器，电脑定时语音提醒

ps5电玩计时收费系统软件教程，电玩店适合的计时器，电脑定时语音提醒

ps5电玩计时收费系统软件教程&#xff0c;电玩店适合的计时器&#xff0c;电脑定时语音提醒 一、前言 以下软件操作教程以&#xff0c;佳易王电玩计时计费管理软件为例说明 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 1、计时计费功能&#xff1a;只…
阅读更多...
Linux内存管理——Swap

Linux内存管理——Swap

swap space 一个磁盘区域&#xff0c;作为内存使用。当系统内存不足时&#xff0c;会将一些很久不使用的数据转移到swap space中。 优点&#xff1a;扩展了内存空间 缺点&#xff1a;用磁盘做内存&#xff0c;读写效率降低。 swappiness swappiness的值表示建议swap space替…
阅读更多...
GtkButton事件处理、事件的捕获、鼠标事件等

GtkButton事件处理、事件的捕获、鼠标事件等

事件 事件处理 GTK 所提供的工具库与其应用程序都是基于事件触发机制来管理&#xff0c; 所有的应用程序都是基于事件驱动。 如果没有事件发生&#xff0c; 应用程序将处于等待状态&#xff0c; 不会执行任何操作&#xff0c; 一旦事件发生&#xff0c; 将根据不同的事件做出…
阅读更多...
使用 YOLO 进行自定义对象检测

使用 YOLO 进行自定义对象检测

使用 YOLO 进行自定义对象检测 1. 创建数据集 机器是通过数据集学习的。数据集必须包含图像和标签。例如&#xff0c;让我的目标是创建一个检测坦克的系统。 我准备了从网上下载的坦克图片。然后我们需要使用第三方工具对图像进行标记&#xff0c;例如&#xff1b;LabelImg、…
阅读更多...
SRM系统供应链库存协同提升企业服务水平

SRM系统供应链库存协同提升企业服务水平

SRM系统供应链库存协同是一种以提高供应链整体效率和竞争力为目标的管理方法。它涉及到企业与供应商之间的紧密合作&#xff0c;以实现库存优化、成本降低、风险分担和灵活响应市场变化等目标。 一、SRM供应链库存协同的概念和特点 SRM供应链库存协同是指企业与供应商之间通过…
阅读更多...
团结引擎+OpenHarmony 记录 （持续更新中）

团结引擎+OpenHarmony 记录 （持续更新中）

1 TuanjiePlayerAbility.ts 中获取 content 引用 globalThis.AbilityContext 在 TuanjiePlayerAbility.ts 中是可以获取到的 但是在 tslib 或者中 globalThis.AbilityContext 是无法获取到的GetFromGlobalThis(‘AbilityContext’); 同样 在 TuanjiePlayerAbility.ts 中是可以…
阅读更多...
文献速递：深度学习医学影像心脏疾病检测与诊断--基于深度学习的PET图像重建与运动估计

文献速递：深度学习医学影像心脏疾病检测与诊断--基于深度学习的PET图像重建与运动估计

Title 题目 Deep Learning Based Joint PET Image Reconstruction and Motion Estimation 基于深度学习的PET图像重建与运动估计 01 文献速递介绍 正电子发射断层扫描&#xff08;PET&#xff09;成像是一种非侵入性成像技术&#xff0c;通过使用放射性示踪剂在活体内可视化…
阅读更多...
UE4_摄像机_使用摄像机的技巧

UE4_摄像机_使用摄像机的技巧

学习笔记&#xff0c;不喜勿喷&#xff01;祝愿生活越来越好&#xff01; 知识点&#xff1a; a.相机跟随。 b.相机抖动。 c.摄像机移动 d.四元数插值&#xff08;保证正确旋转方向&#xff09;。 e.相机注视跟踪。 1、新建关卡序列&#xff0c;并给小车添加动画。 2、创…
阅读更多...
C++奇迹之旅：string类接口详解（上）

C++奇迹之旅：string类接口详解（上）

文章目录 &#x1f4dd;为什么学习string类&#xff1f;&#x1f309; C语言中的字符串&#x1f309;string考察 &#x1f320;标准库中的string类&#x1f309;string类的常用接口说明&#x1f320;string类对象的常见构造 &#x1f6a9;总结 &#x1f4dd;为什么学习string类…
阅读更多...
Unity Navigation 入门（新版）

Unity Navigation 入门（新版）

概述 在游戏的制作过程中&#xff0c;寻路功能一定是非常重要的部分&#xff0c;他可以为主角寻路&#xff0c;也可以运用到敌人追击等&#xff0c;相比于自己实现的难度&#xff0c;使用寻路组件就显得简单的多&#xff0c;那接下来就开始学习这部分的内容吧 1.安装AI Naviga…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023