官网动画 ScrollTrigger js库使用 在下拉时悬停加载动画完成再继续下拉 基于GASP js 封装

作为数码爱好者+前端开发，每次苹果发布新品我总会第一时间打开苹果官网，除了了解新品信息之外，也很期待苹果又搞出了什么样的web特效，看多了也总结出了规律，就想着自己动手试试。

非常喜欢Apple的官网动画，然后最近又正好在帮朋友做一个工厂的官网。借此机会做一个类似Apple风格的网站。

钉钉官网的滚动动画(详解~~) 可以将滚动效果看做一个坐标轴，这时候横坐标就不是时间了，而是滚动的距离，后续会写一个函数，将滚动的距离（也就是当滚动到某一个位置的时候，滚动距离的值）传入函数，就返回给

为了向大家介绍 CSS 新特性【scroll-timeline】的强大效果，我特意破解了钉钉首页的动效，莫辜负！

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案！！

不知道小伙伴们有没有遇到这种布局问题：当Flex容器使用百分比高度时，如何确保内容正确展示且滚动条正常出现？

在 Flexbox 布局中，flex: 1 与 height: 0 的配合使用是一个常见的技巧，主要是为了处理不同浏览器对 flex 项内容高度计算的差异。

在页面布局中，我们经常会遇到/使用这么一类常见的布局，也就是列表内容水平居中于容器中，像是这样： 效果如下： 这里，外层的容器是定宽的，内层的 flex-item 也是定宽的。 当 flex-item