现代网页动画设计开发课程 (英文)

现代网页动画

发布日期：2024年5月 作者：Ali Alaa 格式：MP4 | 视频：h264, 1280×720 | 音频：AAC, 44.1 KHz, 2声道 类型：电子学习 | 语言：英语 | 时长：101讲 (14小时32分钟) | 大小：7.46 GB

课程简介：

深入探讨动画和过渡效果，Web Animations API，滚动驱动动画以及视图过渡API。

你将学到：

• 学习CSS动画和过渡效果。
• 学习新的JavaScript Web Animations API。
• 详细了解滚动驱动动画。
• 使用视图过渡API创建令人印象深刻的页面过渡效果。

要求：

需要一些基本的HTML、CSS和JavaScript知识。

课程描述：

欢迎加入《现代网页动画》课程，深入探讨现代动画技术，不使用库，仅使用浏览器API。CSS动画和过渡效果已经存在很长时间了。但最近，现代浏览器引入了新的API，以进一步改进网页动画并为开发者提供更多控制。这些新增加的API中包括Web Animations API (WAAPI)。Web Animations API为开发者解锁了浏览器动画引擎的力量。它允许我们使用JavaScript构建动画并控制其播放，这是在网页上实现动画最具性能的方法之一。

此外，新的CSS动画功能允许我们控制用户滚动时的动画。通过添加如animation-timeline、scroll-timeline和view-timeline等新属性，我们现在可以创建基于滚动进度或视口中某个元素可见性的动画。这使得我们无需加载任何外部库就能创建令人印象深刻的滚动驱动动画。

另一个现代浏览器的新功能是视图过渡API。这个API允许我们轻松地在不同的DOM状态之间创建动画过渡效果。在单页应用程序（SPA）中，当我们在不同路由之间导航时，它尤其有用。在视图过渡API之前，这类动画极其复杂。

在本课程中，我们将详细覆盖所有这些主题。不仅如此，我们还将有一个关于旧CSS动画和过渡效果的部分，并深入讨论每个方面。每个讨论的主题我们还将有实际的例子和练习。

所以，如果你想让你的网站生动起来，立即加入我们吧！

Modern Web Animations

Published 5/2024
Created by Ali Alaa
MP4 | Video: h264, 1280×720 | Audio: AAC, 44.1 KHz, 2 Ch
Genre: eLearning | Language: English | Duration: 101 Lectures ( 14h 32m ) | Size: 7.46 GB

Deep Dive into Animations and Transitions, The Web Animations API, Scroll Driven Animations and The View Transitions API

What you’ll learn:
Learn about CSS Animations & Transitions.
Learn about the new JavaScript Web Animations API.
Discover scroll driven animations in details.
Create impressive page transitions with the View Transitions API.

Requirements:
Some basic HTML, CSS & JavaScript Knowledge is required.

Description:
Welcome to Modern Web Animations, a deep dive into modern animation techniques with no libraries, only browser APIs.CSS Animations & Transitions have been around for a long time now. But recently new APIs were introduced to modern browsers to further improve animating on the web and give developers more control. Among these new additions is the Web Animations API (WAAPI). The Web Animations API unlocks the power of the browser’s animation engine for developers. It allows us to construct animations and control their playback with JavaScript. It is one of the most performant ways to animate on the Web.In addition to that, new features were added to CSS Animations that allow us to control animations as users scroll. By adding new properties like animation-timeline, scroll-timeline and view-timeline, we can now have animations that are not based on time but based on scrolling progress or based on the visibility of a certain element in the viewport. This opens the door to creating impressive scroll driven animations without having to load any external libraries.Another recent addition to modern browsers is the introduction of the View Transitions API. This API allows us to easily create animated transitions between different DOM states. It can be especially useful in Single Page Applications (SPAs) when we need to have an animation when navigating between different routes. Before the View Transitions API these kinds of animations were extremely complicated to achieve.In this course we are going to cover all of these topics in great detail. And not only that, but we are also going to have a section on old CSS Animations & Transitions and discuss every aspect of them in depth. We are also going to have practical examples and exercises for every topic discussed.So join now if you want to bring your websites to life!

扫码免费下载