Design Animation Project

I’d like to do something simple, like a loading animation. Some loading animations are done really well and can be something to look at while someone waits. These animations are something we see everyday and take for granted.

Code Animation Project

HTML Code
<head>
<meta charset=”utf-8″>
<title>Untitled Document</title>
<link href=”code test 4.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div class=”progress container”>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>

CSS Code
.progress{
height: 40px;
position: absolute;
top: 50%;
left: 50%;
margin: -20px 0 0 -50px;
}
.progress span{
transition: all 500ms ease;
background: #FFFFFF;
box-shadow: 1px 2px 3px #999;
height: 10px;
width: 10px;
display: inline-block;
border-radius: 10px;
animation: wave 2s ease infinite;
}

.progress span:nth-child(1){ animation-delay: 0; }
.progress span:nth-child(2){ animation-delay: 100ms; }
.progress span:nth-child(3){ animation-delay: 200ms; }
.progress span:nth-child(4){ animation-delay: 300ms; }
.progress span:nth-child(5){ animation-delay: 400ms; }
.progress span:nth-child(6){ animation-delay: 500ms; }
.progress span:nth-child(7){ animation-delay: 600ms; }
.progress span:nth-child(8){ animation-delay: 700ms; }

@keyframes wave{
0%, 40%, 100% {
transform: translate(0, 0);
background-color: #FF7000;
}
10% {
transform: translate(0px, -3px);
background-color: white;
}
}@charset “utf-8”;
/* CSS Document */

Original Code by Arjun Raj
https://codepen.io/rajarju/pen/pFrIt

 

 

Digital Media Coding Practice

<h1><u>THIS IS A LIST OF MY FAVORITE MOVIES</u></h1>
<ol>
<li><strong>Shrek</strong></li>
<li><em>Shrek 2</em></li>
<li><strong><em>Shrek The Third</em></strong></li>
<li>Shrek Forever After</li>
<li><strong><em><u>Spiderman 3 (2007)</u></em></strong></li>
</ol>

ComD1127 Journal #1

All of the pictures I took of typography looked like they were all professionally done. This is due to my pictures being of typography on public objects, such as books or packaging. The genres in my photographs include serif, sans serif, and slab serif. The most interesting typeface in my photos would have to be the word “Japanese” on an origami paper book. It looks sans serif and decorative at the same time.
There was no hand written lettering in any of my photos. Something I noticed while taking these photos however, is that handwritten/custom typefaces are very rare. Even though sans serif fonts were made mostly for viewing on screens, they’ve infested the real world. Sans serif fonts are much more common than serif fonts are. Serif fonts are now used to make things look old or pristine, such as book covers. Sans serif fonts are now used to make things look professional and minimalistic, like a product name/logo.
These typefaces look more like they were made by businesses, for example, one of my pictures shows the side of an iPhone box. The government made typography are usually only on public signs, like traffic signs or information boards.