code icon

CSCI 1720

Intermediate Web


Homework 2 - More CSS Animation

  1. In your working_folder\homework folder, make a new subfolder and name it hw2_more-animations
  1. Download the starter files archive for this assignment and save them in the working_folder\homework\hw2_more-animations folder
  1. Extract the files. If you want, you can then delete hw2_more-animations.zip
  1. Open working_folder\homework\hw2_more-animations as a Brackets project
  1. In Brackets, open index.html, css\main.css, and css\twinkle.css
  1. index.html is completed already. Look at the code and see how the page is structured

Background

  1. Starting with twinkle.css, add a comment block with the file's descriptive information
screen shot
Fig. 0- Comment Block
  1. Define the @keyframes directive
screen shot
Fig. 1- @keyframes
  1. Add CSS for the .container class to fix it in place
screen shot
Fig. 2- Background
  1. Define a .stars class
screen shot
Fig. 3- .stars
  1. Define a class named .twinkling. This will make the stars appear to twinkle by moving slowly across them when the page loads
screen shot
Fig. 4- .twinkling
  1. Define a class named .clouds. This will superimpose the images/clouds_repeat.png on the background, creating the appearance of clouds partially obscuring the stars
screen shot
Fig. 5- Clouds

Take a look at stars.png, twinkling.png, & clouds_repeat.png to see how layering them will produce the background effect we're looking for

  1. Add the following properties/values to .clouds & .twinkling. This will associate the @keyframes directive and set the animation's parameters. The animation-duration for .twinkling should be 70s & .clouds should be 150s
screen shot
Fig. 6- Animation properties

Save all files and launch the page in Live Preview. Watch the backgound and check that the stars and clouds are working as expected

main.css

  1. Open main.css in Brackets
  1. Add a comment block
screen shot
Fig. 7- Comment Block
  1. Add CSS for the page selectors
screen shot
Fig. 8- CSS for the page
  1. Style the <h1> selector
screen shot
Fig. 9- CSS for h1
  1. Create a grid to hold the photographs
screen shot
Fig. 10- Grid
  1. Define some classes for the grid's content. We'll call them, collectively, .tile, .tile img (for the images inside each tile), & .tile:hover (which is where we'll have the tiles animate when they're hovered over)
screen shot
Fig. 11- .tile classes
  1. Create the @keyframes to define how the tiles will behave when hovered over by the user
screen shot
Fig. 12- @keyframes
  1. Now a set of @keyframes for when the user mouses out of the tile
screen shot
Fig. 13- reset @keyframes
  1. Add the following properties/values to the .tile:hover pseudo class. Again, this will trigger the animation when the mouse hovers over it
screen shot
Fig. 14- Animating the tiles
  1. Add the following properties/values to the .tile class
screen shot
Fig. 15- Resetting the tiles
  1. Test your file on the browser. If you did everything right, the images should spin and enlarge as you hover over each, then spin and shrink when you mouse out
screen shot
Fig. 16- Screen shot

Uploads and such

  1. Using FileZilla, log in to your account on the server (if you can't remember the password, you can find it on D2L under Content→Syllabi & Policies)
  1. On the right, navigate to the homework folder
  1. On the left, navigate to your working_folder\homework folder
  1. Drag & drop the hw2_more-animations folder from the left to the right

Check your work

  1. Navigate to your page on the Internet

Remember, the URL takes the form: your_etsu_id.csci1720.net/homework/hw2_more-animations/index.html
So, if you're ID is zabc1, the URL would be
zabc1.csci1720.net/homework/hw2_more-animations/index.html

  1. Check again to ensure that the animations work as desired
  1. When all is well, copy & paste the URL into a new text file in Brackets. Save the file as hw2_more-animations.txt
  1. Upload hw2_more-animations.txt to the Homework 2 folder on D2L's Dropbox

Have a nice day 😊