Blog Post 3: Fueled by Water – Speedo

Once I opened this website of Fueled by Water of Speedo, I found it neat and clean. Especially the background video, it’s really attractive.

Fueled by Water - Speedo USA

After I checked the CSS code, I did find some useful tags that I’d like to use next time.

The first is “z-index”.

.videos .home {

position: fixed; //

left: 0;

right: 0;

top: 50%;

margin-top: -130px;

  z-index: 380;

text-align: center;

}

According to W3schools, the z-index tag specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. So it’s about positioning. I think this is really useful. This can be an alternative way to add background images but it’s much easier. Moreover, when it comes to arranging plenty elements, it can also be useful.

Another tag is “@keyframes”.

@keyframes spin {

from {transform:rotate(0deg);}

to {transform:rotate(360deg);}

This is a useful tag for creating animations. During the animation, you can also change the set of CSS style many times. On this page, when the mouse is moved over the menu icon on the left, there is an animation of the homepage. It’s pretty cool. I want to use it for my page to be more active and attractive.

Advertisements

About Zhou Hang

Graduate student of Missouri School of Journalism. Enterprise reporter for the Columbia Missourian. Interested in movie, music, cycling, tennis and jogging.

2 thoughts on “Blog Post 3: Fueled by Water – Speedo

  1. The “z-index” tag you found is very useful, especially when the design contains multiple elements. For instance, if the designer want to posit an image behind the text, he could simply add the “z-index: -1” in codes. The tag makes adding background images easier and creates more layers in design.

    Yet we should be cautious that this tag could only work on positioned elements, which means that it will not work unless the position property is set first. That is why in the codes of “Fueled by Water”, the “position: fixed;” is set before “z-index.”

    You also mentioned the “@keyframes” tag, which can create animations by gradually changing the CSS styles from one to another and setting the percentage of the animation durations. This tag has to be used with other tags defining the specific animations and CSS styles in order to make the final animation happen.

    I agree with you that the animations will make the user experience more pleasant as the websites can be livelier and more interactive. Moreover, it seems that making websites interactive is a trend in web design, and I believe that with the javascript, we could make our projects even more creative.

    Like

  2. It’s an absolutely very beautiful homepage. And the two tags Zhou introduced here are exactly what make the page look amazing. I particularly like the “@keyframes” tag, which is used for creating animations. I like simple designs like the menu icon on this homepage. Sometimes if you want to highlight on visual impact, and present a clean-cut interface, a long listed navigation bar might not be a very good choice. One menu icon would be ideal, but not without enough explanation when hovering on it. The “@keyframes” tag solved this problem by showing different pictures and titles of different categories. It’s pretty cool. I definitely want to combine this feature in my own design.

    Another thing I like about this homepage is the moving pictures. The background looks so vivid because you can see the water flowing. I wonder what makes this work. I guess it would need a few short video clips instead of photos, but I don’t know how to put them together and make them work. This is something I would want to learn in the future.

    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