Blog 3: How its CSS techniques work – The Perils at Great Falls

By Zhao, Hong

The Perils at Great Falls by The Washington Post is an example of what I want to make in the future. I understand that I have a long way to go.

The first attraction on this web page is the dynamic graphic at the header part. I think the background picture, the flowing river, according to its page source and styling, should be a short video or pictures. Here, I just want to talk about the two CSS techniques we could learn from the markers on the dynamics and use them in our own works.

First, CSS3 animation.

Screen Shot 2014-09-25 at 10.13.10 PM

This is the animation used for the swinging markers.

{animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-iteration-count: infinite;
  animation-name: linktrans;}

a. “Animation-duration” means how long the animation will play, and you should always make sure it’s not 0.

b. “Animation-time-function” specifies the speed curve of the animation, which defines the time an animation uses to change from one set of CSS styles to another. “Ease-in-out” means the animation has both a slow start and a slow end.

c. “Animation-delay” specifies a delay before the animation will start.

d. The animation-direction property defines whether or not the animation should play in reverse on alternate cycles. Normal is the default value.

e. The animation-fill-mode property specifies what styles will apply for the element when the animation is not playing (when it is finished, or when it has a “delay”).

f. “Animation-iteration-count” specifies how many times an animation should be played.

Here is the link for animation properties at W3Schools.com in case you want to know more: http://www.w3schools.com/cssref/css3_pr_animation.asp

Second, Hiding an element. When you click any one of the markers, a graphic will appear below giving a specific description of that spot.

Screen Shot 2014-09-25 at 10.13.27 PM

{display: none;
visibility: hidden;}

a. “display:none” hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there:

b. “visibility:hidden” hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.

Unfortunately, I still don’t figure out how to reveal an element. Would it be using some JavaScript knowledge?

Advertisements

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