Making a Responsive and Interactive Animation with SVGs in CSS
Offered By: Pluralsight
Course Description
Overview
In this tutorial, we'll learn how to build fun animations for the browser that are responsive as well as interactive. Software required: Adobe Illustrator CS6, Chrome, Sass 3.3, jQuery 1.x, Modernizr 2.x.
In this tutorial, we'll learn how to build fun animations for the browser that are responsive as well as interactive. We'll go over how to turn a vector-based design into web-optimized SVGs and make writing keyframe animations easier and more interesting using Sass. By the end you'll have greater understanding of how CSS animations can work together to form an interesting whole. These skills and insights should, in turn, go a long way to make more dynamic web projects that can tell a story or catch the user's attention. Software required: Adobe Illustrator CS6, Chrome, Sass 3.3, jQuery 1.x, Modernizr 2.x.
In this tutorial, we'll learn how to build fun animations for the browser that are responsive as well as interactive. We'll go over how to turn a vector-based design into web-optimized SVGs and make writing keyframe animations easier and more interesting using Sass. By the end you'll have greater understanding of how CSS animations can work together to form an interesting whole. These skills and insights should, in turn, go a long way to make more dynamic web projects that can tell a story or catch the user's attention. Software required: Adobe Illustrator CS6, Chrome, Sass 3.3, jQuery 1.x, Modernizr 2.x.
Syllabus
- Introduction and Project Overview 1min
- Making a Responsive and Interactive Animation with SVGs in CSS 109mins
Taught by
Rembrand Le Compte
Related Courses
Probabilistic Graphical Models 1: RepresentationStanford University via Coursera Computer Security
Stanford University via Coursera Intro to Computer Science
University of Virginia via Udacity Introduction to Logic
Stanford University via Coursera Internet History, Technology, and Security
University of Michigan via Coursera