24.使用ScrollTrigger的简单视差滚动

Posted 2022-09-26 @大迁世界

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了24.使用ScrollTrigger的简单视差滚动相关的知识，希望对你有一定的参考价值。

效果 (源码网盘地址在最后)

源码

index.html

<!doctype html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parallax Scrolling Website</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <header>
      <a href="#" class="logo">Logo</a>
      <ul class="navigation">
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">About</a>&l

以上是关于24.使用ScrollTrigger的简单视差滚动的主要内容，如果未能解决你的问题，请参考以下文章

使用 GSAP scrollTrigger 缩放滚动图像

具有自定义滚动值的 GSAP ScrollTrigger 断断续续

滚动视差

Gsap ScrollTrigger ：让我的部分在滚动时翻译

如何居中对齐/居中视差滚动内容？