CODEWITHSUNDEEP
javascriptjqueryarraysbackground-imagescrolltop
ScottFox
ScottFox

Reputation: 21

jQuery/javascript: background-image, changes on scroll

I'll preface this by saying I am a beginner and my code is probably hillariously messy and/or incoherent, but I'll post it anyway hoping those errors can be caught.

I've searched for a couple days for answers and solutions to this, I also located this topic of someone asking the exact same question here: http://goo.gl/BwLzp (deemed to vague) so I'll be as thorough as I know how to be.

What I have so far, is a combination of a few tutorials and excerpts from here:

The concept: (A large amount of images will be pre-loaded and set as background images. In theory, for every whole number that is scrolled (scrollTop), the background image changes accordingly.)

All the images are basically named: imgname1.jpg, imgname2.jpg, imgname3.jpg etc. So the "imgname" is paired with the scrollTop number.

And here is what I have regarding only the scrolling (not the preload): 

$(function getPos() {
    var Pos = $(window).scrollTop();  // "Pos = scrollTop and is added onto imgname
return Pos;
}); 

$(function() {

$(window).scroll(function() { //Defines that this function will be triggered as the scrollbar is moving 

    var image_url = 'http://www.examplehost.com/imgname' + Pos + '.jpg'

    if (getPos()>1) { //If the vertical position of scrollbar is above 1 display imgname + Pos + .jpg (ex: imgname30.jpg) and add to url

        $("body").css('background-image', image_url);                            
    }


    else { //If the vertical position of scrollbar is at 1 display start image
        $("body").css('background-image', url("http://www.examplehost.com/imgname/0.jpg");
    }

});

}); //function ends

I don't know how much of a mess that is and yes I'll be brushing up on the basics, since it is logical in my mind but completely wrong I'm sure. For this project however my knowledge only limits me to guessing/wondering the following:

Extra info that may help/further clarification, the goal is the image position remains still, and a new "frame" takes over with each scrolling increment. Ultimately, I would center + keep the images full screen such as: http://www.powersmart.ca/

Thank you for even reading this and I apologize if I broke a rule or if this question/dilemma has been solved in further detail somewhere I could not locate.

That said, thoughts?

Upvotes: 2

Views: 2229

Answers (3)

luiges90
luiges90

Reputation: 4598

To make "background image position remain still" you need object.style.backgroundAttachment="fixed"

to do with jquery:

$("body").css('background-attachment', 'fixed');

Though I would suggest putting this in your css

body { 
    background-attachment: fixed;
}

http://www.w3schools.com/cssref/pr_background-attachment.asp

Google is your friend ;)

EDIT: Just brings up one thing, are you sure the images are of correct url? If the URLs are wrong, it will results in no background at all.

Upvotes: 0

bytepirate
bytepirate

Reputation: 329

function getPos() {
    var Pos = $(window).scrollTop();
    return Pos;
}
$(function() {
      $(window).scroll(
       function() {
        var here=getPos();
        //alert(here);
        $("body").css('background-image', url('http://www.examplehost.com/imgname' + here + '.jpg')); 
      })
});

start with this. but you would need one image per pixel...

Upvotes: 0

Dawson Loudon
Dawson Loudon

Reputation: 6029

try changing this:

if (getPos()>1) { //If the vertical position of scrollbar is above 1 display imgname + Pos + .jpg (ex: imgname30.jpg) and add to url

    $("body").css('background-image', image_url);                            
}
else { //If the vertical position of scrollbar is at 1 display start image
    $("body").css('background-image', url("http://www.examplehost.com/imgname/0.jpg");
}

to:

if (getPos()>1) { //If the vertical position of scrollbar is above 1 display imgname + Pos + .jpg (ex: imgname30.jpg) and add to url

    $("body").css('background-image', 'url('+image_url+')');                            
}
else { //If the vertical position of scrollbar is at 1 display start image
    $("body").css('background-image', 'url(http://www.examplehost.com/imgname/0.jpg)');
}

Upvotes: 1

Related Questions