一款带涟漪波动动画特效的幻灯片控件

Slider with clip-path animation

h5, css3, slider, clip-path

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

console.clear();
initslider();

function initslider() {
    const elPrevButton = document.querySelector('.slider #prev');
    const elNextButton = document.querySelector('.slider #next');

const elImages = Array.from(document.querySelectorAll('.slider .image'));

let state = {
        photo: 0
    };

function send(event) {

const elActives = document.querySelectorAll('.slider [data-active]');

Array.from(elActives)
            .forEach(el => el.removeAttribute('data-active'));

switch (event) {
            case 'PREV':
                state.photo--;
                // Math.max(state.photo - 1, 0);
                break;
            case 'NEXT':
                state.photo++;
                // Math.min(state.photo + 1, elImages.length - 1);
                break;
            default:
                state.photo = +event;
                break;
        }

var len = elImages.length;
        // Loop Around
        //state.photo = ( ( state.photo % len) + len ) % len;
        state.photo = Math.max(0, Math.min(state.photo, len - 1));

Array.from(document.querySelectorAll(`.slider [data-key="${state.photo}"]`))
            .forEach(el => {
                el.setAttribute('data-active', true);
            });

}
    elPrevButton.addEventListener('click', () => {
        send('PREV');
    });

elNextButton.addEventListener('click', () => {
        send('NEXT');
    });

const elStatus = Array.from(document.querySelectorAll('.slider .stat'));
    elStatus.forEach(stat => {
        stat.addEventListener('click', () => {
            send(stat.dataset.key);
        });
    });
    send(0);
};

编译

CSS

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1Mu51xIIzc.ttf) format('truetype');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxP.ttf) format('truetype');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBBc9.ttf) format('truetype');
}
html {
    height: 100%;
    background: #1A2A3A;
    color: #FFF;
}
body {
    font-family: Roboto, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}
*,
*:before,
*:after {
    box-sizing: border-box;
    position: relative;
    transition-property: clip-path, opacity;
    transition-duration: 900ms, 300ms;
    transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
}
.slider {
    position: relative;
    display: flex;
    width: 100vw;
    height: 90vh;
    overflow: hidden;
}
.slider .status {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
}
.slider .status .stat {
    width: 10px;
    height: 10px;
    background-color: transparent;
    border-radius: 50%;
    z-index: 11;
    margin: 0px 5px;
    border: 2px solid #fff;
}
.slider .status .stat[data-active] {
    background-color: #fff;
}
.slider img {
    object-fit: cover;
    object-position: center 80%;
    width: 100%;
    height: 100%;
    display: block;
}
.slider .image {
    width: 100%;
    margin-right: -100%;
    opacity: 0;
    display: block;
}
.slider .image img {
    clip-path: circle(50px at 5vw 50%);
}
.slider .image[data-active] {
    opacity: 1;
}
.slider .image[data-active] img {
    clip-path: circle(100vmax at 50% 50%);
}
.slider .image[data-active] ~ .image {
    opacity: 0;
}
.slider .image[data-active] ~ .image img {
    clip-path: circle(50px at 95vw 50%);
}
.slider svg {
    height: 30px;
    position: absolute;
    top: 50%;
    margin-top: -15px;
    z-index: 1000;
    cursor: pointer;
    overflow: visible;
}
.slider svg path {
    stroke: #666;
    stroke-linecap: round;
    stroke-width: 12px;
    fill: transparent;
}
.slider svg circle {
    fill: #fff9;
}
.slider svg#next {
    right: 5vw;
}
.slider svg#prev {
    left: 5vw;
}
.dwf {
    position: fixed;
    bottom: 4px;
    right: 10px;
    background-color: #0003;
    padding: 3px;
    border-radius: 3px;
}

HTML

Slider with clip-path animation

h5, css3, slider, clip-path

编辑器支持Emmet

快捷键

Slider with clip-path animation

h5, css3, slider, clip-path

Three.js/WebGL带图片粉末化动画特效的幻灯片

WebGL Three.js带背景图融化（虚化）动画特效的时尚风幻灯片

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：