How do I alter picture with scrolling events?

**danielcraig** · 11-11-2012, 03:10 PM

Hi guys,

This is probably really simple but I'm very new to this so need some help.

I want to insert a static picture to my blog which changes a few times as a user scrolls down.

Basically it's going to be my head which gets more and more enraged as a user scrolls past that part of the site, just for jokes. Ideally, I'd like to time it so that I duck down to try to stay in shot as the page is scrolled past the photograph.

Can anybody explain how I could do this?

Kudos if anybody manages it!

**parkerfrank32** · 11-12-2012, 01:34 AM

Here you go. Background is set to 10% scroll. You can change the background scroll rate by changing the 10 in the code.

CSS

html, body{
height:100%;
min-height:100%;
margin:0;
padding:0;
}
.bg{
width:100%;
height:100%;
background: #fff url(..) no-repeat fixed 0 0;
overflow:auto;
}

<div class="bg">
<span>..</span>
</div>
JavaScript

$('.bg').scroll(function() {
var x = $(this).scrollTop();
$(this).css('background-position', '0% ' + parseInt(-x / 10) + 'px');
});
Check working example at http://jsfiddle.net/Vbtts/
Click this link for the full screen example: http://jsfiddle.net/Vbtts/embedded/result/

**ReFreezed** · 11-12-2012, 03:40 PM

I don't know if I or parkerfrank misunderstood you but is this what you mean:

Code:

<html>
	<head>
		<title>Scroll Image</title>
		<style>
			#photo { position: fixed; right: 0; }
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<script>
			var urls = [
				'http://cdn.comps.fotosearch.com/comp/UNW/UNW334/caucasian-mid-adult_~u11249747.jpg',
				'http://cdn.comps.fotosearch.com/comp/UNW/UNW334/caucasian-mid-adult_~u15818631.jpg',
				'http://cdn.comps.fotosearch.com/comp/UNW/UNW334/caucasian-mid-adult_~u10533231.jpg'
			];
			$(function(){
				$(window).scroll(function(){
					var i = Math.min(Math.floor($(window).scrollTop()/400), urls.length-1)
					$('#photo img').attr('src', urls[i]);
				});
			});
		</script>
	</head>
	<body>
		<div id="photo"><img src="http://cdn.comps.fotosearch.com/comp/UNW/UNW334/caucasian-mid-adult_~u11249747.jpg" /></div>
		<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
		<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
		<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
		<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
		<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
		<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
		<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
		<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
	</body>
</html>

The image changes when the page scrolls.

**danielcraig** · 11-18-2012, 06:56 AM

Thank you for your answer, I really appreciate it. This was pretty much exactly what I was looking for.

I'm almost there now so need a final bit of help.

I'm using a dynamic template on Blogger and have a profile picture gadget on the right hand side. I'm trying to work out how to replace the gadget with the example scrolling image. I've altered fixed positioning to absolute, so just need to figure out how to add it to the page. The HTML Template edit function doesn't appear to work on Blogger (may be PHP based? I can link to the code if needed) so I wondered if you had any idea how to do this.

here is a pic of my blogger if you need it.

Again, thank you so much for your help!

Thread: How do I alter picture with scrolling events?

Thread Tools

Display

How do I alter picture with scrolling events?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions