Change Image on Scroll Position

2019-03-17 06:55发布

站内问答 / JavaScript
1622 3 6

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?

3条回答
在下西门庆
2楼-- · 2019-03-17 07:37 

$(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)')
   };

});
查看更多
0人赞 添加讨论(0) 举报
疯言疯语
3楼-- · 2019-03-17 07:44

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.

查看更多
0人赞 添加讨论(0) 举报
Melony?
4楼-- · 2019-03-17 07:54

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)