Replace images in a video-like way

I’d like to talk about the CSS technique that replaces images in a way like a video. Photos in Pitchfork’s cover story of Bat for Lashes appear when the user scroll the mouse when reading the article orderly. The photos were taken continuously, therefore when the user scroll really fast, the replacements of the photos create a feeling of video.

The website places multiple images all under one div:

屏幕快照 2013-09-24 下午10.16.47

It adds the class of “active” to control the replacements in the CSS stylesheet, playing with opacity of each image that is about to show up.

.flipbook img.active {

opacity: 1;

filter: alpha(opacity=100);

-ms-filter: “alpha(opacity=100)”;

}

.flipbook img {

display: block;

position: absolute;

top: 0;

left: 0;

opacity: 0;

filter: alpha(opacity=0);

-ms-filter: “alpha(opacity=0)”;

-webkit-backface-visibility: hidden;

}

.autoscale img {

width: 100%;

height: 100%;

}

* {

-webkit-backface-visibility:hidden!important;

}

When enable the “opacity” under “.flipbook img” style section, the photo will disappear; when disable this code, the photo shows up.

屏幕快照 2013-09-24 下午10.08.32

This photo now is “active,” and “opacity=0” is struck out.

屏幕快照 2013-09-24 下午10.22.06

This photo is not “active,” which means it’s not showing up, and the “opacity=0” is there in the CSS stylesheet.

It’s highly recommended to go to the website and scroll on your own to get the general idea of how this technique works. And I would really like to use such technique in my future web design.

Advertisements

4 responses to “Replace images in a video-like way

  1. I’ve seen this story before on Pitchfork and was amazed- I’ve never seen a feature like that before. The designers of this website did a good job of timing when the background images should switch in time with the user’s scroll. I imagine it must have been difficult to decide which images should show for very specific parts of the article. I completely agree that it’s a really cool feature that went well with the story and I also would like to incorporate the same technique on my own site one day.

  2. I really like this site. Reading and listening at the same time, such a enjoyable reading experience. The motion pictures help to create a feeling of flowing between the words and music. We human have 5 sense: see, hear, smell, taste and touch, most time we used sight sense, we used a lot visual language to deliver the information, I think we can’t ignore the power of hearing.

  3. I love this! I would really like to try this out with a site, but need to get my hands on some images. This really engages the user’s emotion and senses. The movement on the page really allows the reader to engage with the subject and almost get to know her better. It’s like we can see her expression or feelings towards what she is saying and what we are reading about. Really awesome! We should try to do this together sometime after class!

  4. Cool feature! It’s so useful especially when you have a series of photos. I will definitely try to incorporate the feature in my future design. Also, I like that you won’t feel lost even with such those dazzling effects, thanks to the consistency in design. The website marks several parts by using the same format-starting with a quote in dark background then dissolve into paragraphs in a light back ground with clear-cut transitions.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s