幻灯片/轮播

全屏百叶窗式动感js轮播图特效

创客主机


这是一款基于anime.js的全屏百叶窗式动感js轮播图特效。该js轮播图在进行前后切换图片时,每张图片都被分割为多个切片,然后各个切片像翻牌一样翻转到下一张图片,效果非常炫酷。

使用方法:

在页面中引入anime.min.js和interaction.js文件。

  1. <script src="path/to/anime.min.js"></script>                    
  2. <script src="path/to/interaction.js"></script>

HTML结构:

轮播图的HTML结构如下:

  1. <div id="sections-wrapper">
  2.     <section class="show" data-img="img/mountain.jpg"></section>
  3.     <section class="hide-bottom" data-img="img/shore.jpg"></section>
  4.     <section class="hide-bottom" data-img="img/twilight.jpg"></section>
  5.     <section class="hide-bottom" data-img="img/parachute.jpg"></section>
  6.     <section class="hide-bottom" data-img="img/sky.jpg"></section>
  7. </div>

CSS样式:

为轮播图添加必要的CSS样式。

  1. #sections-wrapper {
  2.     position: relative;
  3.     overflow: hidden;
  4.     height: 100vh;
  5.     background: #000;
  6. }
  7.  
  8. section {
  9.     height: 100vh;
  10.     font-size: 0;
  11.     text-align: center;
  12.     position: absolute;
  13.     top: 0;
  14.     left: 0;
  15.     right: 0;
  16.     bottom: 0;
  17. }
  18.  
  19. .hide-bottom {
  20.     transform: translateY(100%);
  21. }
  22.  
  23. .hide-top {
  24.     transform: translateY(-100%);
  25. }

Github地址:https://github.com/balapa/Sliced-Slideshow

(0)

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

阿里云

热评文章

发表评论

嘿,欢迎咨询!