gsap自适应时尚海报视觉差异滚动效果代码-html代码-BFW代码库

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

<head>
    <meta charset="UTF-8">

    <link href="https://fonts.googleapis.com/css2?family=Cinzel&family=Noto+Sans&display=block" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css">
<style>
    :root {
  --dark: #242423;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

html, body {
  min-height: 100vh;
}

body {
  background-color: white;
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  color: var(--dark);
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.logo,
h1,
h2 {
  margin: 0;
  line-height: 1;
  font-family: "Cinzel", serif;
  font-weight: 400;
}

p {
  margin: 0;
}

.stage {
  position: relative;
  background: white;
  visibility: hidden;
}

/*  ========================================================================== 
    Nav Header
    ========================================================================== */
.header {
  position: fixed;
  left: 40px;
  top: 24px;
  z-index: 100;
  display: flex;
}
@media all and (max-width: 768px) {
  .header {
    display: block;
    left: 24px;
  }
}

.logo {
  font-size: 27px;
  letter-spacing: -1px;
}

.nav-btn,
.nav-btn__svg {
  width: 56px;
  height: 30px;
}

.nav-btn {
  display: block;
  margin: -2px 0 0 56px;
}
@media all and (max-width: 768px) {
  .nav-btn {
    margin: 18px 0 0 -6px;
  }
}

.nav-btn__svg {
  pointer-events: none;
}

/*  ========================================================================== 
    Intro
    ========================================================================== */
.intro,
.footer {
  height: 100vh;
}

.intro {
  position: relative;
  padding: 5vw;
  background: #C0D7D8;
  overflow: hidden;
}

.intro__content {
  position: absolute;
  right: 8%;
  bottom: 15%;
  z-index: 3;
}
@media all and (max-width: 768px) {
  .intro__content {
    right: auto;
  }
}

.intro__title {
  font-size: 25vw;
  overflow: hidden;
  letter-spacing: -2.3vw;
  padding-right: 2.3vw;
}
@media all and (max-width: 768px) {
  .intro__title {
    margin-bottom: 5vh;
  }
}

.intro__img {
  position: absolute;
  width: 35%;
  max-width: 390px;
  height: auto;
}
@media all and (max-width: 768px) {
  .intro__img {
    width: 75vw;
  }
}

.intro__img--1 {
  z-index: 2;
  left: 10%;
  bottom: 35%;
}
@media all and (max-width: 768px) {
  .intro__img--1 {
    left: 50%;
    bottom: 50vh;
  }
}

.intro__img--2 {
  z-index: 1;
  left: 25%;
  bottom: 40%;
}
@media all and (max-width: 768px) {
  .intro__img--2 {
    left: 70%;
    bottom: 60vh;
  }
}

.intro__txt {
  max-width: 35vw;
  margin-left: 25vw;
}
@media all and (max-width: 768px) {
  .intro__txt {
    max-width: 80vw;
    margin-left: 5vw;
  }
}

/*  ========================================================================== 
    Slides
    ========================================================================== */
.slide {
  display: flex;
  align-items: stretch;
  height: 100vh;
  overflow: hidden;
}
.slide:nth-of-type(even) {
  background: #C4CDC4;
}
@media all and (max-width: 768px) {
  .slide {
    display: block;
    position: relative;
  }
}

/*  Columns
    ========================================================================== */
.col {
  flex-basis: 50%;
}
@media all and (max-width: 768px) {
  .col {
    display: block;
    width: 100%;
    height: 100vh;
  }
}

.col--1 {
  position: relative;
  z-index: 1;
}
@media all and (max-width: 768px) {
  .col--1 {
    position: relative;
    z-index: 1;
  }
}

.col--2 {
  position: relative;
  overflow: hidden;
}
@media all and (max-width: 768px) {
  .col--2 {
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
  }
}

/*  ========================================================================== 
    Column Content
    ========================================================================== */
.col__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  height: 100%;
  padding: 6vw 6vw 10vw;
}
@media all and (max-width: 768px) {
  .col__content {
    width: 80%;
  }
}

.col__content--1 {
  background: #D8C0C0;
}
@media all and (max-width: 768px) {
  .col__content--1 {
    background: rgba(216, 192, 192, 0.9);
  }
}

.col__content--2 {
  background: #CDD5E0;
}
@media all and (max-width: 768px) {
  .col__content--2 {
    background: rgba(205, 213, 224, 0.9);
  }
}

.col__content--3 {
  background: #F3D3B0;
}
@media all and (max-width: 768px) {
  .col__content--3 {
    background: rgba(243, 211, 176, 0.9);
  }
}

.col__content--4 {
  background: #F8E9E6;
}
@media all and (max-width: 768px) {
  .col__content--4 {
    background: rgba(248, 233, 230, 0.9);
  }
}

.col__content--5 {
  background: #D1E2EC;
}
@media all and (max-width: 768px) {
  .col__content--5 {
    background: rgba(209, 226, 236, 0.9);
  }
}

.col__content--6 {
  background: #D7CEC5;
}
@media all and (max-width: 768px) {
  .col__content--6 {
    background: rgba(215, 206, 197, 0.9);
  }
}

/*  Column Content
    ========================================================================== */
.col__content-title {
  margin: 0 0 2vw;
  font-size: 11vw;
  letter-spacing: -0.8vw;
}
@media all and (max-width: 768px) {
  .col__content-title {
    margin: 0 0 6vw;
    font-size: 18vw;
  }
}

.col__content-wrap {
  display: flex;
  justify-content: flex-end;
}
@media all and (max-width: 768px) {
  .col__content-wrap {
    flex-direction: column;
  }
}

.col__content-txt {
  max-width: 22vw;
  order: 2;
  margin-left: 32px;
}
@media all and (max-width: 768px) {
  .col__content-txt {
    order: 1;
    max-width: 40vw;
    margin: 0 0 10vw 10vw;
  }
}

.slide-link {
  position: relative;
  order: 1;
  display: flex;
  justify-content: flex-end;
  width: 75px;
  height: 53px;
}
.slide-link > * {
  pointer-events: none;
}
@media all and (max-width: 768px) {
  .slide-link {
    order: 2;
    align-self: flex-end;
  }
}

.slide-link__circ {
  width: 53px;
  height: 53px;
  border-radius: 50%;
  border: 1px solid var(--dark);
}

.slide-link__line {
  position: absolute;
  top: 25px;
  left: 0;
  width: 64px;
  height: 3px;
  background: var(--dark);
}

.line {
  overflow: hidden;
}
.line:nth-of-type(even) {
  margin-top: -1vw;
}

.line__inner {
  display: block;
}

.slide__scroll-link {
  position: absolute;
  right: -113px;
  bottom: 3.5vw;
  display: block;
  width: 140px;
  height: 140px;
  background: var(--dark);
  overflow: hidden;
}
@media all and (max-width: 768px) {
  .slide__scroll-link {
    display: none;
  }
}

.slide__scroll-line {
  position: absolute;
  left: 26px;
  bottom: 0;
  width: 1px;
  height: 100%;
}

.slide--0 .slide__scroll-line {
  background: #C0D7D8;
}

.slide--1 .slide__scroll-line {
  background: #D8C0C0;
}

.slide--2 .slide__scroll-line {
  background: #CDD5E0;
}

.slide--3 .slide__scroll-line {
  background: #F3D3B0;
}

.slide--4 .slide__scroll-line {
  background: #F8E9E6;
}

.slide--5 .slide__scroll-line {
  background: #D1E2EC;
}

.slide--6 .slide__scroll-line {
  background: #D7CEC5;
}

/*  ========================================================================== 
    Column Image
    ========================================================================== */
.col__image-wrap {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 160vh;
}

.img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}

/*  ========================================================================== 
    Footer
    ========================================================================== */
.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #cecece;
}

.footer__link {
  font-size: 5vw;
  color: var(--dark);
  text-decoration: none;
  font-family: "Cinzel", serif;
}

.footer__link-top {
  position: absolute;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background: var(--dark);
  font-size: 18px;
  color: white;
  text-decoration: none;
  font-family: "Cinzel", serif;
}

.footer__link-top-line {
  position: absolute;
  top: -50px;
  left: 50%;
  width: 1px;
  height: 50px;
  background: var(--dark);
}

.footer__copyright {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
}
</style>
</head>

<body>

    <div class="stage">
        <header class="header">
            <div class="logo">Duda</div>
            <a href="#" class="nav-btn">
                <svg class="nav-btn__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 30">
                <rect class="nav-rect" width="40" height="2" x="8" y="8" fill="#242423"/>
                <rect class="nav-rect" width="40" height="2" x="8" y="14" fill="#242423"/>
                <rect width="40" height="2" x="8" y="20" fill="#242423"/>
            </svg>
            </a>
        </header>

        <section class="intro slide--0" id="slide-0">
            <div class="intro__content">
                <h1 class="intro__title">Duda</h1>
                <p class="intro__txt">Duda is going from strength to strength. Whether it’s in the prestigious gallery in the new World Trade Centre in New York or at an international art fair in Chicago or Hong Kong, people recognize the original response to life in Duda’s
                    work, and go away feeling animated and energized by his vibrant creations.</p>
            </div>
            <img class="intro__img intro__img--1" src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png" />
            <img class="intro__img intro__img--2" src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png" />
        </section>


        <section class="slide slide--1" id="slide-1">
            <div class="col col--1">
                <div class="col__content col__content--1">
                    <h2 class="col__content-title"><span class="line__inner">Mono</span><br /><span class="line__inner">No. 1</span></h2>
                    <div class="col__content-wrap">
                        <p class="col__content-txt">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.</p>
                        <a href="#" class="slide-link">
                            <div class="slide-link__circ"></div>
                            <div class="slide-link__line"></div>
                        </a>
                    </div>
                </div>
                <a href="#slide-2" class="slide__scroll-link">
                    <div class="slide__scroll-line"></div>
                </a>
            </div>
            <div class="col col--2">
                <div class="col__image-wrap">
                    <img class="img img--1" src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png" />
                </div>
            </div>
        </section>

        <section class="slide slide--2" id="slide-2">
            <div class="col col--1">
                <div class="col__content col__content--2">
                    <h2 class="col__content-title"><span class="line__inner">Look</span><br /><span class="line__inner">No. 2</span></h2>
                    <div class="col__content-wrap">
                        <p class="col__content-txt">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.</p>
                        <a href="#" class="slide-link">
                            <div class="slide-link__circ"></div>
                            <div class="slide-link__line"></div>
                        </a>
                    </div>
                </div>
                <a href="#slide-3" class="slide__scroll-link">
                    <div class="slide__scroll-line"></div>
                </a>
            </div>
            <div class="col col--2">
                <div class="col__image-wrap">
                    <img class="img img--1" src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png" />
                </div>
            </div>
        </section>

        <section class="slide slide--3" id="slide-3">
            <div class="col col--1">
                <div class="col__content col__content--3">
                    <h2 class="col__content-title"><span class="line__inner">Zombie</span><br /><span class="line__inner">No. 3</span></h2>
                    <div class="col__content-wrap">
                        <p class="col__content-txt">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.</p>
                        <a href="#" class="slide-link">
                            <div class="slide-link__circ"></div>
                            <div class="slide-link__line"></div>
                        </a>
                    </div>
                </div>
                <a href="#slide-4" class="slide__scroll-link">
                    <div class="slide__scroll-line"></div>
                </a>
            </div>
            <div class="col col--2">
                <div class="col__image-wrap">
                    <img class="img img--1" src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png" />
                </div>
            </div>
        </section>

        <section class="slide slide--4" id="slide-4">
            <div class="col col--1">
                <div class="col__content col__content--4">
                    <.........完整代码请登录后点击上方下载按钮下载查看