幻灯片/轮播

炫酷全屏背景3D透视轮播图特效

创客主机


这是一款炫酷js和CSS3 3D透视轮播图特效。该3D轮播图通过CSS3制作图片的3D透视效果,并使用js来使轮播图于用户进行交互,效果非常炫酷。

使用方法

在页面中引入style.css和index.js文件。

  1. <link href="css/style.css" rel="stylesheet">
  2. <script src="js/index.js"></script>

HTML结构

该3D轮播图的基本HTML结构如下:

  1. <div class="slider" id="slider" style="--img-prev:url(img/1.jpg)"> 
    
  2.   <div class="slider__content" id="slider-content">
    
  3.     <div class="slider__images">
    
  4.       <div class="slider__images-item slider__images-item--active" data-id="1"><img src="img/1.jpg"/></div>
    
  5.       <div class="slider__images-item" data-id="2"><img src="img/2.jpg"/></div>
    
  6.       <div class="slider__images-item" data-id="3"><img src="img/3.jpg"/></div>
    
  7.       <div class="slider__images-item" data-id="4"><img src="img/4.jpg"/></div>
    
  8.       <div class="slider__images-item" data-id="5"><img src="img/5.jpg"/></div>
    
  9.     </div>
    
  10.     <div class="slider__text">
    
  11.       <div class="slider__text-item slider__text-item--active" data-id="1">
    
  12.         <div class="slider__text-item-head">
    
  13.           <h3>Forest</h3>
    
  14.         </div>
    
  15.         <div class="slider__text-item-info">
    
  16.           <p>“And into the forest I go, to lose my mind and find my soul”</p>
    
  17.         </div>
    
  18.       </div>
    
  19.       <div class="slider__text-item" data-id="2">
    
  20.         <div class="slider__text-item-head">
    
  21.           <h3>Lake</h3>
    
  22.         </div>
    
  23.         <div class="slider__text-item-info">
    
  24.           <p>“Mist to mist, drops to drops. For water thou art, and unto water shalt thou return”</p>
    
  25.         </div>
    
  26.       </div>
    
  27.       <div class="slider__text-item" data-id="3">
    
  28.         <div class="slider__text-item-head">
    
  29.           <h3>Cliffs</h3>
    
  30.         </div>
    
  31.         <div class="slider__text-item-info">
    
  32.           <p>“Go to the edge of the cliff and jump off. Build your wings on the way down”</p>
    
  33.         </div>
    
  34.       </div>
    
  35.       <div class="slider__text-item" data-id="4">
    
  36.         <div class="slider__text-item-head">
    
  37.           <h3>Mountains</h3>
    
  38.         </div>
    
  39.         <div class="slider__text-item-info">
    
  40.           <p>“What are men to rocks and mountains?”</p>
    
  41.         </div>
    
  42.       </div>
    
  43.       <div class="slider__text-item" data-id="5">
    
  44.         <div class="slider__text-item-head">
    
  45.           <h3>Peaks</h3>
    
  46.         </div>
    
  47.         <div class="slider__text-item-info">
    
  48.           <p>“On all the peaks lies peace”</p>
    
  49.         </div>
    
  50.       </div>
    
  51.     </div>
    
  52.   </div>
    
  53.   <div class="slider__nav">
    
  54.     <div class="slider__nav-arrows">
    
  55.       <div class="slider__nav-arrow slider__nav-arrow--left" id="left">to left</div>
    
  56.       <div class="slider__nav-arrow slider__nav-arrow--right" id="right">to right</div>
    
  57.     </div>
    
  58.     <div class="slider__nav-dots" id="slider-dots">
    
  59.       <div class="slider__nav-dot slider__nav-dot--active" data-id="1"></div>
    
  60.       <div class="slider__nav-dot" data-id="2"></div>
    
  61.       <div class="slider__nav-dot" data-id="3"></div>
    
  62.       <div class="slider__nav-dot" data-id="4"></div>
    
  63.       <div class="slider__nav-dot" data-id="5"></div>
    
  64.     </div>
    
  65.   </div>
    
  66. </div>

由于该3D轮播图采用es6和css变量等多种最新的技术,所以不是所有的浏览器都支持这个特效。

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!