threejs 3D 爆炸碎片轮播图特效

创客云


这是一款基于threejs的3D爆炸碎片轮播图特效,该特效使用threejs来制作轮播图在切换时的爆炸特效,图片爆炸成碎片,然后组合为下一张新的图片,效果非常炫酷。

使用方法

在页面中引入下面的文件。

  1. <link rel="stylesheet" href="css/style.css">
  2. <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
  3. <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.min.js'></script>
  4. <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js'></script>
  5. <script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>
  6. <script  src="js/index.js"></script>

HTML结构

  1. <div id="uix-3d-slider--expParticle__loader" style="height: 5px; background: #A45CFB; position: absolute; z-index: 1; bottom: 0; left: 0; width: 0%;"></div>
  2. <div role="banner" class="uix-3d-slider--expParticle__wrapper">
  3.    <div class="uix-advanced-slider__outline uix-3d-slider--expParticle" 
  4.     data-draggable="false"
  5.     data-draggable-cursor="move"     
  6.     data-auto="true"
  7.     data-loop="true"
  8.     data-speed="800" 
  9.     data-timing="10000" 
  10.     data-count-total="false"
  11.     data-count-now="false"
  12.     data-filter-texture="false"
  13.     data-controls-pagination=".my-a-slider-pagination-2" 
  14.     data-controls-arrows=".my-a-slider-arrows-2">
  15.      <div class="uix-3d-slider--expParticle__inner">
  16.  
  17.        <div class="uix-3d-slider--expParticle__item">
  18.          <img src="https://placekitten.com/640/360" alt="Title 1" />
  19.  
  20.        </div>
  21.  
  22.        <div class="uix-3d-slider--expParticle__item">
  23.          <img src="https://placekitten.com/640/361" alt="Title 2" />
  24.        </div>
  25.  
  26.        <div class="uix-3d-slider--expParticle__item">
  27.          <img src="https://placekitten.com/640/362" alt="Title 3" />
  28.        </div> 
  29.      </div>
  30.   </div>
  31. </div>
  32. <div class="uix-3d-slider--expParticle__pagination my-a-slider-pagination-2"></div>
  33. <div class="uix-3d-slider--expParticle__arrows my-a-slider-arrows-2">
  34.   <a href="#" class="uix-3d-slider--expParticle__arrows--prev"><i class="fa fa-long-arrow-left" aria-hidden="true"></i></a>
  35.   <a href="#" class="uix-3d-slider--expParticle__arrows--next"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
  36. </div>

Codepen网址:https://codepen.io/UIUXLab/pen/RmGwwN

演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/48077.html
云模板

发表评论