scroll-timeline实现竖排反向滚动交叉效果代码-html代码-BFW代码库

scroll-timeline实现竖排反向滚动交叉效果代码

代码语言：html

代码描述：scroll-timeline实现竖排反向滚动交叉效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        /* Three column layout */
        .columns {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        
            width: 100%;
            max-width: 80em;
            margin: 0 auto;
            position: relative;
        }
        
        /* Inside one column, lay out all items in column direction */
        .column {
            --column-offset: 10vh;
            display: flex;
            flex-direction: column;
            padding: var(--column-offset) 0;
        }
        
        /* Limit site of the images */
        .column__item-imgwrap img {
            border-radius: 1em;
            width: 100%;
            height: auto;
            aspect-ratio: 0.75;
            object-fit: cover;
        }
        
        .column__item-caption {
            text-align: center;
        }
        
        /* Show warning for older browsers */
        .warning,
        .info {
            position: fixed;
            right: 1em;
            left: 1em;
            bottom: 1em;
            padding: 1em;
            border: 1px solid black;
            z-index: 9999;
            text-align: center;
            color: black;
            background: rgba(255 255 225 / 0.9);
        }
        .warning a,
        .info a {
            color: blue;
        }
        .info {
            display: none;
            border: 1px solid #123456;
            background: rgba(205 230 255 / 0.8);
        }
        
        /* Scroll-Timeline Supported, Yay! */
        @supports (animation-timeline: works) {
            /* Hide Warning */
            .warning {
                display: none;
            }
        
            /* As we're about to shift content out of .columns, we need it to hide its overflow */
            .columns {
                overflow-y: hidden;
            }
        
            .column-reverse .........完整代码请登录后点击上方下载按钮下载查看