www.webdeveloper.com
Results 1 to 4 of 4

Thread: How do I alter picture with scrolling events?

Hybrid View

  1. #1
    Join Date
    Nov 2012
    Posts
    2

    How do I alter picture with scrolling events?

    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!

  2. #2
    Join Date
    Oct 2012
    Posts
    39
    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/
    I am Creating Website for Businesses and Brands to build up online presence.

  3. #3
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    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.

  4. #4
    Join Date
    Nov 2012
    Posts
    2
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles