How to make an image round and smaller when scrolling down

Question

I want an image to become round and smaller when scrolling down my page.

At the beginning, the image should fill the whole page and while scrolling down I want the image to become smaller with increasing rounded borders.

So far, I have tried the following code:

html:

css:

.image-container{
    min-height: 20000px;  /*temporary min-height*/
    position: relative;
    width: 100%;

}

#moving-background-to-phone{
    width: 100%;
    height: 0;
    padding-top: 66.667%;
    position: sticky;
    top: 0;
    background-size: cover;

    background-image: url(../img/runningPerson.jpg);
    background-position: 0 1025px;
}

javascript:

 var $window = $(window);
    
    $window.scroll(function() {
    var scrollTop = $window.scrollTop();
     if(scrollTop >= 0 && scrollTop < 1770) {
            $(document).on('scroll',function(){
              $("#moving-background-to-phone").css("position", "sticky");
              $("#moving-background-to-phone").css("border-radius", 0 + "px");
            })
          } else 
          if(scrollTop >= 1800 && scrollTop < 3000) {
            $(document).on('scroll',function(){
              $("#moving-background-to-phone").css("position", "fixed");
              $("#moving-background-to-phone").css("border-radius", Math.min(Math.floor(0.3*window.scrollY/2) + 1, 1500) + "px");
            })
          } else 
          if(scrollTop >= 2200 && scrollTop < 20000) {
            $(document).on('scroll',function(){
              $("#moving-background-to-phone").css("width", Math.min(Math.floor(0.3*window.scrollY/2) + 1, 3000) + "px");
              $("#moving-background-to-phone").css("height", Math.min(Math.floor(0.3*window.scrollY/2) + 1, 3000) + "px");
            })
          }

At the end I want the image to be just an icon of another image. The other image is the following:

result Image

With the increasingly smaller image being the running person in top of the phone.

Currently, my problem is that as the image becomes smaller the image stays at the left of my page. But, I want the image to become smaller while still being centered. The problem is caused by top: 0 in #moving-background-to phone. I could move the image by adding left or right, but I don't think that this would be an ideal solution.

Additionally here is a demo with some random pictures from Unsplash.com: https://codepen.io/tobiasooo/pen/GRrEZvo?editors=1100

How to make an image round and smaller when scrolling down

0 Answers