Interactive Web Animation 2021 [JavaScript, SVG, CSS & HTML]
What you'll learn
- 1. History of Web Animations
- 2. CSS Animations [CSS animation properties, keyframe rule, transitions]
- 3. SVG Animations [SVG elements, attributes and properties that can be animated] ...... JS!!! --> INSIDE
- 4. Interactive JavaScript Animations [JavaScript animation methods, Functions of constructors]
- 5. Web Animations API
- 6. This course shows 20 animation projects that illustrate the theory of interactive web animation. All of them are available for download, study and upgrade.
Course content
- Preview12:22
Requirements
- For the first acquaintance with web animation, additional knowledge is not required. For deep assimilation of the materials, primary knowledge of HTML, CSS, SVG, JavaScript is desirable.
- Text editor, Web browser, and Internet connection
Description
Interactive Web Animations [JavaScript, SVG, CSS & HTML]
Full specification of web animations at the level of markup languages CSS & SVG and programming language JavaScript.
Teaching methodology of this course:
-> Study topic ->
-> setting a specific task ->
-> implementation ->
-> theoretical overview of the method ->
-> Conclusions
Features of the teaching methodology on this course:
Step by step into immersive web animation:
- Overview of the emergence of story animation techniques
- Theory: A complete overview of CSS, SVG, Javascript specifications at the level of web animation technologies.
- Practical part: animation projects from simple CSS through SVG to CSS + SVG + JavaScript complex projects.
The purpose of this online course:
- awakening interest in the subject of the listener;
- Exploring the original web animation tools;
- immersion in the implementation of specific web animation projects and their independent modernization
- preparation for writing web animation libraries;
CURRICULUM:
1. History of Web Animations
2. CSS Animations
- CSS Animation properties
- CSS Keyframe rule
- CSS Transitions
3. SVG Animations
- SVG Animation elements
- Attribute to identify the target element for an animation
- Attributes to control the timing of the animation
- Attributes that define animation values over time
- Attributes that control whether animations are additive
- SVG elements, attributes and properties that can be animated, and we will also learn Interface Time Event
- Interactivity features in SVG
4. JavaScript Animations
- getElementById() method
- Call planning method setinterval()
- addEventListener() method
- getAttribute & setAttribute methods
- How to penetrate the complex SVG attributes of elements using regular expressions
- 3d positioning
- The functions of constructors
- Creation of SVG primitives
- Сreating arrays of objects, managing their properties
- Capabilities of Web Animation using masks & clip path
- Web Animations API
- Combination of animation techniques
All practical examples of animations in this course are available for download and experiment.
Who this course is for:
- This course for those who want to master Interactive Web Animation.
- This course is needed for those who want to revitalize their website and use an unforgettable UX / UI design!
Instructor
![Alexandr Tyurin](data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"%3E%3C/svg%3E){kind=avatar}
- 4.3 Instructor Rating
- 151 Reviews
- 15,327 Students
- 2 Courses
Hi )
I am Alex, Software engineer.
My specialty: "Software for automated systems in science, production and management."
In my scientific activity, I had the opportunity to explore software from various angles, such as:
- creating a system of metrics with which you can evaluate the quality of writing program texts;
- study of programming style;
- assessment of structural complexity;
- creation of graph models of programs;
At the beginning of my working career I researched geo-information systems. The areas of study were on the surface of the earth in urban agglomerations and the shelf of the seabed.
I had a lot of work with hardware, and this greatly expanded the overall picture of what is happening in the digital world.
Now I am doing graphics and especially web animation!
My goal is to create online courses to transfer the knowledge accumulated by humanity!