css实现视觉差异滚动效果代码-html代码-BFW代码库

代码语言：html
代码描述：css实现视觉差异滚动效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">

    <style>
@import url('https://fonts.googleapis.com/css2?family=Lato&family=Playfair+Display:wght@700&display=swap');

:root {
        --scale: 0.1;
        --space: 8vmin;
        --font-primary: 'Lato', sans-serif;
        --font-heading: 'Playfair Display', serif;
    }

@media (prefers-reduced-motion) {
:root {
            --scale: 0;
        }
    }

        * {
            box-sizing: border-box;
        }

        body {
            color: hsl(0, 0%, 95%);
            background-color: hsl(5, 15%, 5%);
            font-size: clamp(1.2rem, 5vw, 1.5rem);
            font-family: var(--font-primary);
            line-height: 1.6;
        }

        a {
            color: hsl(65, 80%, 60%);
            text-decoration: none;
        }

        a:hover,
        a:focus {
            text-decoration: underline;
        }

        .page-title {
            text-align: center;
        }

        .page-title::after {
            content: '↓';
            display: block;
            font-size: 2em;
            opacity: 0;
            -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
            -webkit-animation: fadein 800ms 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
            animation: fadein 800ms 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }

        .header,
        .footer {
            display: grid;
            place-items: center;
            height: 100vh;
        }

        .section {
            -webkit-transform-origin: center top;
            transform-origin: center top;
            -webkit-transform: scaleY(calc(1 - var(--scale)));
            transform: scaleY(calc(1 - var(--scale)));
        }

        .section > * {
            -webkit-transform-origin: center top;
            transform-origin: center top;
            -webkit-transform: scaleY(calc(1 + var(--scale)));
            transform: scaleY(calc(1 + var(--scale)));
        }

        .section-title {
            font-family: var(--font-heading);
            font-size: clamp(2.5rem, 6vw, 4.5rem);
            font-weight: bold;
            line-height: 1.125;
        }

        .byline {
            display: block;
            font-size: 0.6em;
            margin: calc(var(--space) /1.35) 0;
        }

        .content {
            position: relative;
            margin: -50vh auto 0;
            padding: var(--space);
            max-width: 55ch;
            width: calc(100% - var(--space));
            background: hsla(5, 15%, 5%, 0.9);
        }

        .content > * + * {
            margin-top: 2rem;
        }

        .image-container {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            width: 100vw;
            height: 100vh;
            z-index: -2;
        }

        .image-container img {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover;
        }

        .image-container::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: -webkit-gradient(
            linear,
            left top, left bottom,
            from(hsla(5, 15%, 5%, 0)),
            color-stop(8.1%, hsla(5, 15%, 5%, 0.013)),
            color-stop(15.5%, hsla(5, 15%, 5%, 0.049)),
            color-stop(22.5%, hsla(5, 15%, 5%, 0.104)),
            color-stop(29%, hsla(5, 15%, 5%, 0.175)),
            color-stop(35.3%, hsla(5, 15%, 5%, 0.259)),
            color-stop(41.2%, hsla(5, 15%, 5%, 0.352)),
            color-stop(47.1%, hsla(5, 15%, 5%, 0.45)),
            color-stop(52.9%, hsla(5, 15%, 5%, 0.55)),
            color-stop(58.8%, hsla(5, 15%, 5%, 0.648)),
            color-stop(64.7%, hsla(5, 15%, 5%, 0.741)),
            color-stop(71%, hsla(5, 15%, 5%, 0.825)),
            color-stop(77.5%, hsla(5, 15%, 5%, 0.896)),
            color-stop(84.5%, hsla(5, 15%, 5%, 0.951)),
            color-stop(91.9%, hsla(5, 15%, 5%, 0.987)),
            to(hsl(5, 15%, 5%))
            );
            background: linear-gradient(
            to bottom,
            hsla(5, 15%, 5%, 0) 0%,
            hsla(5, 15%, 5%, 0.013) 8.1%,
            hsla(5, 15%, 5%, 0.049) 15.5%,
            hsla(5, 15%, 5%, 0.104) 22.5%,
            hsla(5, 15%, 5%, 0.175) 29%,
            hsla(5, 15%, 5%, 0.259) 35.3%,
            hsla(5, 15%, 5%, 0.352) 41.2%,
            hsla(5, 15%, 5%, 0.45) 47.1%,
            hsla(5, 15%, 5%, 0.55) 52.9%,
            hsla(5, 15%, 5%, 0.648) 58.8%,
            hsla(5, 15%, 5%, 0.741) 64.7%,
            hsla(5, 15%, 5%, 0.825) 71%,
            hsla(5, 15%, 5%, 0.896) 77.5%,
            hsla(5, 15%, 5%, 0.951) 84.5%,
            hsla(5, 15%, 5%, 0.987) 91.9%,
            hsl(5, 15%, 5%) 100%
            );
        }

@-webkit-keyframes fadein {
            to {
                opacity: 1;
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }
        }

@keyframes fadein {
            to {
                opacity: 1;
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }
        }
    </style>



</head>

<body>
    <header class="header">
        <h1 class="page-title">CSS position sticky parallax effect</h1>
    </header>
    <main class="main">
        <section class="section">
            <figure class="image-container"><img src="//repo.bfw.wiki/bfwrepo/image/5e957a2236f31.png" alt="" /></figure>
            <article class="content">
                <h2 class="section-title">Let's Get to Know One Another</h2><span class="byline">Content provided by <a href="" target="_blank" rel="noreferrer">the online dating ipsum generator →</a></span>
                <p>
                    If I make fun of you it's because I like you someone to provide for you documentary filmmaker everything destructive that I do. But I only smoke when drinking Think about it! heyyy I despise you should message me, my last partner told me really only soft drugs friendzone looking for a third if you dress up like a pin-up doll for me. Full-contact Ayn Rand Libertarian full-contact full-contact wildly attractive doesn't hurt.
                </p>
                <p>
                    P90X you should be clean and intelligent but I only smoke when drinking that means I am wonderful. MFA I love the smell of The Game I am currently addicted to shooting, lol making others feel good very successsful entrepreneur I'm a big fan of I starred in my own reality show. Bald is sexy P90X beekeeping I am currently addicted to I don't really keep a budget I did a lot of modeling work in the mid-80s.
                </p>
                <p>
                    No robots posing as real people P90X you need a real man working on my screenplay. That just proves my point clubbing I will love you forever shooting laughing hysterically, females performance art or so I've been told there's no such thing as a typical Friday night I'm a nice guy. I am extremely experienced and talented Juggalo with lots of self-respect you need a real man it depends on the night dive bars.
                </p>
                <p>
                    That's what she said heyyy everything destructive that I do my lizard tongue. Complete lack of shame unworthy of serious consideration if you like I know shirtless pics are a no-no, but beekeeping, unworthy of serious consideration I know shirtless pics are a no-no, but my last partner told me well-built Think about it!. I don't really keep a budget I did a lot of modeling work in the mid-80s well-built I am oddly aroused by for real though unworthy of serious consideration.
                </p>
                <p>
                    There's no such thing as a typical Friday night I starred in my own reality show I enjoy I'm a big fan of. See, I told you if I make fun of you it's because I like you dive bars because I am a paradox my deep, manly voice, complete .........完整代码请登录后点击上方下载按钮下载查看