💻 Project #3: Animated Movie Scene

Overview

🎥 CSS animations and transforms are powerful tools that bring life to web pages. With animations, we can create smooth transitions, moving objects, or even complex sequences of changes, making websites more interactive and visually appealing. Transforms allow us to manipulate elements by rotating, scaling, or repositioning them, enabling unique and dynamic designs.

In this project, you’ll practice these techniques by building an animated scene inside a defined container. You’ll experiment with movement, resizing, and interactivity to make a creative and engaging display.

🧠 BRAINSTORM: Look up on Google Images: “iconic scenes from…“ + the title of your favorite movie, show, or book.

📥 PROJECT SETUP & SUBMISSION INSTRUCTIONS
  1. Go to the public template repository for our class: BWL-CS HTML/CSS/JS Template
  2. Click the button above the list of files then select Create a new repository
  3. Specify the repository name: CS1-Animated-Scene
  4. Click

    Now you have your own personal copy of this starter code that you can always access under the Your repositories section of GitHub!

  5. Now on your repository, click and select the Codespaces tab
  6. Click Create Codespace on main and wait for the environment to load, then you’re ready to code!
  7. 📝 Write code in this Codespace during class.

Instructions

Part A: Setting Up the Starter Code

  1. Add Starter CSS Code
    • Write the following style rules in style.css: 
      html, body {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

      These rules basically “reset” the settings of the overall page.

  2. Set the Background
    • Add a body style rule to include a background image: 
      body {
 background-image: url("https://wallpaper.dog/large/20552168.jpg");
 background-size: cover;
}
  3. Add the Scene Description Section
    • Inside the <body> tag in index.html, create a container to describe the scene: <div id="scene-description"></div>
    • Inside that <div>, include an <h1> element with the scene title and a <p> element with a brief description of the scene.
  4. Style the Scene Description
    • In style.css: 
      #scene-description {
 width: 600px;
 margin: 20px auto;
 text-align: center;
 font-family: "Trebuchet MS";
 font-size: 0.8em;
 color: white;
}
  5. Add the Scene Container Section
    • Below the #scene-description div in HTML, add another container for the main animation area: <div id="scene-container"></div>
  6. Style the Scene Container
    • In style.css: 
      #scene-container {
 width: 600px;
 height: 400px;
 margin: auto;
 border: 5px solid black;
 background-color: white;
 overflow: hidden; /* contain objects "on-screen" */
}

Part B: Building & Animating the Scene

  1. Plan your Scene
    • Pick an iconic scene from a movie, TV show, or book that you’d like to model.
    • Identify several possible animations to make your scene dynamic (e.g., a bouncing ball, flying objects, spinning elements, people walking, etc.)
  2. Add Elements to the Scene
    • Inside the #scene-container, add HTML elements to represent props, actors, etc.
    • For example:
      • <img id="actor" src=" "> for images/clipart
      • <div id="ground"></div> for blocks/shapes
      • <p id="ball">🏈</p> for emojis/symbols
  3. Style the Elements
    • Define styles for the new elements to position and size them.
    • Example styling for a p tag that holds an emoji: 
       #ball {
  display: inline-block;
  font-size: 30px;
  position: absolute;
  top: 20%;
  left: 15%;
  z-index: 5;
 }
  4. Define CSS Animations
    • Use the @keyframes rule to define the frames (“timepoints”) of an animation sequence.
    • Incorporate movement using transform functions like rotate, scale, skew, and translate within your sequence.

      Reference: 📖 W3Schools - Transforms

    • Example: 
       @keyframes spin {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
 }
  5. Attach Animations to Elements
    • In the selector for an object you want to animate, configure the animation property.

      Reference: 📖 W3Schools - Animations

    • Example: 
       #ball {
  animation: spin 5s infinite linear;
 }

      Remember that this is shorthand for the 4 important sub-properties that control the settings of an animation: animation-name, animation-duration, animation-iteration-count, animation-timing-function

  6. Test, Edit, Repeat!
    • Ensure the animations are smooth and work well together, adjusting durations, iteration counts, and timing functions as needed.

      There are other helpful, but optional, sub-properties like animation-delay and animation-direction available. Look them up!

    • You may also need to adjust your @keyframes definitions to include more points (e.g. 0%, 25%, 50%, 75%,100%).

Minimum Requirement Checklist

  • HTML Content:
    • Include at least 6 HTML elements inside the #scene-container with distinct classes or ids, using the appropriate tags (e.g., <div>, <p>, <span>, <img>).
  • CSS Base Styles:
    • Style all elements to fit your theme (e.g., colors, sizes, positioning).
  • CSS Animations:
    • Define at least 2 distinct @keyframes animation sequences. One of these must have more than 2 points in the animation sequence (e.g. 0%, 50%, 100% rather than just from and to).
    • In a selector for the element to be animated, specify the relevant animation properties (e.g., animation-name, animation-duration, animation-iteration-count, animation-timing-function, along with any optional customizations like animation-delay or animation-direction).
  • CSS Transforms:
    • Apply at least 4 different transform functions (e.g., rotate, scale, translate).
  • CSS Positioning:
    • Use at least 2 different positioning techniques (e.g., absolute, relative, or fixed).
  • CSS Customization:
    • Adjust the background of the movie scene, or border styles for visual appeal.
    • Ensure that the final product of your movie scene looks cohesive.

Bonus Features

RESOURCES: While working on this project or attempting the bonus features, you are encouraged to look up any CSS properties on Google or 📖 W3Schools, review our 📓 Unit 1 Notes or 📓 Unit 2 Notes, and make use of the helpful 🎨 SheCodes CSS Tools.