如何为Squarespace添加AOS滚动动画库？

我之前帮朋友搞定过Squarespace加AOS动画的问题，给你整理了一套亲测有效的步骤，应该能解决你遇到的问题：

一、通过Squarespace代码注入添加AOS库（官方推荐方式） #

Squarespace的代码注入功能是添加第三方库的标准途径，比文本块加链接稳定得多：

1. 登录你的Squarespace后台，点击设置 → 高级 → 代码注入
2. 在**页眉（Header）**输入框中，添加AOS的CSS文件链接：

   <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
   

3. 在**页脚（Footer）**输入框中，先添加AOS的JS文件链接，再加上初始化代码：

   <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
   <script>
     // 初始化AOS，可根据需求自定义配置
     AOS.init({
       duration: 1000, // 动画持续时间（毫秒）
       offset: 120, // 滚动到距离元素120px时触发动画
       once: true, // 动画只触发一次（滚动回来不再重复）
       easing: 'ease-in-out' // 动画缓动效果
     });
   </script>
   

4. 点击保存，完成库的引入和初始化。

二、给页面元素添加动画效果 #

接下来给需要动画的元素加上AOS属性：

• 打开要编辑的页面，找到目标区块，点击区块右上角的设置（小齿轮图标）
• 切换到高级标签，在HTML元素属性输入框中，添加AOS的核心属性，比如：

  data-aos="fade-up"
  

• 如果你想给单个元素自定义动画参数，还可以叠加属性，比如：

  data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300"
  

  常用的动画类型有fade-up、fade-down、slide-right、zoom-in等，你可以根据官方示例选择合适的效果。

三、常见问题排查（解决你之前的失败情况） #

如果还是没生效，大概率是这几个原因：

• 代码位置错误：CSS必须放在页眉，JS和初始化代码必须放在页脚，不要搞混顺序
• 属性拼写错误：确认是data-aos（小写的-aos），不要写成data-aos或者其他拼写
• JS冲突：如果你的网站有其他自定义JS代码，可能和AOS冲突，可以暂时禁用其他代码测试
• CDN加载失败：检查网络是否能正常访问AOS的CDN资源，也可以换成其他CDN源测试

内容的提问来源于stack exchange，提问作者coder