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.
Category: Uncategorized
3D Printing
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
Animation Example
Digital Media Video Quality
The first video uploaded to Youtube. As you can see, the overall quality of the video is considered bad by today’s standards.
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>
Digital Media Color Modes Essay
Pangolin Colors
The light blue gives the image a more positive feeling, matching with the sky in the background of the image.
The bottom two colors are darker and make the image appear murky, while accurately representing the natural habitat of the Giant Pangolin.
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.