PIXIJS波纹动画效果-html代码-BFW代码库

PIXIJS波纹动画效果

代码语言：html

所属分类：背景

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>CodePen - Riffle Effect with PIXIJS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/css/ionicons.min.css'>
<style>
      @import url("https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap");
*, *:before, *:after {
  box-sizing: border-box;
}

body, html {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Abril Fatface', cursive;
  cursor: crosshair;
}

canvas {
  width: 100vw;
  height: 100vh;
}

.hero {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  left: 0;
  right: 0;
}
.hero h1 {
  font-size: 24px;
  line-height: normal;
  margin: 0;
  color: rgba(255, 235, 59, 0.8);
}
@media only screen and (min-width: 768px) {
  .hero h1 {
    font-size: 54px;
  }
}
@media only screen and (min-width: 1170px) {
  .hero h1 {
    font-size: 90px;
  }
}
@media only screen and (min-width: 1400px) {
  .hero h1 {
    font-size: 100px;
  }
}

.note {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  color: #fff;
  text-align: center;
  font-size: 12px;
}

    </style>

</head>
<body translate="no">
<div class="hero">
<h1>Ripple Effect with PIXIJS</h1>
</div>
<p class="note">Note: Best view in Desktop</p>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.0/pixi.min.js'></script>
<script>
      // Thanks to codegrid Youtube channel for great inspiration and tutorials. Below code is inspired from one of the tutorials

// Set up the variables needed and loads the images to create the effect.
// Once the images are loaded the ‘setup’ function will be called.
var app = new PIXI.Application(window.innerWidth, window.innerHeight);
document.body.appendChild(app.view);

app.stage.interactive = true;
var posX, displacementSprite, displacementFilter, bg, vx;
var container = new PIXI.Container();
app.stage.addChild(container);
PIXI.loader.
add(
"https://raw.githubusercontent.com/codegridweb/Ripple-Eff.........完整代码请登录后点击上方下载按钮下载查看