OPPO官网首页滚动页面触发时间是怎么做的?

Question

http://www.oppo.com/

求大神解答OPPP官网的滚动页面触发显示内容是怎么做的, 求思路...

Answer 1

以下回答引用自chatGpt, 有用的话，请采纳哇！！！
OPPO官网首页滚动页面触发时间是通过JavaScript实现的。具体实现方式如下：

1. 监听窗口滚动事件，当滚动到一定位置时触发相应的动画效果。

window.addEventListener('scroll', function() {
  // 获取滚动距离
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  // 判断滚动距离是否达到触发条件
  if (scrollTop > 500) {
    // 触发动画效果
    // ...
  }
});

1. 使用jQuery插件实现滚动触发动画效果。

$(window).scroll(function() {
  // 获取滚动距离
  var scrollTop = $(this).scrollTop();
  // 判断滚动距离是否达到触发条件
  if (scrollTop > 500) {
    // 触发动画效果
    // ...
  }
});

1. 使用CSS3动画实现滚动触发动画效果。

/* 定义动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 设置元素初始状态 */
.fade-in {
  opacity: 0;
}

/* 滚动触发动画效果 */
.fade-in.active {
  animation: fadeIn 1s ease-in-out;
  opacity: 1;
}

$(window).scroll(function() {
  // 获取滚动距离
  var scrollTop = $(this).scrollTop();
  // 判断滚动距离是否达到触发条件
  if (scrollTop > 500) {
    // 添加动画效果类名
    $('.fade-in').addClass('active');
  }
});