ScrollTrigger滚动触发动画效果-html代码-BFW代码库

代码语言：html

代码描述：ScrollTrigger滚动触发动画效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/all.min.css">
<style>
@import url("https://fonts.googleapis.com/css2?family=Lato&family=Raleway&display=swap");
:root {
  --color: #fff;
  --color2: #000;
  --greenSock: #88ce02;
}

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

html {
  height: 100%;
}

body {
  height: 100%;
  min-height: 100%;
  margin: 0;
  color: black;
  font-family: 'Lato', sans-serif;
  background: skyblue;
}

a {
  text-decoration: none;
  cursor: pointer;
}

img {
  max-width: 100%;
}

ul {
  list-style: none;
}

h1 {
  color: black;
  font-size: 3rem;
}

h1,
h2 {
  font-family: 'Raleway', sans-serif;
}

span {
  display: inline-block;
  color: white;
}

main {
  position: relative;
}
main .bgImg {
  width: 100%;
  position: fixed;
  top: 200px;
  left: 15%;
  opacity: 0;
  z-index: -420;
}
@media (max-width: 420px) {
  main .bgImg {
    min-width: 125%;
    top: 50px;
    left: 0;
  }
}

.center {
  text-align: center;
}

.scrollMe {
  height: 100vh;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  justify-items: center;
  align-content: center;
  align-items: center;
  text-align: center;
}

.fauxView, #viewBox {
  will-change: transform;
}

.fauxView {
  width: 305px;
  height: 500px;
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-appearance: none;
}
.fauxView::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
  -webkit-appearance: none;
}

.liquid,
.liquidDark,
.scrollText {
  visibility: hidden;
}

.greensockIcon {
  margin-top: 6rem;
  padding: 0 1rem;
  visibility: hidden;
  background: black;
  border-radius: 1rem;
  border: 2px solid var(--greenSock);
  box-shadow: 0 0 1px 4px black;
}
</style>

</head>
<body translate="no">
<main><img class="bgImg" src="https://b1m1nd.github.io/gsapScroll/images/logo-man.svg" alt="" />
<div class="scrollMe grid">
<div class="responsibly">
<h1 class="center">Please Scroll <span>Responsibly</span></h1>
<p> <b>ScrollTrigger </b>a no hijack scroll plugin from GSAP! </p>
<h1><span><i class="fas fa-chevron-circle-down"></i></span></h1>
</div>
</div>
<div class="grid">
<div class="teamwork">
<h2> <span>Your team worked hard</span></h2>
<h1>have a drink!</h1>
</div>
<div class="fauxView">
<div class="svg">
<svg id="viewBox" width="302" height="431" viewBox="0 0 302 431" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="liquidMask">
<path d="M11 65C116.998 85.387 172.287 89.0331 292 70.5076C273.968 209.199 250.927 417.986 250.426 421.992C249.925 425.997 245.5 428 242.913 428C240.325 428 69.6043 428 67.0998 428C64.5954 428 60.0873 425.497 59.5865 421.992L11 65Z" fill="#F9C749"></path>
</mask>
<path class="scrollText" d="M278.065 364.44C277.681 364.392 277.37 364.49 277.132 364.736C276.89 364.981 276.611 365.441 276.296 366.118C275.976 366.794 275.68 367.324 275.406 367.708C274.658 368.752 273.772 369.21 272.745 369.08C272.212 369.013 271.756 368.803 271.378 368.452C270.995 368.096 270.722 367.623 270.558 367.033C270.394 366.438 270.357 365.79 270.445 365.089C270.535 364.384 270.743 363.772 271.07 363.253C271.393 362.733 271.807 362.351 272.311 362.107C272.815 361.859 273.364 361.772 273.956 361.847L273.699 363.881C273.247 363.824 272.878 363.922 272.594 364.176C272.304 364.428 272.127 364.813 272.062 365.328C271.999 365.825 272.056 366.225 272.234 366.528C272.407 366.83 272.666 367.003 273.009 367.046C273.33 367.087 273.62 366.96 273.877 366.667C274.135 366.369 274.399 365.917 274.668 365.313C275.163 364.2 275.701 363.411 276.284 362.947C276.866 362.483 277.541 362.3 278.31 362.397C279.164 362.505 279.795 362.913 280.202 363.622C280.604 364.329 280.735 365.23 280.597 366.324C280.501 367.084 280.276 367.758 279.921 368.347C279.562 368.936 279.12 369.365 278.594 369.633C278.069 369.898 277.488 369.99 276.85 369.909L277.108 367.868C278.198 368.005 278.825 367.423 278.99 366.121C279.051 365.637 279.002 365.248 278.841 364.952C278.677 364.655 278.418 364.485 278.065 364.44ZM280.19 356.848C280.235 356.487 280.173 356.18 280.003 355.929C279.832 355.678 279.583 355.527 279.254 355.476L279.486 353.638C279.983 353.705 280.423 353.899 280.805 354.218C281.182 354.537 281.457 354.944 281.629 355.439C281.797 355.928 281.845 356.453 281.774 357.014C281.642 358.063 281.205 358.848 280.463 359.37C279.718 359.892 278.757 360.078 277.582 359.929L277.453 359.913C276.322 359.77 275.458 359.355 274.861 358.669C274.263 357.982 274.031 357.115 274.163 356.066C274.279 355.148 274.634 354.446 275.229 353.961C275.819 353.471 276.549 353.276 277.418 353.376L277.185 355.214C276.804 355.175 276.482 355.254 276.218 355.45C275.95 355.646 275.793 355.929 275.746 356.3C275.688 356.757 275.812 357.124 276.117 357.401C276.417 357.674 276.941 357.857 277.687 357.951L277.89 357.977C278.645 358.072 279.203 358.026 279.562 357.837C279.921 357.648 280.13 357.318 280.19 356.848ZM277.361 346.632C277.291 346.894 277.243 347.127 277.217 347.33C277.124 348.072 277.313 348.59 277.786 348.884L282.588 349.491L282.34 351.451L275.002 350.523L275.236 348.671L276.118 348.728C275.494 348.249 275.226 347.662 275.314 346.966C275.341 346.749 275.396 346.549 275.479 346.366L277.361 346.632ZM279.35 345.066C278.622 344.974 277.991 344.752 277.457 344.399C276.923 344.047 276.533 343.589 276.287 343.025C276.042 342.456 275.964 341.824 276.052 341.128C276.177 340.138 276.582 339.369 277.267 338.821C277.952 338.27 278.819 338.023 279.868 338.082L280.372 338.132C281.497 338.275 282.362 338.703 282.965 339.418C283.564 340.132 283.797 341.018 283.663 342.076C283.529 343.134 283.083 343.937 282.325 344.484C281.567 345.027 280.605 345.224 279.439 345.077L279.35 345.066ZM279.741 343.124C280.437 343.212 280.987 343.148 281.391 342.933C281.79 342.717 282.021 342.365 282.083 341.876C282.143 341.402 282.009 341.008 281.681 340.696C281.348 340.383 280.782 340.175 279.981 340.074C279.299 339.988 278.753 340.054 278.344 340.274C277.935 340.493 277.7 340.845 277.639 341.328C277.578 341.808 277.719 342.202 278.061 342.512C278.399 342.821 278.958 343.025 279.741 343.124ZM284.556 333.922L284.307 335.889L273.89 334.572L274.139 332.605L284.556 333.922ZM285.198 328.844L284.949 330.81L274.532 329.493L274.781 327.527L285.198 328.844ZM277.346 317.484L279.15 317.712L279.309 316.457L280.746 316.639L280.588 317.894L284.25 318.357C284.521 318.391 284.722 318.364 284.853 318.274C284.984 318.185 285.068 317.994 285.105 317.7C285.132 317.483 285.141 317.289 285.13 317.117L286.615 317.305C286.684 317.704 286.693 318.107 286.642 318.514C286.468 319.889 285.685 320.502 284.294 320.354L280.34 319.854L280.204 320.925L278.767 320.743L278.902 319.672L277.098 319.444L277.346 317.484ZM283.159 314.94C282.431 314.848 281.8 314.626 281.266 314.274C280.732 313.921 280.342 313.463 280.096 312.899C279.851 312.331 279.772 311.699 279.86 311.002C279.986 310.012 280.39 309.243 281.075 308.696C281.761 308.144 282.628 307.898 283.677 307.957L284.18 308.007C285.306 308.149 286.171 308.578 286.774 309.292C287.373 310.007 287.605 310.893 287.471 311.951C287.338 313.009 286.892 313.811 286.133 314.359C285.376 314.901 284.414 315.099 283.247 314.951L283.159 314.94ZM283.549 312.998C284.246 313.086 284.796 313.023 285.2 312.807C285.599 312.591 285.829 312.239 285.891 311.751C285.951 311.276 285.817 310.883 285.489 310.57C285.157 310.257 284.59 310.05 283.79 309.949C283.107 309.862 282.562 309.929 282.153 310.148C281.744 310.368 281.508 310.719 281.447 311.203C281.387 311.682 281.528 312.077 281.87 312.386C282.207 312.695 282.767 312.899 283.549 312.998ZM288.732 300.889L278.858 299.64L279.242 296.602C279.352 295.734 279.646 294.983 280.126 294.35C280.602 293.712 281.225 293.247 281.997 292.954C282.765 292.66 283.608 292.572 284.525 292.688L284.98 292.745C285.898 292.861 286.69 293..........完整代码请登录后点击上方下载按钮下载查看