var imgscroll = document.getElementById('myimg');
window.addEventListener('scroll', function() {
var scrollposition = window.scrollY;
imgscroll.style.top = scrollposition * 0.1323 + 'vh';
}
The second is from a stackoverflow answer - located here and copied below - I think the percentage part is what I need, but couldn't make it work (the image stopped moving):
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';
});
I'd appreciate any help or tips on how to reach the answer.
Personally I find the approach where you control the position of the image by using animation-play-state: paused and assigning a CSS variable to the animation-delay one of the neatest bit of scripts I ever saw on the web. Here's the pen by Chris Coyier it's based on. And a quote from his website that describes the mechanism:
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.
When the window has loaded, we first calculate the available space below the image and the amount of page overflow. The first CSS variable --maximum defines the end point of the animation. This is recalculated when the user resizes the screen. Then when scrolling, the ratio of progress is set through another CSS variable --epoch that controls the timing of the keyframe animation.
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="">For those that want to play around with it: https://jsfiddle.net/z2r40y8c/