22、网页滚动交互：水平动画与导航栏实现

网页滚动交互：水平动画与导航栏实现

1. 水平动画的创建

在有风的天气预报部分创建水平动画，可按以下步骤操作：
1. 修改 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 ：在创建视差动画的代码块下方，添加水平动画的详细代码，如下：

/* Animate wi