A Fade-in Menu Style on “Interstellar”

As a loyal fan of the movie, Interstellar, the exploration of the external style sheet is both interesting and inspirational. The technique I look at is the transition and delay effects of the navigation menu, which is made possible (partially) by CSS. Transition, in my opinion, is one of the most effective visual effects that can convey sense of modernity and duration. And in the case of this movie, it helps creates a mysterious atmosphere. And here’s what I found about this transition effect.

.menu_section .section_side_menu a {
-webkit-transition: color 0.5s;
-moz-transition: color 0.5s;
-o-transition: color 0.5s;
transition: color 0.5s;
color: #ddd
}

By Googling the first line of the style, I found the official explanation of transition effect in a CSS3 tutorial by W3C. According to W3School.com, two things have to be specified for this style:

  • the CSS property to place the effect
  • the duration of the effect

In the case of the example above, the transition object is the color of the menu element, and it takes 0.5s for the color to complete the transition. And the following example is to apply transition effect of opacity and it takes 0.25s for it to reach the designated opacity.

-webkit-transition: opacity 0.25s ease-in;
-moz-transition: opacity 0.25s ease-in;
-o-transition: opacity 0.25s ease-in;
transition: opacity 0.25s ease-in

It should be noted that all four lines of codes represents the same thing and each of the them specify a browser with the prefix: -webkit- is for Safari; -moz- for Firefox; -o- for Opera. The prefix for different browsers is a very important reminder for web designers to try out the prototype website in different browsers before the job is officially done. Even in a class project, we should always test our effects in at least two browsers and two different types of systems to ensure the validity of the codes.

Another important thing to use the speed curve,  There’s a variety of different speed curves available:

  • ease – specifies a transition effect with a slow start, then fast, then end slowly (this is default)
  • linear – specifies a transition effect with the same speed from start to end
  • ease-in – specifies a transition effect with a slow start
  • ease-out – specifies a transition effect with a slow end
  • ease-in-out – specifies a transition effect with a slow start and end
  • cubic-bezier(n,n,n,n) – lets you define your own values in a cubic-bezier function

In the case of the example above, the effects will start slow and then accelerate till the end. Non-linear speed curve should be used more often of today’s website, since the constant speed may seem a bit dull.

Advertisements

One thought on “A Fade-in Menu Style on “Interstellar”

  1. This is such an interesting effect. I love how Interstellar used it in such a unique way to portray an aspect of the story and mood of the website. I also wasn’t aware that you could code ‘timing’ of elements. I thought that was only possible in JavaScript, so I was surprised to see that it could be coded in CSS. I’m curious how else this timing effect can be included in other design elements. That will be something I’ll have to look more into!

    Like

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