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

<!DOCTYPE html>
<html lang="en">
<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'>
      @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;


<body translate="no">
<div class="hero">
<h1>Ripple Effect with PIXIJS</h1>
<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>
      // 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);

app.stage.interactive = true;
var posX, displacementSprite, displacementFilter, bg, vx;
var container = new PIXI.Container();