CSS: Using transform to move an element to a specific place on the DOM

Viewed 57

I have an image (svg) that start out in the middle of the page on load. As the user scrolls down, I want to have that image drift up and to the left so that it eventually gets pinned in the top left corner.
I tried using translate with the scroll number but I feel like it's a guessing game on where the image will end up and what path it takes. Here is what I had so far.

window.addEventListener('scroll', function(evt) {
  let image = document.getElementById('image');
  let scrollY = window.pageYOffset;

  // how do I use the scrollY to accomplish this? 
  image.style.transform = ??
<div style="text-align: center; background: blue; height: 900px;">
  <img id="image" style=" margin-top: 200px; " src="mySvg.svg" />
</div>

1 Answers

for working document.getElementById('image'); need to have is corresponded element.

<img id="image" style=" margin-top: 200px; " src="mySvg.svg" />
Related