2

I have some HTML set up like this:

<div class="mediasection large">
    <div class="cover" style="background-image: url(/media/images/panorama.jpg);"></div>
    <div class="overlay">Welcome!</div>
</div>

The cover element is uses background-attachment: fixed; to create a parallax effect. What I'm trying to achieve is have the overlay element behave the same way, where the text in it is fixed to the viewport, but still contained inside the mediasection div, so that when the user scrolls the page the cover and overlay stay in the same position, but disappear as the mediasection element goes out of view.

Is there any way to achieve this?

tl;dr; Some sort of background-attachment: fixed; to regular elements, not just the background.

Thanks!

Qub1
  • 1,154
  • 2
  • 14
  • 31
  • Sounds like you might be talking about about `position: fixed;`? – Simon Merrick Nov 29 '15 at 20:01
  • @SimonMerrick That fixes the element's position, but does not contain it inside the mediasection element, and thus it will stay visible even if the mediasection element scrolls out of view. – Qub1 Nov 29 '15 at 20:03
  • 1
    Is this the behavior you are looking for? https://www.dropbox.com/s/pk7tbf11jx8c7xw/Untitled.png?dl=0 – Simon Merrick Nov 29 '15 at 20:36
  • @SimonMerrick That's exactly what I'm looking for! Is it possible? – Qub1 Nov 29 '15 at 20:40
  • 1
    I'm not sure. There's a bit of information out there about paralax that I'm reading through at the moment. http://keithclark.co.uk/articles/pure-css-parallax-websites/ – Simon Merrick Nov 29 '15 at 21:09

2 Answers2

2

Honestly, I think the easiest way is to just to use photoshop / [your favourite image editing software] to put the overlay text over the background image. I made this jsfiddle which hopefully demonstrates your desired behavior.

The HTML

<div class="media-screen">
    <h1 class="sr-only">Overlay Text</h1>
    <p class="sr-only">With an interesting paralax effect</p>
</div>

Where sr-only is a class that hides elements visually while maintaining screen reader accessibility

The CSS

.media-screen {
    position: relative;
    height: 250px;
    background-image: url('path/to/your/image.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.sr-only { 
    position: absolute; 
    overflow: hidden; 
    clip: rect(0 0 0 0); 
    height: 1px; width: 1px; 
    margin: -1px; padding: 0; border: 0; 
}

Mobile Support

If you are supporting multiple screen sizes you will probably need a few different versions of the image to suit different orientations. You can use media queries to substitute the image that is displayed for various sizes / orientations 
/*Example media query for view port width*/
@media screen only and (min-width: 1024px){
    .media-screen {
        background-image: url('path/to/your/image-large.png');
    }
}

/* Example media query for view port orientation */
@media screen only and (orientation: portrait){
    .media-screen {
        background-image: url'path/to/your/image-narrow.png');
    }
}

Note: Embedding content in the background image obviously means that the content is not interactive so this is only really any good for basic display elements.

Simon Merrick
  • 732
  • 4
  • 13
0

I have found a jQuery based solution myself. I'm still not a fan of relying on JavaScript, so any other answers are welcome, but it works.

Here it is:

var oldScroll = 0;
$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    var scrollOffset = scroll - oldScroll;

    // Overlay positions
    var offset = $(".overlay").offset();
    $(".overlay").offset({top: offset.top + scrollOffset});

    oldScroll = scroll;
});

This offsets the overlay while scrolling.

But as I said, other answers are welcome.

Qub1
  • 1,154
  • 2
  • 14
  • 31