按滚动百分比从上到下垂直移动图像

Question

我正在尝试根据滚动百分比使某个图像从文档顶部移动到底部，例如，当您加载网站时，图像将位于页面顶部，并且当用户向下滚动它时'将根据整体文档百分比逐渐下降，直到 100% 位于底部。
我在 Whosebug 和其他网站上浏览过很多类似的解决方案，但只有两个似乎接近我需要的。
第一个有效，但仅适用于在代码中手动调整的一个分辨率：

var imgscroll = document.getElementById('myimg');

window.addEventListener('scroll', function() {
  var scrollposition = window.scrollY;
  imgscroll.style.top = scrollposition * 0.1323 + 'vh';
}

第二个来自 Whosebug 答案 - located here and copied below - 我认为百分比部分是我需要的，但无法使其工作（图像停止移动）：

var container = document.getElementById('container');
var windowHeight = window.innerHeight;
var windowWidth = window.innerWidth;
var scrollArea = 1000 - windowHeight;
var square1 = document.getElementsByClassName('square')[0];
var square2 = document.getElementsByClassName('square')[1];

// update position of square 1 and square 2 when scroll event fires.
window.addEventListener('scroll', function() {
  var scrollTop = window.pageYOffset || window.scrollTop;
  var scrollPercent = scrollTop/scrollArea || 0;

  square1.style.left = scrollPercent*window.innerWidth + 'px';
  square2.style.left = 800 - scrollPercent*window.innerWidth*0.6 + 'px';
});

对于如何获得答案的任何帮助或提示，我将不胜感激。

Answer 1

我个人找到了通过使用 animation-play-state: paused 并将 CSS 变量分配给 animation-delay 来控制图像位置的方法，这是我用过的最简洁的脚本之一网上看到的。 Here's the pen 基于 Chris Coyier 的作品。以及他网站上描述该机制的引述：

A positive animation delay is where the animation waits a certain amount of time to begin. A negative animation delay starts the animation immediately, as if that amount of time has already gone by. In other words, start the animation at a state further into the animation cycle.

当window加载完成后，我们首先计算图像下方可用的space和页面溢出量。第一个 CSS 变量 --maximum 定义了动画的结束点。当用户调整屏幕大小时，这会重新计算。然后在滚动的时候，通过另一个控制关键帧动画时间的CSS变量--epoch来设置进度的比例。

let aim = document.getElementById('image'), room, overflow;

window.addEventListener('load', setEdge);
window.addEventListener('resize', setEdge);

window.addEventListener('scroll', function() {

  let ratio = (this.pageYOffset || this.scrollY)/overflow;

  aim.style.setProperty('--epoch', ratio);
});

function setEdge() {

  room = window.innerHeight;
  overflow = document.body.scrollHeight-room;

  aim.style.setProperty('--maximum', room-aim.height + 'px');
}

body {
  margin: 0;
  height: 700vh;
}

#image {
position: fixed;
animation-duration: 1s;
animation-timing-function: linear;
animation-play-state: paused;
animation-iteration-count: 1;
animation-fill-mode: both;
animation-name: move;
animation-delay: calc(var(--epoch) * -1s);
}

@-webkit-keyframes move {

0% {
 transform: translateY(0);
}
100% {
 transform: translateY(var(--maximum));
}
}

@keyframes move {

0% {
 transform: translateY(0);
}
100% {
 transform: translateY(var(--maximum));
}
}

<img id="image" src="https://via.placeholder.com/140x100" alt="">

对于那些想玩它的人：https://jsfiddle.net/z2r40y8c/

按滚动百分比从上到下垂直移动图像

move image vertically from top to bottom by percentage of scroll

html

javascript

css

scroll

responsive