javascript - Change Image on Scroll Position

I would like to change an image on a certain scroll position. For example:

Scroll 100px show img1.jpg

Scroll 200px show img2.jpg

Scroll 300px show img3.jpg

Here I found an example what I mean.

Any ideas?

I would like to change an image on a certain scroll position. For example:

Scroll 100px show img1.jpg

Scroll 200px show img2.jpg

Scroll 300px show img3.jpg

Here I found an example what I mean.

Any ideas?

Share Improve this question edited Jul 2, 2014 at 11:07 Lior 1,60817 silver badges21 bronze badges asked Jun 16, 2014 at 8:56 l00per 4914 gold badges8 silver badges19 bronze badges

possible duplicate of How do I change my background on scroll using CSS? – Tanner Commented Jun 16, 2014 at 9:01

Add a comment |

3 Answers 3

Sorted by: Reset to default 11

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.

$(window).on("scroll touchmove", function() 
{
	if ($(document).scrollTop() >= $("#one").position().top && $(document).scrollTop() < $("#two").position().top  ) 
	{
		$('body').css('background-image', 'url(https://4.bp.blogspot.com/-Ivk46EkgQfk/WWjbo4TdJbI/AAAAAAAAFUo/gUD7JABklsIA1gWIr5LS1slyY4QuTMkEwCLcBGAs/s1600/gambar%2Bwallpaper%2Bmobil.jpg)')
    };
	if ($(document).scrollTop() >= $("#two").position().top && $(document).scrollTop() < $("#three").position().top)
	{
		$('body').css('background-image', 'url(https://i1.wp.com/cdn.catawiki.net/assets/marketing/uploads-files/45485-8bdcc8479f93d5a247ab844321b8b9d5e53c49a9-story_inline_image.jpg)')
    };
   if ($(document).scrollTop() >= $("#three").position().top && $(document).scrollTop() < $("#four").position().top ) 
   {
		$('body').css('background-image', 'url(https://s-media-cache-ak0.pinimg.com/originals/e1/7a/03/e17a0385726db90de1854177d4af2b4f.jpg)')
   };
   if ($(document).scrollTop() >= $("#four").position().top) 
   {
		$('body').css('background-image', 'url(https://www.wallpaperup.com/uploads/wallpapers/2015/02/13/621414/6fc33c3ae65a58f9bb137f5cf011aebc.jpg)')
   };
  
});

*{
	margin:0;
	padding:0;
 }
.main{
	width:100%;
	height:100vh;
	background-image:url('https://4.bp.blogspot.com/-Ivk46EkgQfk/WWjbo4TdJbI/AAAAAAAAFUo/gUD7JABklsIA1gWIr5LS1slyY4QuTMkEwCLcBGAs/s1600/gambar%2Bwallpaper%2Bmobil.jpg');
	background-size:100% 100%;
	background-attachment:fixed;
	transition: 1000ms;
	}
section{
	width: 100%;
	min-height: 1px;
	}
.content{
	width:50%;
	min-height:1px;margin-top:10%;
	margin-left:10%;
	color:white;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class='main'>
	<section id="one">
		<div class='content'>
			<h1 style='font-size:5vw;'>first heading</h1>
			<p style='font-size:3vw;' >description</p>	
		</div>
	</section>
	<section id="two" style='margin-top:100vh'>
		<div class='content'>
			<h1 style='font-size:5vw;'>second heading</h1>
			<p style='font-size:3vw;'>description</p>	
		</div>
	</section>
	<section id="three" style='margin-top:100vh' >
		<div class='content'>
			<h1 style='font-size:5vw;'>third heading</h1>
			<p style='font-size:3vw;'>description</p>	
		</div>	
	</section>
	<section id="four" style='margin-top:100vh' >
		<div class='content' style='margin-bottom:10%;'>
			<h1 style='font-size:5vw;'>fourth heading</h1>
			<p style='font-size:3vw;'>description</p>	
		</div>
	</section>
</body>
</html>

documentation

create a web folder first.
create a img sub folder  // place  all images into this folder
now create three files // in web folder
index.html 
css.css
js.js 

copy code given bellow and paste it.
save the program.
finally run the program

click on this link to see the video :https://www.youtube.com/watch?v=V97wCVY_SrQ
visit our website for full documentation :https://nozzons.blogspot.com/

index.html

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='css.css' rel='stylesheet' type='text/css'/>
    <script src='js.js'></script> 
</head>
<body class='main'>
    <section id="one">
        <div class='content'>
            <h1 style='font-size:5vw;'>first heading</h1>
            <p style='font-size:3vw;' >description</p>  
        </div>
    </section>
    <section id="two" style='margin-top:100vh'>
        <div class='content'>
            <h1 style='font-size:5vw;'>second heading</h1>
            <p style='font-size:3vw;'>description</p>   
        </div>
    </section>
    <section id="three" style='margin-top:100vh' >
        <div class='content'>
            <h1 style='font-size:5vw;'>third heading</h1>
            <p style='font-size:3vw;'>description</p>   
        </div>  
    </section>
    <section id="four" style='margin-top:100vh' >
        <div class='content' style='margin-bottom:10%;'>
            <h1 style='font-size:5vw;'>fourth heading</h1>
            <p style='font-size:3vw;'>description</p>   
        </div>
    </section>
</body>
</html>

css.css

*{
    margin:0;
    padding:0;
 }
.main{
    width:100%;
    height:100vh;
    background-image:url('img/img_one.jpg');
    background-size:100% 100%;
    background-attachment:fixed;
    transition: 1000ms;
    }
section{
    width: 100%;
    min-height: 1px;
    }
.content{
    width:50%;
    min-height:1px;margin-top:10%;
    margin-left:10%;
    color:white;
    }

js.js

$(window).on("scroll touchmove", function() 
{
    if ($(document).scrollTop() >= $("#one").position().top && $(document).scrollTop() < $("#two").position().top  ) 
    {
        $('body').css('background-image', 'url(img/img_one.jpg)')
    };
    if ($(document).scrollTop() >= $("#two").position().top && $(document).scrollTop() < $("#three").position().top)
    {
        $('body').css('background-image', 'url(img/img_two.jpg)')
    };
   if ($(document).scrollTop() >= $("#three").position().top && $(document).scrollTop() < $("#four").position().top ) 
   {
        $('body').css('background-image', 'url(img/img_three.jpg)')
   };
   if ($(document).scrollTop() >= $("#four").position().top) 
   {
        $('body').css('background-image', 'url(img/img_four.jpg)')
   };

});

So i am just answering this old thread because I was trying to implement the same thing on my website but i found it a bit difficult to implement it so I made a function of my own , its a bit easier to implement and understand but a bit buggy, For instance: if the user use the scroll bar instead of scroll wheel of the mouse the image will not change , hope it helps you :

<html>

<head>
  <script>
    function f() {
      t1.src = "https://igu3ss.files.wordpress.com/2012/09/chess_king_4.jpg"
      t1.height = "319"
      t1.width = "330"
    }

    function f2() {
      t1.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Chess_piece_-_Black_queen.JPG/130px-Chess_piece_-_Black_queen.JPG"
      t1.height = "319"
      t1.width = "330"
    }

    function f3() {
      t1.src = "https://asmoodle.asmadrid.org/blog/s16240/wp-content/uploads/sites/56/2014/12/protourney_knight_black_400.jpg"
      t1.height = "244"
      t1.width = "330"
    }

    function f4() {
      t1.src = "https://thumbs.dreamstime.com/x/chess-knight-white-background-29811348.jpg"
      t1.height = "244"
      t1.width = "350"
    }

    function f5() {
      t1.src = "http://cdn.craftsy.com/upload/3703789/pattern/115774/full_7439_115774_ChessKnightMachineEmbroideryDesign_1.jpg"
      t1.height = "319"
      t1.width = "350"
    }
  </script>
</head>

<body>
  <div align="center" style="position: fixed; z-index: 20; left:38.5%; top:200">
    <img src="no.png" height="319" width="330" name="t1">
  </div>
  </div>
  <div class="container" onmouseover="f3()" style="padding:0; margin:0; width:100%;">
    <img src="https://pixabay.com/static/uploads/photo/2016/01/11/22/05/background-1134468_960_720.jpg" width="100%">
  </div>
  <br>
  <br>
  <div class="container" onmouseover="f4()" style="padding:0; margin:0; width:100%;">
    <img src="https://image.freepik.com/free-photo/lens-flare-abstract-backgound_21276999.jpg" width="100%">
  </div>
  <br>
  <br>
  <div class="container" onmouseover="f5()" style="padding:0; margin:0; width:100%;">
    <img src="https://image.freepik.com/free-photo/lens-flare-abstract-backgound_21276999.jpg" width="100%">
  </div>
  <br>
  <br>
  <div class="container" onmouseover="f()" style="padding:0; margin:0; width:100%;"></div>
</body></html>

Cheers!! Ha[ppy] Coding.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Change Image on Scroll Position - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)