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

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

代码语言：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;
.........完整代码请登录后点击上方下载按钮下载查看