22、网页滚动交互效果实现指南

网页滚动交互效果实现指南

1. 创建水平动画

在有风的天气预报中创建水平动画，可按以下步骤操作：
1. 修改 HTML 文件 ：在 index.html 中，为包含天气图标的 <div> 元素添加 id 属性 wind ，代码如下：

<section class="scrollblock" id="wedday">
  <div class="day">Wednesday</div>
  <div class="forecast">69&deg; Windy</div>
  <div class="icon" id="wind"><img src ="images/Cloud-Wind.svg" alt="Cloudy Windy" width ="300" height="300"></div>
</section>

虽然也有其他选择该元素进行动画的方法，但使用 id 选择是最快且最有效的方式，能提升代码性能。
2. 添加动画代码 ：打开 scripts.js ，在创建视差动画的代码块下方添加水平动画代码：

/* An