简单JS创建图像过渡动画

image transition effect created by simple js

js, image

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

startImageTransition();

function startImageTransition() {
    var images = document.getElementsByClassName("test");

for (var i = 0; i < images.length; ++i) {
        images[i].style.opacity = 1;
    }

var top = 1;

var cur = images.length - 1;

setInterval(changeImage, 3000);

async function changeImage() {

var nextImage = (1 + cur) % images.length;

images[cur].style.zIndex = top + 1;
        images[nextImage].style.zIndex = top;

await transition();

images[cur].style.zIndex = top;

images[nextImage].style.zIndex = top + 1;

top = top + 1;

images[cur].style.opacity = 1;

cur = nextImage;

}

function transition() {
        return new Promise(function(resolve, reject) {
            var del = 0.01;

var id = setInterval(changeOpacity, 10);

function changeOpacity() {
                images[cur].style.opacity -= del;
                if (images[cur].style.opacity <= 0) {
                    clearInterval(id);
                    resolve();
                }
            }

})
    }
}

/* NO-BEAUTIFY */

编译

CSS

HTML

image transition effect created by simple js

js, image

编辑器支持Emmet

快捷键

image transition effect created by simple js

js, image

基于jQuery和GSAP实现的页面滚动图像过渡切换动画

HTML5柏林噪音算法实现的墨汁浸染背景图片过渡动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：