Controlling the movement of text on a parallax website?

I am working on a parallax website. The parallax relies on everything being a background image - the images that will move at different speeds.

Is there a way to control text as well, without making it an image? By control I mean fix it in place while the parallax images move? Without fixed positioning it just flys past the images going at the default page speed - which is faster than the parallax.

I have been playing with position:fixed and z-index - which works to a point: http://jsfiddle.net/bf8Zh/1/ . The problem is that everything that everything goes a bit wrong the further down the pages you go - overlapping etc

The above jsfiddle is an example of using the position:fixed/z-index to try and get around the problem.

Example of the css:

#intro,
#two,
#three,
#four {width: 100%; margin: 0 auto; height: 800px; overflow: hidden; background-position: 50% 50% !important;}

#intro {background:url(../img/bg_1.jpg) 50% 50% no-repeat fixed #000;}
#two {background:url(../img/bg_7.jpg) 50% 50% no-repeat fixed; z-index: 25; position: relative;}
#three {background:url(../img/bg_8.jpg) 50% 50% no-repeat fixed #ccc; z-index: 9999; position:relative}
#four {background:url(../img/bg_7.jpg) 50% 50% no-repeat fixed;}

#two .content {width: 300px; margin: 300px 0 0 200px; float: left; z-index: 50; position: fixed; top: 0; left: 0}
#two .content .sectionTitle {font-size: 36px; margin: 10px 0; z-index: 50;}
#two .content .sectionText {font-size: 12px; margin: 10px 0; z-index: 50;}
#two .content .sectionTags {font-size: 12px; margin: 10px 0; z-index: 50;}

#three .content {width: 300px; margin: 300px 200px 0 0; float: right; z-index: 100;}
#three .content .sectionTitle {font-size: 36px; margin: 10px 0; z-index: 100;}
#three .content .sectionText {font-size: 12px; margin: 10px 0; z-index: 100;}
#three .content .sectionTags {font-size: 12px; margin: 10px 0; z-index: 100;}

Answers


Is there a way to control text speed as well, without making it an image?

You can animate the text at any speed you like. Your fiddle didn't work for me (just a black frame for output), but here's the basic:

jQuery(function($) {

  $("button").click(function() {
    $("#sometext").animate({
          left: "+500"
        },
        500 // This is the duration, in milliseconds
    );
  });
});

You can supply the duration the animation should take to the animate function.

Live example | source - The example varies the time from 250ms through 750ms


The solution, that seems to work, is using the jQuery inview plugin - http://remysharp.com/downloads/jquery.inview.js

$('#seven, #three').bind('inview', function (event, visible) {
        if (visible == true) {
            $(this).addClass("active");
        }else{
            $(this).removeClass("active");
        }
    });

Using the above code to add an active class to pages once scrolled into view, then hopefully removing the class afterwards. The active class changing the z-index of the pages in question. Seems to work so far - with the text using position:fixed.

#three {background:url(../img/bg_grey.jpg) 50% 50% no-repeat fixed;height: 2800px; position: relative; z-index: 800;}
#three.active {background:url(../img/bg_grey.jpg) 50% 50% no-repeat fixed;height: 2800px; position: relative; z-index: 850;}

Need Your Help

VBA Word Find/Paragraph Copy

excel vba ms-word

Current I am trying to open a word document, look for a certain word (in this case "Description") then go two lines below and copy the paragraph under it.

pointers in c (beginner)

c arrays pointers

I just started to look at C, coming from a java background. I'm having a difficult time wrapping my head around pointers. In theory I feel like I get it but as soon as I try to use them or follow a