Parallax Web Animation Project

Create a parallax web page!

Goal

  • Use CSS3, HTML5 and some basic Javascript to create a parallax animation page

Requirements

  • Parallax scrolling page with foreground, middle ground and background
  • An audio to play either the whole time or part of the time
  • A video clip to be embedded in the scrolling page at some point
  • At least one graphic in the the foreground, middle and background

Standards

  • Create digital images and animation for web presence
  • Use animation methods
  • Use Drawing/Layers
  • Build a user interface
  • Build a complex information display
  • Integrate audio that matches images and action as appropriate
  • Deal with end-project issues
  • Publish online

Product

  • Blog post with embedded images of code from Flickr and a link from your Hulk account to the working web page

Examples

Workflow Steps

Reverse engineer a parallax web page

  1. Find a good example
  2. Download the example source code
  3. Examine the code and look for patterns you understand
    • Search the code with COMMAND+F for .jpg or .png or other elements of code you might know

Build your own parallax page

  1. Draw out each layer on paper
    • Baseyour drawings on the parallax template you downloaded
      • Make sure your drawings will work inside the template size you downloaded
      • Make sure your drawing is in a simple black and white outline with basic text and/or images
  2. Plan how each layer will be created in Illustrator and/or Photoshop
    • Create a refined layout with Adobe Photoshop and/or Illustrator and export each layer as a separate image (.jpg, .png, .gif)
    • Remember that .png files support transparency
  3. Replace images and code with your own in the sample page
  4. Embed audio and video clips
  5. Comment your code
    • This will help you better remember what does what in the code
  6. Make sure all your files are in one folder
  7. Upload the folder to your PUBLIC_HTML folder on the Hulk server

Update Your Portfolio / Blog

  1. Create your blog post named, Parallax Animation with HTML, CSS and Javascript
  2. Include a link to your Hulk account and the parallax web page
  3. Include a screenshot of some code from Dreamweaver with comments

Tools

Resources

Feedback Form

Leave a Reply

Your email address will not be published. Required fields are marked *