CODEWITHSUNDEEP
htmlcss
haku
haku

Reputation: 4505

Some HTML/CSS effect that I want to learn more, but can't describe

I was just browsing this BBC travel page 50 Reasons to #LoveTheWorld and realized that on bigger pictures, the page overlaps and as we scroll, there is this cool effect (hadn't seen in other websites I visit). I wanted to learn more about it, but I don't even know what to search for.

As we scroll, on big pictures, the page still scrolls and the picture is exposed, it's kind of hard to explain. Could someone tell me what are those kind of effect called, may be a tutorial if one is available, or just the name would be helpful enough.

Upvotes: 0

Views: 85

Answers (2)

Matija Mrkaic
Matija Mrkaic

Reputation: 1933

The page you linked uses only background-attachment: fixed;.

It actually uses absolutely positioned img elements which are translated on scrolling to 'stay fixed', but visual results are pretty much the same as when background is fixed (and it's size set to cover). This approach is much simpler for checking out the basics of this technique.

Although very simple, it can provide interesting effects when used on a large (background) images, or multiple revealing rows of images.

Here's a simple fiddle. That's the basic concept.

Refference

Upvotes: 3

Dayan
Dayan

Reputation: 8031

This is called Parallax

You can setup a basic Parallax markup as stated by Keith Clark in his Pure CSS parallax article.

<div class="parallax">
  <div class="parallax__layer parallax__layer--back">
    ...
  </div>
  <div class="parallax__layer parallax__layer--base">
    ...
  </div>
</div>

Then styling it like so:

.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back {
  transform: translateZ(-1px);
}

Look at the demo Here.

The full article which goes into good detail is Here.

Upvotes: 1

Related Questions