滚动图片倾斜进入视觉效果代码-html代码-BFW代码库

代码语言：html
代码描述：滚动图片倾斜进入视觉效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

<style>
@import url("https://fonts.googleapis.com/css2?family=Righteous&display=swap");

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

:root {
  font-size: 16px;
}

body {
  margin: 0;
  --color-text: #dc6e25;
  --color-bg: #efded3;
  --color-link: #000;
  --color-link-hover: #dc6e25;
  --aspect-ratio: 1/1.5;
  --imgwidthmax: 500px;
  --size-title: 10rem;
  --font-weight-title: 400;
  color: var(--color-text);
  background-color: var(--color-bg);
  font-family: turquoise, serif;
  font-size: 1.5rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.scroll {
  --color-text: #905348;
  --color-bg: #120605;
  --color-link: #8f8f76;
  --color-link-hover: #fff;
  font-size: 1rem;
  --imgwidthmax: 400px;
  --color-description: #7e605b;
  --font-title: ivymode;
  --size-title: 6vw;
  --imgwidthmax: 600px;
}

a {
  text-decoration: none;
  color: var(--color-link);
  outline: none;
}

a:hover,
a:focus {
  color: var(--color-link-hover);
  outline: none;
}

.page {
  display: grid;
  padding: 5vw;
  max-width: 1200px;
  margin: 0 auto;
  grid-template-columns: 100%;
  grid-template-areas: "header" "grid";
  will-change: transform;
}

.page__title {
  grid-area: header;
  margin: 0 0 0.5rem;
  font-family: "Righteous", cursive;
  font-size: var(--size-title);
  font-weight: 400;
}

.arrow {
  width: 60px;
  height: 80px;
  position: absolute;
  top: 1%;
  right: 5%;
  z-index: 999;
}

.arrow path {
  stroke: var(--color-text);
  stroke-width: 2px;
  fill: transparent;
  animation: down 2s infinite;
}

@keyframes down {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.arrow path.a1 {
  animation-delay: -1s;
}
.arrow path.a2 {
  animation-delay: -0.5s;
}
.arrow path.a3 {
  animation-delay: 0s;
}

.content {
  grid-area: grid;
  margin: 25vh 0 30vh;
}

.content--padded {
  padding: 0 10vw;
}

.content__item {
  --imgwidth: calc(var(--imgwidthmax) * var(--aspect-ratio));
  width: var(--imgwidth);
  max-width: 100%;
  position: relative;
  will-change: transform;
  margin-bottom: 30vh;
  display: grid;
  grid-template-columns: 50% 50%;
}

.content--center .content__item {
  margin: 0 auto 60vh;
}

.content__item--expand {
  width: 100%;
  grid-template-columns: minmax(0, var(--imgwidth)) 1fr;
}

.content__item--expand:nth-child(even) {
  grid-template-columns: 1fr minmax(0, var(--imgwidth));
}

.content--alternate .content__item {
  max-width: 90vw;
}

.content--alternate .content__item:nth-child(even) {
  margin-left: auto;
}

.content__item-imgwrap {
  position: relative;
  --imgwidth: 100%;
  margin: 0 auto;
  grid-area: 1 / 1 / 3 / 3;
  overflow: hidden;
  width: var(--imgwidth);
  padding-bottom: calc(var(--imgwidth) / (var(--aspect-ratio)));
  will-change: transform;
}

.content__item--expand .content__item-imgwrap {
  grid-area: 1 / 1 / 3 / 2;
}

.content__item--expand:nth-child(even) .content__item-imgwrap {
  grid-area: 1 / 2 / 3 / 3;
  justify-self: end;
}

.content__item-img {
  --overflow: 40px;
  height: calc(100% + (2 * var(--overflow)));
  top: calc(-1 * var(--overflow));
  width: 100%;
  position: absolute;
  background-size: cover;
  background-position: 50% 0%;
  will-change: transform;
  opacity: 0.8;
}

.content__item-number {
  opacity: 0.03;
  font-size: 25vw;
  position: absolute;
  top: -7vw;
  right: -10vw;
  line-height: 1;
}

.content__item:nth-child(even) .content__item-number {
  right: auto;
  left: -7vw;
}

.content__item-title {
  position: relative;
  font-size: var(--size-title);
  padding: 0 3vw;
  margin: calc(var(--size-title) * -1 / 2) 0 0 0;
  align-self: start;
  line-height: 1;
  font-family: var(--font-title);
  font-weight: var(--font-weight-title);
  color: var(--color-title);
  will-change: transform;
  mix-blend-mode: var(--blendmode-title);
}

.credits {
  text-align: center;
}

.credits a {
  color: var(--color-text);
}

.credits a:hover {
  color: #fff;
}

.credits--fixed {
  position: fixed;
  bottom: 5vw;
  margin: 0;
  left: 5vw;
  width: 90vw;
  text-align: right;
}

.credits--fixed::before {
  content: "";
  background: currentColor;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5rem;
  width: 1px;
}

.content--center .content__item-title {
  grid-area: 1 / 1 / 3 / 3;
  margin: auto;
}

.content__item-title--layer {
  padding: 0;
  z-index: 10;
  grid-area: 1 / 1 / 2 / 3;
  width: 100%;
  text-align: center;
}

.content__item-description {
  grid-area: 3 / 1 / 3 / 3;
  width: 70%;
  position: relative;
  margin: 0;
  padding: 1rem 0 0 0;
  color: var(--color-description);
}

.content--alternate .content__item-title,
.content__item--wide:nth-child(even) .content__item-description {
  grid-area: 3 / 1 / 4 / 2;
  justify-self: start;
}

.content--alternate .content__item:nth-child(even) .content__item-title,
.content__item--wide .content__item-description {
  grid-area: 3 / 2 / 4 / 3;
  justify-self: end;
  width: auto;
}

.content__item--expand .content__item-description {
  grid-area: 1 / 2 / 3 / 3;
  justify-self: start;
  align-self: start;
  padding: 0 2rem;
  width: 250px;
  font-size: 0.9rem;
}

.content__item--expand:nth-child(even) .content__item-description {
  grid-area: 1 / 1 / 3 / 2;
  justify-self: end;
  text-align: right;
}

@media screen and (min-width: 53em) {
  .page--layout-2 {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "header header" "...  meta" "grid grid";
  }
}

@media screen and (max-width: 40em) {
  .content__item--expand .content__item-imgwrap,
  .content__item--expand:nth-child(even) .content__item-imgwrap {
    grid-area: 1 / 1 / 3 / 3;
  }
  .content__item--expand .content__item-description,
  .content__item--expand:nth-child(even) .content__item-description,
  .content__item--wide .content__item-description,
  .content__item--wide:nth-child(even) .content__item-description {
    grid-area: 3 / 1 / 4 / 3;
    padding: 1rem 0;
    width: 100%;
    text-align: left;
  }
  .content__item--wide .content__item-description {
    padding: 1rem;
  }
  .content--alternate .content__item-title,
  .content--alternate .content__item:nth-child(even) .content__item-title {
    grid-area: 1 / 1 / 4 / 2;
  }
}
</style>



</head>

<body >
  <body class="scroll loading">
  <main>
    <div data-scroll class="page page--layout-2">
      <h1 class="page__title">#scroll</h1>

      <!--Animated Arrow by @joshgjohnson
-->
      <svg class="arrow">
        <path class="a1" d="M0 0 L30 22 L60 0"></path>
        <path class="a2" d="M0 20 L30 42 L60 20"></path>
        <path class="a3" d="M0 40 L30 62 L60 40"></path>
      </svg>

      <div class="content content--alternate content--padded">

        <div class="content__item content__item--expand" style="--aspect-ratio: 700/525">
          <div class="content__item-imgwrap">
            <div class="content__item-img" style="
									background-image: url(//repo.bfw.wiki/bfwrepo/image/605694504fbd5.png);
								"></div>
          </div>
          <h2 class="content__item-title">Leopard</h2>
          <p class="content__item-description">
            The English name 'leopard' comes from Old French: leupart or
            Middle French: liepart, that derives from Latin: leopardus and
            Ancient Greek: λέοπάρδος (leopardos).
          </p>
        </div>

        <div class="content__item content__item--expand" style="--aspect-ratio: 700/460">
          <div class="content__item-imgwrap">
            <div class="content__item-img" style="
									background-image: url(//repo.bfw.wiki/bfwrepo/image/605694504fbd5.png);
								"></div>
          </div>
          <h2 class="content__item-title">Irbis</h2>
          <p class="content__item-description">
            The name 'irbis' comes from the Turkic language, it was borrowed
            by Russian fur traders from local hunters in the XVII century. In
            different regions of Central Asia, the predator was called
            differently: irbish, irbiz, irvish, ilbers.
          </p>
        </div>

        <div class="content__item content__item--expand" style="--aspect-ratio: 600/450">
          <div class="content__item-imgwrap">
            <div class="content__item-img" style="
									background-image: url(//repo.bfw.wiki/bfwrepo/image/605694504fbd5.png);
								"></div>
          </div>
          <h2 class="content__item-title">Tiger</h2>
          <p class="content__item-description">
            The Middle English 'tigre' and Old English tigras derive French
            tigre, from Latin tigris.
          </p>
        </div>

        <div class="content__item content__item--expand" style="--aspect-ratio: 600/500">
          <div class="content__item-imgwrap">
            <div class="content__item-img" style="
									background-image: url(//repo.bfw.wiki/bfwrepo/image/605694504fbd5.png);
								"></div>
          </div>
          <h2 class="content__item-title">Lion</h2>
          <p class="content__item-description">
            The word 'lion' is derived from Latin: leo and Ancient Greek: λέων
            (leon).
          </p>
        </div>

        <div class="content__item content__item--expand" style="--aspect-ratio: 600/455">
          <div class="content__item-imgwrap">
            <div class="content__item-img" style="
									background-image: url(//repo.bfw.wiki/bfwrepo/image/605694504fbd5.png);
								"></div>
          </div>
          <h2 class="content__item-title">Cheetah</h2>
          <p class="content__item-description">
            The vernacular name 'cheetah' is derived from Hindustani Urdu:
            چیتا‎ and Hindi: चीता (ćītā).
          </p>
        </div>

        <div class="content__item content__item--expand" style="--aspect-ratio: 600/470">
          <div class="content__item-imgwrap">
            <div cl.........完整代码请登录后点击上方下载按钮下载查看