html--瀑布结果

我爱普洱茶  金牌会员 | 2024-6-21 13:33:17 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 517|帖子 517|积分 1551

  2. <!doctype html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <title>瀑布效果</title>
  8. <style>
  9. body {
  10.   background: #222;
  11.   color: white;
  12.   overflow:hidden;
  13. }
  15. #container {
  16.   box-shadow: inset 0 1px 0 #444, 0 -1px 0 #000;
  17.   height: 100vh;
  18.   width: 100vw;
  19.   position: absolute;
  20.   left: 0;
  21.   top: 0;
  22.   margin: 0;
  23.   will-change: transform;
  24.   -webkit-transform: translateZ(0);
  25.           transform: translateZ(0);
  26. }
  28. canvas#waterfall {
  29.   display: block;
  30.   margin: 0 auto;
  31.   width: 30%;
  32.   height: 55%;
  33.   will-change: transform;
  34.   -webkit-transform: translateZ(0);
  35.           transform: translateZ(0);
  36. }
  38. .emma {
  39.   height: 100vh;
  40.   width: 100%;
  41.   position: absolute;
  42.   left: 0;
  43.   top: 0;
  44.   margin: 0;
  45. }
  47. h1 {
  48.   color: #0af;
  49.   font-size: 30vw;
  50. }
  52. canvas#surface {
  53.   -webkit-animation: fade-in 3000ms forwards;
  54.           animation: fade-in 3000ms forwards;
  55.   display: block;
  56.   left: 0;
  57.   position: absolute;
  58.   top: 0;
  59.   z-index: -1;
  60. }
  62. @-webkit-keyframes fade-in {
  63.   0% {
  64.     opacity: 0;
  65.   }
  66.   100% {
  67.     opacity: 1;
  68.   }
  69. }
  71. @keyframes fade-in {
  72.   0% {
  73.     opacity: 0;
  74.   }
  75.   100% {
  76.     opacity: 1;
  77.   }
  78. }
  79. </style>
  81. </head>
  82. <body>
  84. <div id="container">
  86.         <canvas id="waterfall"></canvas>
  87.        
  88.     <div class="emma flex">
  89.         <div> </div>
  90.     </div>
  91.        
  92. </div>
  94. <script type="text/javascript" src="js/pixi.min.js"></script>
  95. <script type="text/javascript" src="js/tinycolor.min.js"></script>
  97. <script type="text/javascript">
  98. +!~-(function(PIXI, window, document, undefined) {
  99.   var waterfallCanvas = function(c, cw, ch) {
  100.     var _this = this;
  101.     this.c = c;
  102.     this.ctx = c.getContext('2d');
  103.     this.cw = cw;
  104.     this.ch = ch;
  105.     this.particles = [];
  106.     this.particleRate = 6;
  107.     this.gravity = 0.15;
  108.     this.init = function() {
  109.       this.loop();
  110.     };
  111.     this.reset = function() {
  112.       this.ctx.clearRect(0, 0, this.cw, this.ch);
  113.       this.particles = [];
  114.     };
  115.     this.rand = function(rMi, rMa) {
  116.       return ~~((Math.random() * (rMa - rMi + 1)) + rMi);
  117.     };
  118.     this.Particle = function() {
  119.       var newWidth = _this.rand(1, 20);
  120.       var newHeight = _this.rand(1, 45);
  121.       this.x = _this.rand(10 + (newWidth / 2), _this.cw - 10 - (newWidth / 2));
  122.       this.y = -newHeight;
  123.       this.vx = 0;
  124.       this.vy = 0;
  125.       this.width = newWidth;
  126.       this.height = newHeight;
  127.       this.hue = _this.rand(200, 220);
  128.       this.saturation = _this.rand(30, 60);
  129.       this.lightness = _this.rand(30, 60);
  130.     };
  131.     this.Particle.prototype.update = function(i) {
  132.       this.vx += this.vx;
  133.       this.vy += _this.gravity;
  134.       this.x += this.vx;
  135.       this.y += this.vy;
  136.     };
  137.     this.Particle.prototype.render = function() {
  138.       _this.ctx.strokeStyle = 'hsla(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness + '%, .05)';
  139.       _this.ctx.beginPath();
  140.       _this.ctx.moveTo(this.x, this.y);
  141.       _this.ctx.lineTo(this.x, this.y + this.height);
  142.       _this.ctx.lineWidth = this.width / 2;
  143.       _this.ctx.lineCap = 'round';
  144.       _this.ctx.stroke();
  145.     };
  146.     this.Particle.prototype.renderBubble = function() {
  147.       _this.ctx.fillStyle = 'hsla(' + this.hue + ', 40%, 40%, 1)';
  148.       _this.ctx.fillStyle = 'hsla(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness + '%, .3)';
  149.       _this.ctx.beginPath();
  150.       _this.ctx.arc(this.x + this.width / 2, _this.ch - 20 - _this.rand(0, 10), _this.rand(1, 8), 0, Math.PI * 2, false);
  151.       _this.ctx.fill();
  152.     };
  153.     this.createParticles = function() {
  154.       var i = this.particleRate;
  155.       while (i--) {
  156.         this.particles.push(new this.Particle());
  157.       }
  158.     };
  159.     this.removeParticles = function() {
  160.       var i = this.particleRate;
  161.       while (i--) {
  162.         var p = this.particles[i];
  163.         if (p.y > _this.ch - 20 - p.height) {
  164.           p.renderBubble();
  165.           _this.particles.splice(i, 1);
  166.         }
  167.       }
  168.     };
  169.     this.updateParticles = function() {
  170.       var i = this.particles.length;
  171.       while (i--) {
  172.         var p = this.particles[i];
  173.         p.update(i);
  174.       }
  175.     };
  176.     this.renderParticles = function() {
  177.       var i = this.particles.length;
  178.       while (i--) {
  179.         var p = this.particles[i];
  180.         p.render();
  181.       }
  182.     };
  183.     this.clearCanvas = function() {
  184.       this.ctx.globalCompositeOperation = 'destination-out';
  185.       this.ctx.fillStyle = 'rgba(255,255,255,.06)';
  186.       this.ctx.fillRect(0, 0, this.cw, this.ch);
  187.       this.ctx.globalCompositeOperation = 'lighter';
  188.     };
  189.     this.loop = function() {
  190.       var loopIt = function() {
  191.         requestAnimationFrame(loopIt, _this.c);
  192.         _this.clearCanvas();
  193.         _this.createParticles();
  194.         _this.updateParticles();
  195.         _this.renderParticles();
  196.         _this.removeParticles();
  197.       };
  198.       loopIt();
  199.     };
  200.   };
  201.   var isCanvasSupported = function() {
  202.     var elem = document.createElement('canvas');
  203.     return !!(elem.getContext && elem.getContext('2d'));
  204.   };
  205.   var setupRAF = function() {
  206.     var lastTime = 0;
  207.     var vendors = ['ms', 'moz', 'webkit', 'o'];
  208.     for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
  209.       window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
  210.       window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
  211.     }
  212.     if (!window.requestAnimationFrame) {
  213.       window.requestAnimationFrame = function(callback, element) {
  214.         var currTime = new Date().getTime();
  215.         var timeToCall = Math.max(0, 16 - (currTime - lastTime));
  216.         var id = window.setTimeout(function() {
  217.           callback(currTime + timeToCall);
  218.         }, timeToCall);
  219.         lastTime = currTime + timeToCall;
  220.         return id;
  221.       };
  222.     }
  223.     if (!window.cancelAnimationFrame) {
  224.       window.cancelAnimationFrame = function(id) {
  225.         clearTimeout(id);
  226.       };
  227.     }
  228.   };
  229.   if (isCanvasSupported()) {
  230.     var c = document.getElementById('waterfall');
  231.     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);
  232.     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);
  233.     var waterfall = new waterfallCanvas(c, cw, ch);
  234.     setupRAF();
  235.     waterfall.init();
  236.   } /* Second plugin */
  237.   var w, h, renderer, stage, waveGraphics, partGraphics, waveTexture, partTexture, waveCount, partCount, waves, parts;
  239.   function init() {
  240.     renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight / 2, {
  241.       backgroundColor: '0x' + tinycolor('hsl(200, 50%, 10%)').toHex()
  242.     });
  243.     stage = new PIXI.Container();
  244.     waveCount = 2000;
  245.     partCount = 1000;
  246.     waves = [];
  247.     parts = [];
  248.     document.body.appendChild(renderer.view);
  249.     reset();
  250.     for (var i = 0; i < 300; i++) {
  251.       step();
  252.     }
  253.     loop();
  254.   }
  256.   function reset() {
  257.     w = window.innerWidth;
  258.     h = window.innerHeight;
  259.     renderer.resize(w, h);
  260.     waveGraphics = null;
  261.     waveTexture = null;
  262.     partGraphics = null;
  263.     partTexture = null;
  264.     waveGraphics = new PIXI.Graphics();
  265.     waveGraphics.cacheAsBitmap = true;
  266.     waveGraphics.beginFill('0x' + tinycolor('hsl(200, 74%, 40%)').toHex(), 0.15);
  267.     waveGraphics.drawCircle(0, 0, 20);
  268.     waveGraphics.endFill();
  269.     waveTexture = waveGraphics.generateTexture();
  270.     partGraphics = new PIXI.Graphics();
  271.     partGraphics.cacheAsBitmap = true;
  272.     partGraphics.beginFill('0x' + tinycolor('hsl(200, 70%, 40%)').toHex(), 0.2);
  273.     partGraphics.drawCircle(0, 0, 15);
  274.     partGraphics.endFill();
  275.     partTexture = partGraphics.generateTexture();
  276.   }
  278.   function step() {
  279.     if (waves.length < waveCount) {
  280.       for (var i = 0; i < 10; i++) {
  281.         var wave = new PIXI.Sprite(waveTexture),
  282.           scale = 0.2 + Math.random() * 0.8;
  283.         wave.position.x = w / 2;
  284.         wave.position.y = h / 2;
  285.         wave.anchor.x = 0.5;
  286.         wave.anchor.y = 0.5;
  287.         wave.scale.x = scale * 10;
  288.         wave.scale.y = scale * 0.5;
  289.         wave.blendMode = PIXI.BLEND_MODES.SCREEN;
  290.         waves.push({
  291.           sprite: wave,
  292.           x: wave.position.x,
  293.           y: wave.position.y,
  294.           vx: 0,
  295.           vy: 0,
  296.           angle: Math.PI / 2 + Math.random() * Math.PI + Math.PI * 1.5,
  297.           speed: 0.01 + Math.random() / 10
  298.         });
  299.         stage.addChild(wave);
  300.       }
  301.     }
  302.     for (var i = 0, length = waves.length; i < length; i++) {
  303.       var wave = waves[i];
  304.       wave.sprite.position.x = wave.x;
  305.       wave.sprite.position.y = wave.y;
  306.       wave.vx = Math.cos(wave.angle) * wave.speed;
  307.       wave.vy = Math.sin(wave.angle) * wave.speed;
  308.       wave.x += wave.vx;
  309.       wave.y += wave.vy;
  310.       wave.speed *= 1.01;
  311.       if (wave.x > w + 200 || wave.x < -200 || wave.y > h + 200) {
  312.         wave.x = w / 2;
  313.         wave.y = h / 2;
  314.         wave.speed = 0.01 + Math.random() / 10;
  315.       }
  316.     }
  317.     if (parts.length < partCount) {
  318.       var part = new PIXI.Sprite(partTexture),
  319.         scale = 0.2 + Math.random() * 0.8,
  320.         type = Math.random() > 0.5 ? 1 : 0;
  321.       part.position.x = w / 2 + Math.random() * 380 - 190;
  322.       part.position.y = h / 2 + 0;
  323.       part.anchor.x = 0.5;
  324.       part.anchor.y = 0.5;
  325.       part.scale.x = type ? scale : scale * 0.5;
  326.       part.scale.y = type ? scale : scale * 15;
  327.       part.blendMode = PIXI.BLEND_MODES.SCREEN;
  328.       parts.push({
  329.         sprite: part,
  330.         ox: part.position.x,
  331.         oy: part.position.y,
  332.         x: part.position.x,
  333.         y: part.position.y,
  334.         vx: 0,
  335.         vy: 0,
  336.         angle: (-Math.PI * 0.5) + (w / 2 - part.position.x) / 750,
  337.         speed: 0.0001 + Math.random() / 50
  338.       });
  339.       stage.addChild(part);
  340.     }
  341.     for (var i = 0, length = parts.length; i < length; i++) {
  342.       var part = parts[i];
  343.       part.sprite.position.x = part.x;
  344.       part.sprite.position.y = part.y;
  345.       part.vx = Math.cos(part.angle) * part.speed;
  346.       part.vy = Math.sin(part.angle) * part.speed;
  347.       part.x += part.vx;
  348.       part.y += part.vy;
  349.       part.speed *= 1.01;
  350.       if (part.x > w + 50 || part.x < -50 || part.y < -50) {
  351.         part.x = part.ox;
  352.         part.y = part.oy;
  353.         part.speed = 0.01 + Math.random() / 50;
  354.       }
  355.     }
  356.     renderer.render(stage);
  357.   }
  359.   function loop() {
  360.     step();
  361.     requestAnimationFrame(loop);
  362.   }
  363.   window.addEventListener('resize', reset);
  364.   init();
  365. })(PIXI, this, document);
  366. </script>
  368. </body>
  369. </html>
复制代码




由于js文件过多，整个文件已放下载区，接待下载，free

下载链接：https://download.csdn.net/download/stqer/89289948

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

我爱普洱茶

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表