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

代码语言：html

代码描述：luxy实现视觉差异滚动效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css">

    <style>
        body {
          line-height: 1.6;
          font-size: 1.1rem;
          display: flex;
          justify-content: center;
        }
        
        .content {
          max-width: 40rem;
          margin: 0 auto;
        }
        
        .section {
          position: relative;
          overflow: hidden;
          height: 100vh;
          display: flex;
          align-items: center;
        }
        .section .content {
          position: relative;
          z-index: 1;
          padding: 2rem;
          color: white;
        }
        
        .image {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 120vh;
          background: #eee;
        }
        .image::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: inherit;
          height: inherit;
          background-color: rgba(0, 0, 0, 0.5);
          z-index: 0;
        }
        .image img {
          height: 100%;
          width: 100%;
        }
    </style>



</head>

<body>
    <div class="container">
        <div class="section">
            <div class="luxy-el image" data-speed-y="-5">
                <img src="//repo.bfw.wiki/bfwrepo/image/616771d1012af.png" alt="">
            </div>

            <div class="content luxy-el">
                <h2>Section Three</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea officia quia quod modi optio perspiciatis corporis, sit eligendi iusto, explicabo voluptates esse asperiores similique laudantium! Illum laboriosam ipsam dolores laborum.</p>
            </div>
        </div>
        <div class="section">
            <div class="luxy-el image" data-speed-y="-5">
                <img src="//repo.bfw.wiki/bfwrepo/image/5fd82faab9c8f.png" alt="">
            </div>

            <div class="content luxy-el">
                <h2>Section One</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea officia quia quod modi optio perspiciatis corporis, sit eligendi iusto, explicabo voluptates esse asperiores similique laudantium! Illum laboriosam ipsam dolores laborum.</p>
            </div>
        </div>

        <div class="section">
            <div class="luxy-el image" data-speed-y="-5">
                <img src="//repo.bfw.wiki/bfwrepo/image/6129691c738e4.png" alt="">
            </div>

            <div class="content luxy-el">
                <h2>Section Two</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea officia quia quod modi optio perspiciatis corporis, sit eligendi iusto, explicabo voluptates esse asperiores similique laudantium! Illum laboriosam ipsam dolores laborum.</p>
            </div>
        </div>


        <div class="content">
            <h2>Lorem Ipsum Dolor Sit Ame</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim aLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
                sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Donec elementum ligulad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim adLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
                sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Donec elementum ligula minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat</p>

            <h2>Lorem Ipsum Dolor Sit Amet Conse</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat</p>

            <h3>Lorem Ipsum Dolor Sit Amet Consectetur Adipisi</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut eniLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehendeLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Donec elementum ligula eu sapien consequat eleifend. Donec nec dolor erat, condimentum sagittis sem. Praesent
                po.........完整代码请登录后点击上方下载按钮下载查看