幻灯片/轮播

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

面包多

全屏百叶窗式动感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)

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

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!