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

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > 全屏百叶窗式动感js轮播图特效
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
全屏百叶窗式动感js轮播图特效
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2017-05-03
    阅读:
简要教程

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

使用方法

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

<script src="path/to/anime.min.js"></script>                    
<script src="path/to/interaction.js"></script>                    
                
HTML结构

轮播图的HTML结构如下:

<div id="sections-wrapper">
    <section class="show" data-img="img/mountain.jpg"></section>
    <section class="hide-bottom" data-img="img/shore.jpg"></section>
    <section class="hide-bottom" data-img="img/twilight.jpg"></section>
    <section class="hide-bottom" data-img="img/parachute.jpg"></section>
    <section class="hide-bottom" data-img="img/sky.jpg"></section>
</div>
                
CSS样式

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

#sections-wrapper {
    position: relative;
    overflow: hidden;
    height: 100vh;
    background: #000;
}

section {
    height: 100vh;
    font-size: 0;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.hide-bottom {
    transform: translateY(100%);
}

.hide-top {
    transform: translateY(-100%);
}                 
                

这款全屏百叶窗式动感js轮播图特效的github地址为:https://github.com/balapa/Sliced-Slideshow

网友评论