ScrollTrigger 安装

您可以通过两种方式来安装ScrollTrigger。

第一种方式是通过在页面中包含jQuery和scrollTrigger.js文件来进行安装。您可以使用以下代码将ScrollTrigger应用于默认元素：

$('.my-elements').scrollTrigger();

如果您希望设置元素与页面顶部的偏移量，可以使用以下代码：

$('.my-elements').scrollTrigger({
  offset: 100
});

第二种方式是通过npm安装@terwanerik/scrolltrigger包，或者将dist/ScrollTrigger.min.js文件添加到您的项目中并导入。安装完成后，您可以按照以下步骤使用ScrollTrigger：
1. 创建一个新的ScrollTrigger实例。
2. 添加触发器以及任何自定义的设置。
3. 当元素进入视口时，触发相应的动作。

另外，如果您希望通过HTML DOM启动gsap scrollTrigger插件，可以使用scrollTriggerHTMLData方法。这需要在项目中包含gsap库和scrollTrigger插件，并按照特定的数据属性添加触发器。

请根据您的需求选择合适的安装方式并按照相应的方法使用ScrollTrigger。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [scrollTrigger.js:当您向上滚动页面时，jQuery 插件可以激活和激活元素](https://download.csdn.net/download/weixin_42122432/19749082)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [ScrollTrigger：让您的页面对滚动更改做出React](https://download.csdn.net/download/weixin_42138376/14996234)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [scrollTriggerHTMLData：通过数据属性从HTML DOM启动gsap scrollTrigger插件](https://download.csdn.net/download/weixin_42099151/15338375)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]