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