这是一款html5 WebGL液态图片切换效果，模糊图片幻灯片展示特效。

使用方法

在页面引入以下three.min.js、imagesloaded.pkgd.js、TweenMax.min.js、index.js文件

<script type="text/javascript" src='js/three.min.js'></script>
<script type="text/javascript" src='js/imagesloaded.pkgd.js'></script>
<script type="text/javascript" src='js/TweenMax.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>

HTML结构

<main>
  <div id="slider">
  
      <div class="slider-inner">
          <div id="slider-content">
              <div class="meta">Species</div>
              <h2 id="slide-title">Amur <br>Leopard</h2>
              <span data-slide-title="0">Amur <br>Leopard</span>
              <span data-slide-title="1">Asiatic <br>Lion</span>
              <span data-slide-title="2">Siberian <br>Tiger</span>
              <span data-slide-title="3">Brown <br>Bear</span>
              <div class="meta">Status</div>
              <div id="slide-status">Critically Endangered</div>
              <span data-slide-status="0">Critically Endangered</span>
              <span data-slide-status="1">Endangered</span>
              <span data-slide-status="2">Endangered</span>
              <span data-slide-status="3">Least Concern</span>
          </div>
      </div>
  
      <img src="img/a1.jpg" />
      <img src="img/a2.jpg" />
      <img src="img/a3.jpg" />
      <img src="img/a4.jpg" />
  
      <div id="pagination">
          <button class="active" data-slide="0"></button>
          <button data-slide="1"></button>
          <button data-slide="2"></button>
          <button data-slide="3"></button>
      </div>
  
  </div>
</main>