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.
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.
{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?
FutureView 