YoVDO

Creating an Infinite Horizontal Scroll Animation - CSS Tutorial

Offered By: Kevin Powell via YouTube

Tags

CSS Animation Courses Web Development Courses Javascript Courses Logo Design Courses HTML Courses Web Accessibility Courses

Course Description

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!
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

Related Courses

Wie designe ich meine eigene Homepage?
openHPI
Graphic Elements of Design: Color Theory and Image Formats
University of Colorado Boulder via Coursera
Векторная графика. Adobe Illustrator CC
St. Petersburg State Polytechnic University via Coursera
Create Swag Bag Inserts to Market your Business using Canva
Coursera Project Network via Coursera
Learning Creative Web Design The Easy Way.
Udemy