很哇塞的网页特效之摩天轮相册

情人节到了，给大家分享一个仿摩天轮效果的相册页面，效果如下图：

页面主要部分是图片列表，使用div包裹：

        <div class="carousel-item">
            <div class="carousel-box">
                <div class="title">北京</div>
                <div class="num">01</div>
                <img src="aaa.jpg"
                />
            </div>
        </div>

        <div class="carousel-item">
            <div class="carousel-box">
                <div class="title">上海</div>
                <div class="num">02</div>
                <img src="bbb.jpg" />
            </div>
        </div>

        ......

然后通过样式设置图片位置、z-index、透明度、倾斜角度：

        .carousel-item {
            --items: 10;
            --width: clamp(150px, 30vw, 300px);
            --height: clamp(200px, 40vw, 400px);
            --x: calc(var(--active) * 800%);
            --y: calc(var(--active) * 200%);
            --rot: calc(var(--active) * 120deg);
            --opacity: calc(var(--zIndex) / var(--items) * 3 - 2);
            overflow: hidden;
            position: absolute;
            z-index: var(--zIndex);
            width: var(--width);
            height: var(--height);
            margin: calc(var(--height) * -0.5) 0 0 calc(var(--width) * -0.5);
            border-radius: 10px;
            top: 50%;
            left: 50%;
            user-select: none;
            transform-origin: 0% 100%;
            box-shadow: 0 10px 50px 10px rgba(0, 0, 0, .5);
            background: black;
            pointer-events: all;
            transform: translate(var(--x), var(--y)) rotate(var(--rot));
            transition: transform .8s cubic-bezier(0, 0.02, 0, 1);
        }

其中 --active 表示图片相对于正在顶层的图片比较的差值比例，比如当前展示第5张图片，则第四张图片的 --active = (4-5) / (总图片数量 --items=10)。--zIndex表示图片的z-index。

样式设置好后，再给图片和页面都加上监听事件，点击事件时点击图片则将该图片展示到最上层，滚动事件则向前向后按顺序展示图片。

        const $items = document.querySelectorAll('.carousel-item');        
        $items.forEach((item, i) => {
            item.addEventListener('click', () => {
                progress = (i / $items.length) * 100 + 10;
                animate();
            })
        });

        document.addEventListener('mousewheel', handleWheel);
        document.addEventListener('mousedown', handleMouseDown);
        document.addEventListener('mousemove', handleMouseMove);
        document.addEventListener('mouseup', handleMouseUp);
        document.addEventListener('touchstart', handleMouseDown);
        document.addEventListener('touchmove', handleMouseMove);
        document.addEventListener('touchend', handleMouseDown);

主要的方法是通过事件获取目标图片的index，再修改全部图片样式的 --active和 --zIndex 值从而实现动画效果：

        const animate = () => {
            progress = Math.max(0, Math.min(progress, 100));
            active = Math.floor(progress / 100 * ($items.length - 1));

            $items.forEach((item, index) => displayItems(item, index, active));
        };

        const displayItems = (item, index, active) => {
            const zIndex = getZindex([...$items], active)[index];
            item.style.setProperty('--zIndex', zIndex);
            item.style.setProperty('--active', (index - active) / $items.length);
        };

        const getZindex = (array, index) => (array.map((_, i) => (index === i) ? array.length : array.length - Math.abs(index - i)));

页面代码下载：https://download.csdn.net/download/evanyanglibo/87450156