scroll-timeline实现页面分屏滚动数字指示动画效果-html代码-BFW代码库

scroll-timeline实现页面分屏滚动数字指示动画效果

代码语言：html

代码描述：scroll-timeline实现页面分屏滚动数字指示动画效果

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/scroll-timeline.js"></script>
    <style>
        main {
            max-block-size: 100vh;
            overflow-y: scroll;
            -ms-scroll-snap-type: y mandatory;
            scroll-snap-type: y mandatory;
        }

        section {
            block-size: 100vh;
            inline-size: 100vw;
            /*   scroll-snap-stop: always; */
            scroll-snap-align: start;
            display: grid;
            place-content: center;
            position: relative;
        }

        section:nth-of-type(odd) {
            background: black;
            color: white;
        }

        h1 {
            font-variant-numeric: tabular-nums;
            font-size: 25vmin;
            font-weight: 300;
            display: -webkit-box;
            display: flex;
            -webkit-box-align: center;
            align-items: center;
            gap: .5ch;
        }

        .slash {
            font-family: Roboto,monospace;
            font-weight: 400;
        }

        .stuck {
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            pointer-events: none;
            -webkit-clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
            clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
        }

        .stuck > h1 {
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            will-change: transform;
            place-content: center;
            grid-auto-flow: column;
        }

        [invisible] {
            visibility: hidden;
        }

        body {
            margin: 0;
            box-sizing: border-box;
            font-family: system-ui,sans-serif;
        }
    </style>

</head>
<body translate="no">
    <main>
        <section>
            <h1>
                <span>1</span>
                <span invisible class="slash">/</span>
                <span invisible>4</span>
            </h1>
            <div class="stuck">
                <h1>
                    <span invisible>1</span>
                    <span class="slash">/</span>
                    <span>4</span>
                </h1>
            </div>
        </section>
        <section>
            <h1>
                <span>2</span>
                <span invisible class="slash&q.........完整代码请登录后点击上方下载按钮下载查看