gsap实现粘性滚动分页背景跟随效果代码-html代码-BFW代码库

代码语言：html

代码描述：gsap实现粘性滚动分页背景跟随效果代码山峰山峦效果代码，结合jquery和isInViewport一起实现。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
    <style>
        h3 {
          margin-bottom: 2rem;
        }
        
        .section {
          height: 50vh;
          width: 100%;
          background: #f2f2f2;
        }
        
        .row {
          min-height: 100vh;
        }
        .col {
          background-color: white;
        }
        
        @media (min-width: 768px) {
          .stickySection.is-sticky .row.is-row-in-view .sticky-top {
            opacity: 1;
          }
          .stickySection.is-sticky .row .sticky-top {
            position: fixed;
            max-width: calc(41.666667% - (100vw - 100%));
            top: unset;
            bottom: 0;
            display: flex;
            align-items: flex-end;
            overflow: hidden;
            transition: 0.3s opacity;
            z-index: 1;
          }
          .stickySection.is-sticky .row .sticky-top ~ div {
            margin-left: auto;
          }
        }
        
        .info {
          padding: 9rem 3rem;
        }
        @media (min-width: 992px) {
          .info {
            max-width: 400px;
            margin-left: 3rem;
            margin-right: auto;
          }
        }
        .info p {
          padding: 1rem 0;
        }
        .info img {
          max-width: 100%;
          padding: 1rem 0;
        }
        
        .img-full {
          height: 100vh;
          width: 100%;
          -o-object-fit: cover;
             object-fit: cover;
          -o-object-position: bottom;
             object-position: bottom;
        }
        @media (max-width: 767px) {
          .img-full {
            height: 500px;
          }
        }
        @media (max-width: 540px) {
          .img-full {
            height: 300px;
          }
        }
        
        .sticky-top {
          max-height: 100vh;
          display: table;
          z-index: 1050;
        }
        @media (max-width: 767px) {
          .sticky-top {
            position: relative;
          }
        }
        
        @media (max-width: 767px) {
          .scroll-pagination {
            display: none;
          }
        }
        @media (min-width: 768px) {
          .has-scroll-pagination {
            position: relative;
            display: flex;
          }
          .has-scroll-pagination .rows {
            width: calc(100% - 40px);
          }
        
          .scroll-pagination {
            position: sticky;
            top: 0;
            right: 1rem;
            padding-top: 100vh;
            transform: translateY(-50%);
            z-index: 2;
          }
        
          .scroll-pagination-item {
            position: relative;
            width: 40px;
            padding: 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
          }
          .scroll-pagination-item:before {
            content: "";
            position: absolute;
            height: 40px;
            width: 40px;
            top: 50%;
            left: 50%;
            background: transparent;
            border-radius: 999rem;
            transform: translate(-50%, -50%);
            z-index: -1;
          }
          .scroll-pagination-item.is-active {
            color: white;
            text-align: center;
          }
          .scroll-pagination-item.is-active:before {
            background: #333;
          }
        }
    </style>


</head>

<body>
    <div class="section"></div>
    <div class="container-fluid stickySection has-scroll-pagination p-0">
        <div class="rows">
            <div class="row no-gutters">
                <div class="col-md-5 sticky-top">
                    <img class="img-full" src="https://picsum.photos/id/1018/800/800" />
                </div>
                <div class="col-md-7">
                    <div class="info">
                        <h2>Etiam habebis sem dicantur magna mollis euismod.</h2>
                        <p>
                            Petierunt uti sibi concilium totius Galliae in diem certam indicere. A communi observantia non est recedendum. Sed haec quis possit intrepidus aestimare tellus. Ullamco laboris nisi ut aliquid ex ea commodi consequat. Nihilne te nocturnum praesidium Palati,
                            nihil urbis vigiliae. At nos hinc posthac, sitientis piros Afros.
                        </p>
                        <img src="https://picsum.photos/id/1018/400/200" />
                        <p>
                            Unam incolunt Belgae, aliam Aquitani, tertiam. Sed haec quis possit intrepidus aestimare tellus. Excepteur sint obcaecat cupiditat non proident culpa. Quid securi etiam tamquam eu fugiat nulla pariatur. Tu quoque, Brute, fili mi, nihil timor populi, nihil!
                        </p>
                        <button type="button" class="btn btn-outline-primary">
            Lorem ipsum
          </button>
                    </div>
                </div>
            </div>

            <div class="row no-gutters">
                <div class="col-md-5 sticky-top">
                    <img class="img-full" src="https://picsum.photos/id/1019/800/800" />
                </div>
                <div class="col-md-7">
                    <div class="info">
                        <h2>Etiam habebis sem dicantur magna mollis euismod.</h2>
                        <p>
                            Petierunt uti sibi concilium totius Galliae in diem certam indicere. A communi observantia non est recedendum. Sed haec quis possit intrepidus aestimare tellus. Ullamco laboris nisi ut aliquid ex ea commodi consequat. Nihilne te nocturnum praesidium Palati,
                            nihil urbis vigiliae. At nos hinc posthac, sitientis piros Afros.
                        </p>
   .........完整代码请登录后点击上方下载按钮下载查看