Animations
There are several ways to create animations for your website. An animation as we’re going to define it is basically anything on your website that moves, whether text, an image, etc. I don’t mean cartoons or characters or little movies (like our Xtranormal movie we did a few weeks ago).
You’ve learned how the web is growing and changing and the code you’ve learned, HTML5 and CSS3, is the latest and most up to date. This is important because you want to design for the future, not the past, and make sure anything you design is compatible for newer browsers and mobile devices like tablets and smart phones.
Animations for the web can be created using CSS3 although it’s currently not compatible in all browsers, including Internet Explorer and Opera. Other ways to create animations include making animated gifs in a program like Photoshop or using Flash or JavaScript.
Today we will use CSS3 to do some animations. We will also use a couple of different websites to create animations. There are many free web applications out there that you can use for animations and we’ll look at some today.
Assignment 1
You must use Firefox because the animations will not work in Internet Explorer.
You will work with W3Schools.com to practice animations using CSS3. Please click on the links below to work on the examples.
1. Change the colors
http://w3schools.com/css3/tryit.asp?filename=trycss3_animation1
2. Change the colors and the position
http://w3schools.com/css3/tryit.asp?filename=trycss3_animation3
3. Finally, an animation that keeps going
http://w3schools.com/css3/tryit.asp?filename=trycss3_animation4
Assignment 2
Wigflip.com has several cool graphics, some animated and some not, you can create for your website.
Do each one on wigflip.com and add them to a new webpage. There are twelve different ones for you to do.
You will notice in some of them you can change the color value (ex. #ffffff). To review the colors please see http://w3schools.com/cssref/css_colornames.asp
To make a new webpage for practice purposes copy and paste the following into Notepad:
<html>
<head>
<title>Animation practice</title>
</head>
<body>
</body>
</html>
Once you’ve done that please save it as animation.html and also open it in Firefox.
Please remember you are graded on these class assignments. If they are incomplete you will not receive 100% credit. These in-class assignments are worth 20% of your grade for the quarter.