Html5基于WebGL图片模糊幻灯片切换特效

Html5基于WebGL图片模糊幻灯片切换特效

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

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

1
2
3
4
<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结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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>

文件信息:

    0

    发表评论