Change Image on Scroll

Change image on scroll JS/jQuery

is this what you need

https://jsfiddle.net/rkv88/9tqcdp61/

calculate the element in the range of imgSpaces in this example it's 200 using this:

"#c" + (Math.round(pos / imgSpace) + 1)

Change Image on Scroll Position

You can use the onScroll event to listen for scrolling, check at what position the scrollbar is and make the image change or whatever your heart desires. You can read more about onScroll event here. A basic code will be something like this:

var onScrollHandler = function() {
  var newImageUrl = yourImageElement.src;
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 100) {
     newImageUrl = "img1.jpg"
  }
  if (scrollTop > 200) {
     newImageUrl = "img2.jpg"
  }
  if (scrollTop > 300) {
     newImageUrl = "img3.jpg"
  }
  yourImageElement.src = newImageUrl;
};
object.addEventListener ("scroll", onScrollHandler);

Of course yourImageElement should be replaced with the image element you want to change.

If you have jQuery availble you can use the .scroll() method instead of the event listener and the .scrollTop() to get the scrollbar position.

Also, you might want to look at some scroll/paralex libraries like skrollr.

Change image as user scrolls up and down

Here a sample of code you could study to learn:

     var lastScrollTop = 0, delta = 1;
     $("div").scroll(function(){

         var nowScrollTop = $(this).scrollTop();
 //    console.log(nowScrollTop);
         if(Math.abs(lastScrollTop - nowScrollTop) >= delta){
            if (nowScrollTop > lastScrollTop){
                // SCROLLING DOWN 
        $('#image img').attr('src', "https://supamama.co.za/img/product/closed.png");
            } else {
                // SCROLLING UP 
        $('#image img').attr('src', "https://supamama.co.za/img/product/open.png");
            }
         lastScrollTop = nowScrollTop;
         }
     });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>

<div style="border:1px solid black;width:470px;height:550px;overflow:scroll;">
<div>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
<br><br>
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
</div>
<div>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
<br><br>
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
</div>
   <div id="image" >
      <img src = "https://supamama.co.za/img/product/open.png" height = "250" width = "370"  />
<div>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
<br><br>
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
</div>
<div>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
<br><br>
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
</div>
      </div>
  </div>
   </body>

Improving scroll effect with one side scroll and the other change image based on scroll position

To achieve your goal in React, you need a combination of some CSS and the JS scroll event. First, assign position: sticky to the element you need to be fixed when it's about to leave the viewport. Then, using a React ref, you access the scroll position of the scrollable div and use that logic to set your image source (you should avoid accessing the DOM directly with getElementById in React).

Here's a working codesandbox example

Changing image logo on scroll

$(function () {     $(window).scroll(function () {        if ($(this).scrollTop() > 1000) {             $('.navbar .navbar-brand img').attr('src','http://placehold.it/220?text=Original+Logo!');        }        if ($(this).scrollTop() < 1000) {             $('.navbar .navbar-brand img').attr('src','http://placehold.it/120?text=Original+Logo!');        }    })});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top" >  <a class="navbar-brand first" data-toggle="modal" data-target="#myModal">Start </a>        <a class="navbar navbar-brand first" data-toggle="modal" data-target="#myModal"><img src='http://placehold.it/120?text=Original+Logo!'></a>          <a class="dropdown-toggle btn btn-primary btn-md btn-example dropdown-hover-toggle" data-toggle="dropdown"></a>  <ul class="dropdown-content dropdown-menu dropdown-menu-right" role="menu" >          <li> <a href="#" title="I'm Serious"> Nothing to see here</a> </li> </ul></nav>
<div class="bbb aaa">  </div>
<div class="modal fade" id="myModal" role="dialog"><div class="modal-dialog" style="width:1500px;">
  <!-- Modal content-->  <div class="modal-content">
    <div class="modal-header" style="background-color: #003399;">      <button type="button" class="close" data-dismiss="modal" style="color:        #fff;">×</button>      <h4 class="modal-title" style="color: #fff;">Upload New File</h4>    </div>
    <div class="modal-body">      <form class="form-horizontal" action="uploadfile.php" method="post"        name="addservice" enctype="multipart/form-data" align="center"        onsubmit="return validateForm()">               <label for="filename" class="col-sm-2 control-label">File Name:          </label>          <div class="col-sm-4"><input type="text" class="form-control"              name="filename" id="filename" placeholder="Name of the file"              maxlength="55" tabindex="1" required></div>
          <label for="file" class="col-sm-2">File:</label>          <div class="col-sm-4"><input type="file" maxlength="11"             name="file" id="file" class="form-control" tabindex="2"             required></div>        
            <label for="filedesc" class="col-sm-2">File Description:</label>          <div class="col-sm-4"><textarea class="form-control" rows="3"            name=" filedesc" id="filedesc" placeholder="(maximum of 75            characters)" style="resize: none;" maxlength="75" tabindex="3"            required></textarea></div>     

        <div class="col-sm-4">          <div class="form-group"><input class="btn btn-success btn-lg col-          sm-4" name="submit" type="submit" value="Upload" tabindex="4">            <input type="reset" class="btn btn-default btn-lg col-sm-4"             name="clear" value="Clear" tabindex="5">          </div>        </div>      </form>      <div>    </div>    </div> <!-- modal body -->
    <div class="modal-footer">      <button type="button" class="btn btn-default" data-      dismiss="modal">Close</button>    </div>
  </div>  <!-- modal content -->
</div> <!-- modal dialog --></div> 

<h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br>
<h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br>

Moving image on scroll

I strongly recommend utilizing the Rellax JS library.

https://codepen.io/gcwebdev/pen/BaJjweE

var rellax = new Rellax('.rellax');

body {
  padding: 4rem;
  background-color: #282828;
  height: 500vh;
}

.parent {
  margin-top: 15em;
  color: white;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.parent>div {
  position: absolute;
  top: 0;
}

.child1 {
  width: 40vw;
  height: 80vh;
  background-color: white;
  border-radius: 3em;
}

.child2>div {
  background-color: #999;
  border-radius: 1em;
  position: absolute;
}

.child2-one {
  width: 200px;
  height: 100px;
  top: 70px;
  left: 100px;
}

.child2-two {
  width: 200px;
  height: 250px;
  top: 250px;
  left: 175px;
}

.child2-three {
  width: 100px;
  height: 75px;
  top: 500px;
  left: -250px;
}

<link href="https://cssanimation.rocks/levelup/public/03/04-end/stylesheets/main.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.0.0/rellax.min.js"></script>

<div class="parent">
  <div class="child1"></div>
  <div class="child2">
    <div class="child2-one rellax" id="one" data-rellax-speed="4">one</div>
    <div class="child2-two rellax" id="two" data-rellax-speed="-1">two</div>
    <div class="child2-three rellax" id="three" data-rellax-speed="3">three</div>
  </div>
  <div class="child3">Child 3</div>
</div>

Widen Image on scroll down using React

One of the possible solutions with runnable example

This is one of the way to do that:

Wrap your <img> with a padded and flex-centered container
Give style width: 100% to your <img>, to fit the container
Give a padding to your container (to get your image small as you want it at start)
Setup a scroll listener
Compute a new padding value for your image container
Update the container with the new padding value

In the snippet i have 2 important variables:

maxPadding the padding value (higher = smaller img)
maxScrollFor100 the point (in px) where the scroll is complete (full size <img>)

Here we have the runnable snippet

const maxScrollFor100 = 250; // Y Scroll Point where the image should be 100% width
const maxPadding = 100; // Initial padding of the container 
const imgContainer = document.getElementById('img-container');

// Get a CSS horizontal padding string by value and optional css unit 
function getPaddingHz(hzPadding, sizeUnit = 'px' /* you can change it using any CSS unit */) {
  return '0 ' + hzPadding + sizeUnit;
}

// Set initial container padding
imgContainer.style.padding = getPaddingHz(maxPadding);

// Setup scroll listener
window.addEventListener('scroll', function(event) {

  // Get the current scrollY point
  const sY = window.scrollY; 
  
  // Get a padding percentage (we want 100% with 0 scroll and 0% with 250 or + scroll)
  const percent = 100 - (sY >= maxScrollFor100 ? 100 : sY / (maxScrollFor100 / 100));
  
  // Show the current zoom percentage.
  // console.log("Actual Percent Zoom", percent.toFixed(1));

  // Compute the new padding value
  const padding = maxPadding * (percent / 100);

  // Update the dom with the new padding for the image container
  imgContainer.style.padding = getPaddingHz(padding);
  
}, {passive: true})

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

<!-- I use padding only to simulate content above and below the image 
     It also makes the snippet testable from mobile.                  -->
<div style="padding: 150px 0 500px 0">
  <div id="img-container" class="flex-center">
    <img 
      width="100%"
      src="https://i.stack.imgur.com/IKDXM.jpg"  
    />
  </div>
</div>