課程資料
報名日期
全年招生
課程級別
學習模式
修業期
1 小時 59 分鐘
教學語言
英語
授課導師
Ben Frain
評分
1次瀏覽
課程簡介
Give your web animations super-powers by with the JavaScript Web Animations API
This course teaches you how to animate on the Web using the JavaScript Web Animations API W3C standard.
You'll learn how to transfer what you already know how to do in CSS, into JavaScript and then add extra capabilities like pausing and playing animations, starting one animation half way through another. Combining different animations together and synchronising a number of animations. All things you just can't do presently with CSS alone.
We will start by re-making some basic CSS animations with the JavaScript Web Animations API, then once we get through the fundamentals, we will start making our project together — a interactive set of sequenced animations.
By the end of the course you should have a solid understanding of how to animate on the Web with the JavaScript Web Animations API.
What we will build
We will be building, from scratch, a multi-scene piece of interaction with just HTML, CSS and JavaScript and no external libraries. Instead of CSS we will use the JavaScript Web Animations API to handle our animations and learn about all the extra capabilities it provides over CSS alone.
Along the way, we will also look at how to setup a very simple local server that will live reload changes to our code as we work.
The code is free to download on GitHub and split into folders for each video; each one providing the code as it's left at the end of each video.
What you need
All you need to get started with this class is a text editor like Sublime Text or VS Code, a modern web browser and a tolerance for mediocre jokes.
課程章節
- 1 個章節
- 23 堂課
- 第 1 章 Introduction
課程內容
- Animating with JavaScript using the Web Animations API
- How to convert CSS animations to JavaScript
- How to create animation based interaction with JavaScript
此課程所涵蓋的技能
評價
-
AAlonso Quesada
Very good course, just what I needed. Only suggestion I have is that there is jump by the time lesson 15 starts where all animations are already in the file, maybe a previos video with the creation of one or two of them could be helpful there
-
DDavid R
The project files were presented as a fait accompli, and their explanation was a bit rushed. I'd have found it more instructive to build these files from scratch. The course might have been a bit longer, but it's a pretty short course anyway.
-
AAdan Ramirez
I expected for the teacher to write the code from start to finish, he just went over the code he finished and commentated about it, this course isnt for beginners.
-
JJerome Olivier
It's a quick and succinct course, but I definitely agree with the other reviewer who mentioned the need for more screen time on code and less on the instructor's handsome face. I had to pause and rewind a lot to read the code. I like that the course doesn't make you sit and watch someone code for hours on end, but instead simply goes over the concepts and then expects you to actually think it through and do the work. It's amazing how much time is saved going about it that way. Anyways, now that I've watched it all and done the exercises, I'm going to do the project from scratch and refer to the finished project whenever I get stuck.
