💻PROJECT #2.3: Animated Scene

Overview & Setup

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.

  1. Go to the CS1 Project 2.3 assignment on Blackbaud and follow the provided GitHub Classroom link.

    📁 Clicking the link generates a private repository for your project with the appropriate starter code. Note that projects are stored within the BWL-CS Organization, so you cannot access it from the “Your Repositories” page!

  2. Open the repository in a Codespace whenever you spend time working on the program, in class or at home.

    ⚠️ Always remember to commit changes after every coding session!

  3. When your project is complete, submit the link to your repository in the CS1 Project 2.3 assignment on Blackbaud.

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;
}
  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", Sans-Serif;
 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 space: <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;
}

Part B: Adding Animations and Transforms

  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:
      • <div id="ground"></div> for blocks/shapes
      • <span id="ball">🏈</span> for emojis/symbols
      • <img id="actor" src=" "> for images/clipart
  3. Style the Elements
    • Define styles for the new elements to position and size them.
    • Example styling for a span: 
      #ball {
 font-size: 30px;
 position: absolute;
 top: 20%;
 left: 15%;
 z-index: 5;
}
  4. Define CSS Animations
    • Use the @keyframes rule to define the sequence of an animation.
    • Incorporate transform functions like rotate, scale, and translate within your animation sequence.
    • Reference: 📖 W3Schools - Transforms
    • Example: 
      @keyframes spin {
 from {
  transform: rotate(0deg);
 }
 to {
  transform: rotate(360deg);
 }
}
  5. Attach Animations to Elements
    • In the selector for an object you want to animate, define the animation sub-properties.
    • Reference: 📖 W3Schools - Animations
    • Example: 
      #ball {
 animation-name: spin;
 animation-duration: 2s;
 animation-iteration-count: infinite;
}
  6. Test and Adjust
    • Ensure the animations are smooth and work well together, adjusting durations, delays, and timing functions as needed.
    • You may also need to adjust your @keyframes definitions to include more points (e.g. 0%, 50%, 100% rather than just from and to)

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, animation-delay).
  • 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.