今天跟大家唠唠我这几天搞的“wow弹起”效果，就是想让一个元素，比如一张图片，在页面滚动到特定位置的时候，像魔兽世界里跳起来一样，动感十足！

第一步：确定目标

我先想好要哪个元素“wow弹起”，然后得找到它。我用的是原生JS，所以直接或者querySelector搞定，当然你用jQuery啥的也行，看个人习惯。我这里就假设我找到的元素id是“wowImage”。

第二步：监听滚动

页面滚动是触发“wow弹起”的关键，所以得监听window的scroll事件。*('scroll', function() { ... })，把代码塞进这个大括号里。

第三步：判断位置

滚动条滚到哪里才算“特定位置”？这得自己定。我一般会用元素的offsetTop属性拿到它距离页面顶部的距离，再加上一个偏移量，比如页面滚动到元素上方200像素的时候，就触发动画。所以代码大概是这样：

let elementTop = *('wowImage').offsetTop;

let scrollPosition = *  *  *;
if (scrollPosition > elementTop - 200) {
// 触发动画！

第四步：添加动画

重头戏来！怎么让图片“弹起来”？我选择用CSS3的transform和transition来实现。先定义一个CSS类，比如叫“wow-animation”，里面写好动画效果：

.wow-animation {
transform: translateY(-30px); / 向上移动30像素 /
transition: transform 0.3s ease-out; / 动画持续0.3秒，缓出效果 /

然后，在满足滚动条件的时候，给元素添加这个class：

*('wowImage').*('wow-animation');

第五步：移除动画

图片弹起来之后，如果滚动条又滚上去，我想让它回到原来的位置，所以还需要在不满足滚动条件的时候，移除这个class：

if (scrollPosition <= elementTop - 200) {
*('wowImage').*('wow-animation');

第六步：优化体验

如果一直滚动，这个判断逻辑就会不停执行，有点浪费性能。可以加个节流或者防抖，让它在一段时间内只执行一次。我这里简单用个setTimeout实现节流：

let timer = null;
*('scroll', function() {
if (timer) {

clearTimeout(timer);

timer = setTimeout(function() {
// 上面的判断逻辑放这里
}, 100); // 100毫秒内只执行一次

第七步：反复调试

写完代码肯定有bug，得不停刷新页面，调整滚动距离，修改CSS动画效果，直到效果满意为止。我搞一下午才调眼睛都快瞎。

这个“wow弹起”效果挺简单的，就是监听滚动，判断位置，添加/移除CSS class。关键是要理解offsetTop、pageYOffset、scrollTop这些属性的含义，以及CSS3动画的用法。 别忘多调试，多尝试，才能做出炫酷的效果！

• 心得： 实践出真知！