move image vertically from top to bottom by percentage of scroll

Issue

I’m trying to make a certain image move from top of the document to it’s bottom depending on the scroll percentage, for example, when you load the site, the image will be on top of the page and as the user scrolls down it’ll go down little by little depending on the overall document percentage, until at 100% it’s at the bottom.
I’ve went through lots of similar solutions on stackoverflow and other sites, but only two seemed close to being what I need.
The first works but only on one resolution which is manually adjusted in the code:

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.

Solution

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/

Answered By – Shikkediel

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published