使用Web Animation API和CSS3 clipPath裁剪路径实现的侧滑式相册

Side-Slide Image Gallery with clipPath and Web Animations API, 点击图片，从左侧列表滑入中间并显示图片全貌。

slider, gallery

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

const imageArea = document.getElementById("sidle"),
    images = imageArea.getElementsByTagName("img");

if (images.length > 1) {
    for (var i = 0; i < images.length; i++) {
        let topEdge = ((100 / images.length) * i) + 1,
            bottomEdge = (topEdge + (100 / images.length)) - 1;
        images[i].style.clipPath = `polygon(0% ${topEdge}%, 100% ${topEdge}%, 100% ${bottomEdge}%, 0% ${bottomEdge}%)`;
    }
    imageArea.classList.add("slide");

编译

CSS

HTML

Side-Slide Image Gallery with clipPath and Web Animations API, 点击图片，从左侧列表滑入中间并显示图片全貌。

slider, gallery

编辑器支持Emmet

快捷键

Side-Slide Image Gallery with clipPath and Web Animations API, 点击图片，从左侧列表滑入中间并显示图片全貌。

slider, gallery

Slick.js+Animate.css 带文本说明层的平滑图片轮播控件

使用CSS3给Owl Carousel插件实现的幻灯片添加镜头拉近特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：