var imgscroll = document.getElementById('myimg'); window.addEventListener('scroll', function() { var scrollposition = window.scrollY; imgscroll.style.top = scrollposition * 0.1323 + 'vh'; }El segundo es de una respuesta de stackoverflow, ubicada aquí y copiada a continuación . Creo que la parte porcentual es lo que necesito, pero no pude hacer que funcionara (la imagen dejó de moverse):
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'; });Agradecería cualquier ayuda o consejo sobre cómo llegar a la respuesta.
Personalmente, considero que el enfoque en el que controlas la posición de la imagen mediante el uso de animation-play-state: paused y asignando una variable CSS al animation-delay es uno de los mejores scripts que he visto en la web. Aquí está el bolígrafo de Chris Coyier en el que se basa. Y una cita de su sitio web que describe el mecanismo:
Un retraso de animación positivo es cuando la animación espera una cierta cantidad de tiempo para comenzar. Un retraso de animación negativo inicia la animación inmediatamente, como si esa cantidad de tiempo ya hubiera pasado. En otras palabras, comience la animación en un estado más avanzado en el ciclo de animación.
Cuando la ventana se ha cargado, primero calculamos el espacio disponible debajo de la imagen y la cantidad de desbordamiento de la página. La primera variable CSS --maximum define el punto final de la animación. Esto se vuelve a calcular cuando el usuario cambia el tamaño de la pantalla. Luego, al desplazarse, la proporción de progreso se establece a través de otra variable CSS --epoch que controla el tiempo de la animación de fotogramas clave.
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="">Para aquellos que quieran jugar con él: https://jsfiddle.net/z2r40y8c/