HTML5+SlickJS实现带漂亮切割动画的幻灯片

Split Slick Slideshow

html5, slider

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3779
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var $slider = $('.slideshow .slider'),
    maxItems = $('.item', $slider).length;

$sliderRight = $('.slideshow').clone().addClass('slideshow-right').appendTo($('.split-slideshow'));

rightItems = $('.item', $sliderRight).toArray();
reverseItems = rightItems.reverse();
$('.slider', $sliderRight).html('');
for (i = 0; i < maxItems; i++) {
    $(reverseItems[i]).appendTo($('.slider', $sliderRight));
}

$slider.addClass('slideshow-left');
$('.slideshow-left').slick({
    vertical: true,
    verticalSwiping: true,
    arrows: false,
    infinite: true,
    dots: true,
    speed: 1000,
    cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)'
}).on('beforeChange', function(event, slick, currentSlide, nextSlide) {

if (currentSlide > nextSlide && nextSlide == 0 && currentSlide == maxItems - 1) {
        $('.slideshow-right .slider').slick('slickGoTo', -1);
        $('.slideshow-text').slick('slickGoTo', maxItems);
    } else if (currentSlide < nextSlide && currentSlide == 0 && nextSlide == maxItems - 1) {
        $('.slideshow-right .slider').slick('slickGoTo', maxItems);
        $('.slideshow-text').slick('slickGoTo', -1);
    } else {
        $('.slideshow-right .slider').slick('slickGoTo', maxItems - 1 - nextSlide);
        $('.slideshow-text').slick('slickGoTo', nextSlide);
    }
}).on("mousewheel", function(event) {
    event.preventDefault();
    if (event.deltaX > 0 || event.deltaY < 0) {
        $(this).slick('slickNext');
    } else if (event.deltaX < 0 || event.deltaY > 0) {
        $(this).slick('slickPrev');
    };
});

$('.slideshow-right .slider').slick({
    swipe: false,
    vertical: true,
    arrows: false,
    infinite: true,
    speed: 950,
    cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)',
    initialSlide: maxItems - 1
});
$('.slideshow-text').slick({
    swipe: false,
    vertical: true,
    arrows: false,
    infinite: true,
    speed: 900,
    cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)'
});

编译

CSS

body,
html {
    height: 100%;
    background: #110101;
    font-family: 'Roboto', sans-serif;
    overflow: hidden;
}
.slideshow {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.slideshow .slider {
    width: 100vw;
    height: 100vw;
    z-index: 2;
}
.slideshow .slider * {
    outline: none;
}
.slideshow .slider .item {
    height: 100vh;
    width: 100vw;
    position: relative;
    overflow: hidden;
    border: none;
}
.slideshow .slider .item .text {
    display: none;
}
.slideshow .slider .item img {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.slideshow .slick-dots {
    position: fixed;
    z-index: 100;
    width: 40px;
    height: auto;
    bottom: auto;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: auto;
    color: #fff;
    display: block;
}
.slideshow .slick-dots li {
    display: block;
    width: 100%;
    height: auto;
}
.slideshow .slick-dots li button {
    position: relative;
    width: 20px;
    height: 15px;
    text-align: center;
}
.slideshow .slick-dots li button:before {
    content: '';
    background: #fff;
    color: #fff;
    height: 2px;
    width: 20px;
    border-radius: 0;
    position: absolute;
    top: 50%;
    right: 0;
    left: auto;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    opacity: 0.6;
}
.slideshow .slick-dots li.slick-active button:before {
    width: 40px;
    opacity: 1;
}
.slideshow.slideshow-right {
    left: 0;
    z-index: 1;
    width: 50vw;
    pointer-events: none;
}
.slideshow.slideshow-right .slider {
    left: 0;
    position: absolute;
}
.slideshow-text {
    position: absolute !important;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 100;
    font-size: 80px;
    width: 100vw;
    text-align: center;
    color: #fff;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 100;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 20px;
    line-height: 0.8;
}
@media (max-width: 767px) {
    .slideshow-text {
        font-size: 40px;
    }
}

HTML

<div class="split-slideshow">
    <div class="slideshow">
        <div class="slider">
            <div class="item">
                <img src="/uploads/1703/pats/pexels-photo-200231.jpeg" />
            </div>
            <div class="item">
                <img src="/uploads/1703/pats/pexels-photo-299109.jpeg" />
            </div>
            <div class="item">
                <img src="/uploads/1703/pats/pexels-photo-345753.jpeg" />
            </div>
            <div class="item">
                <img src="/uploads/1703/pats/pexels-photo-299109.jpeg" />
            </div>
        </div>
    </div>
    <div class="slideshow-text">
        <div class="item">Canyon</div>
        <div class="item">Desert</div>
        <div class="item">Erosion</div>
        <div class="item">Shape</div>
    </div>
</div>

Split Slick Slideshow

html5, slider

编辑器支持Emmet

快捷键

Split Slick Slideshow

html5, slider

HTML5一款带Slider功能的动画卡片模板

使用BabylonJS（HTML5 WebGL）实现的刺客信条海盗网页游戏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：