Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Creating an Infinite Horizontal Scroll Animation - CSS Tutorial

Kevin Powell via YouTube

Overview

Learn how to create an infinite horizontal scroll animation in this 32-minute tutorial. Explore techniques for building a logo scroll that respects user preferences for reduced motion and uses progressive enhancement with JavaScript. Dive into HTML structure, basic CSS styling, and JavaScript implementation for motion preferences. Master CSS animations, fix content duplication issues, and add customizable speed and direction options. Perfect for web developers looking to enhance their CSS animation skills and create accessible, visually appealing scroll effects.

Syllabus

- Introduction
- The HTML
- Basic CSS
- Checking for prefers-reduced-motion with JavaScript
- Setting the stage for the animation with CSS
- Adding the animation
- Fixing the doubled content in the HTML
- Adding speed and direction options

Taught by

Kevin Powell

Reviews

Start your review of Creating an Infinite Horizontal Scroll Animation - CSS Tutorial

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.