Lecture Notes on Creating Websites with Image Animation

Introduction

• Discussion begins with informal greetings and sharing.
• Topic focus: Creating websites with scrolling image animations.

Key Concepts

• Canvas Element:
  • The base for displaying images.
  • Initial image is printed at the top, and additional images appear as you scroll.
• Performance Considerations:
  • Concerns about website speed due to image loading.
  • Important to balance performance with creative expression (like cooking).

Final Outcome

• A preview of the expected outcome is shown.

Software Installation

• A custom software tool is introduced.
  • It can cut video frames and compress images.
• Installation Steps:
  • Install Homebrew on Mac (if not already installed):
    • Copy command into terminal to install Homebrew.
  • Install FFmpeg (essential for extracting frames).
• Important:
  • Installations are one-time processes for the laptop.

Extracting Frames from Video

• Folder Structure:
  • Ensure correct folder naming without spaces.
• Shell Script:
  • A script is provided for extracting video frames from provided files.
• Commands:
  • Use command line to move to the desktop and execute the script.
• Image Format:
  • Images will be extracted in JPG format (instead of PNG for size efficiency).

Compression of Images

• A separate process for compressing images after extraction.
• Compression Settings:
  • The deeper the compression, the lower the quality.
• Final Compression Size:
  • Example given of original size vs. compressed size.

Coding Process

• Setting Up Canvas:
  • Creation of a canvas for displaying images.
• Image Loading:
  • Preloading images is crucial for smooth scrolling experience.
• JavaScript Functions:
  • Functions are detailed for loading and animating images.
• Scroll Animation:
  • Animation triggers based on scroll positions.

Practical Demonstration

• Live coding session showing the development of the website.
• HTML Elements:
  • Use of canvas, image tags, and styles.
• Event Listeners:
  • How to track scroll events and adjust animations accordingly.

Conclusion

• Invitation to Further Learning:
  • Announcing a free TypeScript program for students interested in deeper learning.
• Sharing excitement about a new educational platform that is about to launch.

Additional Notes

• Importance of implementing creativity in web development.
• Engaging with the audience for feedback and interest in future sessions.