[笔记] 网页切版直播班 2020 春季班 – 第七周

章节连结

进入到第七周,主要是强调视差动画效果该如何实现。透过关键影格(keyframe)以及 x,y,z 方向的移动,自然而然就可以完成基础的动画效果。
hex-school-logo

第七周课程重点

CSS3 Animation 视差滚动

Animate.css (动画效果)

市面上最常见的动画 css 框架,直接用 CDN 加载即可使用。
class 组成:animation-name (包含 name 和 keyframe) + animation 效果,所以至少要有两个 class。建议:<方向性、动画效果、延迟秒数> 各别一个 class,可以有较高的灵活性。

Transform

不会推挤到其他东西,而且也可以重叠。跟绝对定位相比,它可以开启 GPU 加速,性能会比较好。

AOS(视差滚动触击)

Animate On Scroll Library 来加载 AOS 套件,可以简单运用就达成多种动画效果,只需要加载对应的 js, css 和 data-aos 。(以下取自于官方文档)

客制化的 class,可以直接写在所要作用的对象上


经验谈

1. 何时使用 translate 或绝对定位?
如果你是要排版的话,多半使用绝对定位;若是要动画效果,多半建议用 translate
2. opacity 可以用于制作淡入、淡出等半透明效果
display:none (完全消失), visibility: hidden (消失但保留空间), opacity: 0 (消失但保留空间)


切版练习结果

目前改放置到 Github Pages 上,欢迎大家前往观看。
网址:https://github.com/andy922200/HexSchool2020Spring


相关文章


按赞加入粉丝团

延伸阅读