4

Fiddle of the issue: http://jsfiddle.net/Vy365/3/

I'm trying to create sections on a page that have a parallax scrolling effect.

The main CSS I'm using to achieve this is background-attachment: fixed for the background image, and position: fixed for the text on top of the image.

I have multiple div's with this effect on the page, and I want each section to cover up those that come before it.

HTML:

<section>
    <div id="parallax-1" class="parallax">
        <div class="title">
            <h1>Fixed Text 1</h1>
        </div>
    </div>
</section>

<section class="scrolling-content">Scrolling Content</section>

<section>
    <div id="parallax-2" class="parallax">
        <div class="title">
            <h1>Second Fixed Text</h1>
        </div>
    </div>
</section>

<section class="scrolling-content">Scrolling Content</section>

CSS:

.parallax {
    margin: 0 auto;
    padding: 0;
    position: relative;
    width: 100%;
    max-width: 1920px;
    height: 200px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50% 0;
    z-index: 1;
}

.parallax .title {
    position: fixed;
    top: 80px;
}

#parallax-1 {
    background-image: url(http://placekitten.com/500/200);
}

#parallax-2 {
    background-image: url(http://placekitten.com/500/202);
}

.scrolling-content {
    position: relative;
    width: 100%;
    height: 200px;
    background: #ffffff;
    z-index: 2;
}

The background images cover up one another appropriately, however the fixed text remains fixed on the page (once again, see the fiddle).

Is there any way to fix this with CSS? Or do I have to do some yucky jquery window scroll monitoring?

dougmacklin
  • 2,560
  • 10
  • 42
  • 69

3 Answers3

1

Think you want to use position:absolute instead of position:fixed on your '.parallax .title' class

Nagra
  • 1,529
  • 3
  • 15
  • 25
0

Since you are using jQuery anyway, why don't you try a plug in like http://stephband.info/jparallax/ ?

EDIT: For mobile apps, you may want to check out Skrollr. It is pure Javascript, and there are some really good examples in the "In the wild" section.

It can help you from re-inventing the wheel.

Sablefoste
  • 4,032
  • 3
  • 37
  • 58
  • is there a good way to get that plugin working with simple background images + text? seems to want to do a lot of things i don't want like track the mouse and stuff, which I'm worried may not be mobile compatible – dougmacklin Jul 23 '13 at 19:31
  • This plug-in does have concerns with scrolling on mobile. I updated the Skrollr link, which does work well with mobile apps. – Sablefoste Jul 23 '13 at 20:21
0

Here are two tutorials (both using Skrollr.js) which might help others trying to create a similar parallax scrolling effect.

Ihatetomatoes
  • 91
  • 3