遮蔽效果的图片幻灯

jQuery, Slider

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// buttons
var sliderControl = document.querySelector(".slider-control");

// slides informations
var slides = document.querySelectorAll(".slide"),
    slidesLength = slides.length;

// slides array
var slidesArr = [].slice.call(slides);

// reverse array sorting
slidesArr = slidesArr.reverse();

// slide current
var slideCurrent = 0;

sliderControl.addEventListener("click", function(e) {
    target = e.target;

// get next button
    if (target.classList.contains("next")) {

next = e.target,
            prev = next.previousElementSibling,
            nextSlide = slidesArr[slideCurrent + 1],
            slide = slidesArr[slideCurrent];

slide.classList.add("slide-on");
        slide.classList.remove("text-on");
        nextSlide.classList.add("text-on");

slideCurrent += 1;

if (slideCurrent > 0) {
            prev.classList.remove("disabled");
        }

if (slideCurrent === slidesLength - 1) {
            next.classList.add("disabled");
        }
    }

// get prev button
    if (target.classList.contains("prev")) {

slideCurrent -= 1;

prev = e.target,
            next = prev.nextElementSibling,
            prevSlide = slidesArr[slideCurrent + 1],
            slide = slidesArr[slideCurrent];

prevSlide.classList.remove("text-on");
        slide.classList.remove("slide-on");
        slide.classList.add("text-on");

if (slideCurrent === slidesLength - 2) {
            next.classList.remove("disabled");
        }

if (slideCurrent === 0) {
            prev.classList.add("disabled");
        }

}

});

balapaCop("Image Slider", "#999");

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
html,
body {
    height: 100%;
    position: relative;
    font-family: Roboto;
    background: #f8f8f8;
}
.slider-ctr {
    width: 700px;
    height: 440px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -220px;
    margin-left: -350px;
    box-sizing: border-box;
    border: 10px solid white;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 10px 15px 3px rgba(0, 0, 0, 0.15), 0 5px 20px 3px rgba(0, 0, 0, 0.1);
}
.slider-ctr:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, transparent 70%, rgba(0, 0, 0, 0.6) 100%);
    background: -webkit-linear-gradient(to bottom, transparent 70%, rgba(0, 0, 0, 0.6) 100%);
    pointer-events: none;
    z-index: 9;
}
.slider-control {
    position: absolute;
    right: 30px;
    bottom: 30px;
    width: 80px;
    overflow: hidden;
    border-radius: 3px;
    box-shadow: 0 3px 3px 3px rgba(0, 0, 0, 0.15);
    z-index: 99;
}
.slider-control .control {
    width: 50%;
    height: 40px;
    display: block;
    float: left;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    transition: .3s all ease;
    background: white;
}
.slider-control .control .icon {
    pointer-events: none;
    transition: .3s all ease;
}
.slider-control .control.disabled {
    pointer-events: none;
    background: #ddd;
}
.slider-control .control.disabled .icon {
    opacity: .5;
}
.slide {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: 0.45s all cubic-bezier(0.65, 0.05, 0.36, 1);
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
}
.slide:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.125);
}
.slide.slide-on {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
}
.slide.text-on .title {
    transition: 0.3s all cubic-bezier(0.65, 0.05, 0.36, 1) 0.45s;
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
}
.slide.text-on .author {
    transition: 0.3s all cubic-bezier(0.65, 0.05, 0.36, 1) 0.6s;
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
}
.slide img {
    display: block;
}
.slide figcaption {
    position: absolute;
    top: 30px;
    left: 30px;
}
.slide .title {
    font-size: 50px;
    margin-bottom: 2px;
    color: white;
    transition: 0.3s all cubic-bezier(0.65, 0.05, 0.36, 1) 0.45s;
    -webkit-clip-path: inset(0 0 0 100%);
    clip-path: inset(0 0 0 100%);
    font-weight: 400;
    letter-spacing: 10px;
    text-transform: uppercase;
    position: relative;
}
.slide .author {
    font-size: 16px;
    color: white;
    opacity: .8;
    transition: 0.3s all cubic-bezier(0.65, 0.05, 0.36, 1) 0.45s;
    -webkit-clip-path: inset(0 0 0 100%);
    clip-path: inset(0 0 0 100%);
    font-weight: 300;
    letter-spacing: 3px;
    position: relative;
    z-index: 9;
}

HTML

<div class="slider-ctr">
    <figure class="slide"><img src="/uploads/160401/img5.jpeg" alt="Sky" />
        <figcaption>
            <div class="title">Sky</div>
            <div class="author">Aleksandra</div>
        </figcaption>
    </figure>
    <figure class="slide"><img src="/uploads/160401/img1.jpeg" alt="River" />
        <figcaption>
            <div class="title">River</div>
            <div class="author">Ales Krivec</div>
        </figcaption>
    </figure>
    <figure class="slide"><img src="/uploads/160401/img4.jpeg" alt="Rain" />
        <figcaption>
            <div class="title">Rain</div>
            <div class="author">Wilson Lau</div>
        </figcaption>
    </figure>
    <figure class="slide text-on"><img src="/uploads/160401/img2.jpeg" alt="Ocean" />
        <figcaption>
            <div class="title">Ocean</div>
            <div class="author">Rosan Harmens</div>
        </figcaption>
    </figure>
    <div class="slider-control">
        <div class="control prev disabled">
            <div class="icon ion-chevron-left"></div>
        </div>
        <div class="control next">
            <div class="icon ion-chevron-right"></div>
        </div>
    </div>
</div>

jQuery, Slider

编辑器支持Emmet

快捷键

jQuery, Slider

带快速运动过渡效果的图像幻灯片

幻灯片导航按钮的果冻旋转动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：