How to achieve parallax behind horizontal bars while scrolling


Tags: javascript,html5,css3,parallax

Problem :

I've seen this effect a couple times now, but I can't find a "name" for it - what's it called? What's the basic theory behind this effect? Does it use pure CSS, or is it primarily driven by JS?

Description:

As the user scrolls vertically down the page, the solid background gives way, à la "curtain reveal", to a background image. Rather than just reaching the bottom of the page, however, another horizontal bar, moving at the same rate as the previous "solid background", covers up the background image from the bottom. As the user continues to scroll, the solid background again gives way to a background image, but this time the background has changed to some other image. The effect is similar to a magician waving his or her hand in front of an object and the object substantially changing in some way.

Another way to put it is that there are "gaps" in the solid background though which different background images can be seen.

Here's an example I found (after a good bit of searching): http://www.astoriacassis.com/
(Ignore the "gallery"-style rotating image at the top. Scroll down and notice the picture of the pool and then later a lamp with an elephant on it.)

Initially I thought it might be something similar to the parallax effect, but it actually appears to be substantially different.

I've seen this effect before and I'd like to know how to replicate it.



Solution :

This is achieved by exploiting the background attachment property on moving divs to create an effect that causes the images to appear to change, while it is in fact two divs simply scrolling up the screen.

Check out this CodePen for a demo: http://codepen.io/anon/pen/sCuvI/

The important parts:

HTML

<div class="content">
  Lorem Ipsum
</div>
<div id="s1" class="scroll"></div>
<div class="content">
  Lorem Ipsum
</div>
<div id="s2" class="scroll"></div>

CSS

.scroll
{
  width: auto;
  height: 200px;
  /*The important part*/
  background-attachment: fixed;
  background: no-repeat center center fixed;
  /*Stretch the background*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

    CSS Howto..

    Shadow-Piercing descendant combinator, '/deep/' , including '::shadow' pseudo elements, are being deprecated so how do we pierce the Shadow DOM?

    how to show button and images in one line using css

    How can I differentiate unordered lists in CSS?

    How to make HTML table cells expand horizontally beyond end of page?

    how to use php variable in css

    How can I place rotated text against a table with HTML and CSS?

    how to set word break in table th or td, when column and table-layout auto using CSS

    Showing the percentage of poll's progress bar outside progress bar

    how to apply multiple css image filters using jquery

    How do I make my links appear as images, and have them change with hover and so on?

    how to display euro symbol in css after and before pseudoelements

    How to get a jQuery modal overlay to not push the scrollbar around?

    I can't figure out how to get display property to work when it comes to multiple div elements

    How to animate through stacked images Javascript

    How to implement vertical tables using html5/CSS

    Floating of Divs not exact. How to arrange them the right way?

    How to combine wildcard and not selectors in CSS

    How to snap divs together vertically in CSS like Pinterest have

    CSS: How the backgrounds can extend the border and overlap?

    How can I set one style to override another conflicting style in CSS?

    How to have background between two handles of jQuery Slider using css gradient

    How to use radio button checked or clicked property in my case

    How do you put two divs next to each other so they fill up the available space

    my website not worked in Ipad and how I can fix some small issue? [closed]

    How do I hide the borders around checkboxes in an ASP.Net CheckBoxList control with jQuery?

    How to check if a TR contains a TD with a specific CSS class with jquery?

    How can I exclude a hover effect with CSS

    How to change tr color on mouse over when there is already implemented?

    How is this fluid column layout changing to single-column as page narrows?

    Slideshow using MooTools JavaScript - How can I position slideshow to rescale in browser window