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

代码语言：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 {
                /* Flip item order in reverse columns */
                flex-direction: column-reverse;
            }
        
            /* Set up Animation */
            @keyframes adjust-position {
                /* Start position: shift entire column up, but not so that it goes out of view */
                from {
                    transform: translateY(calc(-100% + 100vh));
                }
                /* End position: shift entire column down, but not so that it goes out of view */
                to {
                    transform: translateY(calc(100% - 100vh));
                }
            }
        
            /* Set up scroll-timeline */
            @scroll-timeline scroll-in-document {
                source: auto; /* Default scroll-timeline: scrolling in the document */
            }
        
            /* Hook our animation with the timeline to our columns */
            .column-reverse {
                animation: 1s adjust-position linear forwards;
                animation-timeline: scroll-in-document;
            }
        }
        
        /* general styles */
        * {
            box-sizing: border-box;
        }
        
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            overscroll-behavior: none;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
                "Segoe UI Symbol";
        }
    </style>



</head>

<body>
    <div class="columns" data-scroll-container="">
        <div class="column column-reverse">
            <figure class="column__item">
                <div class="column__item-imgwrap">
                    <img src="//repo.bfw.wiki/bfwrepo/image/6032e4426c6dd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" alt="" title="" height="" width="" />
                </div>
                <figcaption class="column__item-caption"> <span>Cyber Blue</span> <span>2011</span> </figcaption>
            </figure>
            <figure class="column__item">
                <div class="column__item-imgwrap">
                    <img src="//repo.bfw.wiki/bfwrepo/image/5d65eac5da40b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" alt="" title="" height="" width="" />
                </div>
                <figcaption class="column__item-caption"> <span>Gnostic Will</span> <span>2012</span> </figcaption>
            </figure>
            <figure class="column__item">
                <div class="column__item-imgwrap">
                    <img src="//repo.bfw.wiki/bfwrepo/image/5df5d4975ee07.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" alt="" title="" height="" width="" />
                </div>
                <figcaption class="column__item-caption"> <span>French Kiss</span> <span>2013</span> </figcaption>
            </figure>
            <figure class="column__item">
                <div class="column__item-imgwrap">
                    <img src="//repo.bfw.wiki/bfwrepo/image/5e1c022531682.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" alt="" title="" height="" width="" />
                </div>
                <figcaption class="column__item-caption"> <span>Half Life</span> <span>2014</span> </figcaption>
            </figure>
            <figure class="column__item">
                <div class="column__item-imgwrap">
                    <img src="//repo.bfw.wiki/bfwrepo/image/5e323253cf4d2.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" alt="" title="" height="" width="" />
                </div>
                <figcaption class="column__item-caption"> <span>Love Boat</span> <span>2015</span> </figcaption>
            </figure>
            <figure class="column__item".........完整代码请登录后点击上方下载按钮下载查看