动画上下滚动Javascript

Animation On Scroll Up and Down Javascript

本文关键字：Javascript 滚动 上下 动画      更新时间：2023-09-26

嘿，我试图复制上滚动动画https://pixelgrade.com/demos/pile。我尝试了ScrollMagic和Wow.js，但我有很大的困难。我已经找到了香草代码检测方向，其中用户正在滚动，但有一些问题。如果我设置一个on滚动监听器，当用户滚动时，它将显示页面上的每一个东西。如有任何帮助，我将不胜感激，谢谢。

编辑:我指的是标题下的图像动画。

我是Pile主题开发者之一(PHP开发者，不幸的是你)，我可以告诉你，我的同事Razvan Onofrei受Pile2开发的启发，创建了一个名为Rellax的jQuery插件。

使用这个库，您应该能够复制Pile的行为。

Block .item scroll 3x speed from scrollbar。全屏显示

window.onscroll = function() {
  var posTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
  
  document.getElementById('item').style.top =  1000 - parseInt(posTop * 3) + 'px';
}
body {
  height: 200vh;
  position: relative;
}
#item {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 1000px;
  background-color: red;
}
<div id="item"></div>

相关文章：