真是好东西!一组动感的页面加载动画效果
如果您曾经访问过 Nicolas Zezuka 和 Active Theory 的出色的设计网站,你可能已经注意到在显示新内容之前动感的页面加载动画了。这种风格的动画效果最近非常流行,因此这篇文章想给你带来一些启示。
这个效果的核心是让一个形状在页面窗口中动画显示并有展示活动的指示。当新内容被加载时,形状将以动画显示返回显示的页面。我们将使用 Snap.svg 动画库来实现,因为这个库让我们能够创建复杂的形状和有趣的变形转换效果。
需要注意的是,这里的示例只是提供一种思路,动态内容加载是模拟的。另外没有做降级处理,动画和伪元素可能在某些浏览器无法正常工作。
温馨提示:为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。
我们显示遮罩的方式是,定义一个 SVG 路径动画:
<div id="loader" class="pageload-overlay" data-opening="M 0,0 80,-10 80,60 0,70 0,0" data-closing="M 0,-10 80,-20 80,-10 0,0 0,-10"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none"> <path d="M 0,70 80,60 80,80 0,80 0,70"/> </svg> </div><!-- /pageload-overlay -->
我们定义的初始路径在页面中是看不到的,开始和结果路径分别定义在 data-opening 和 data-closing 属性中。正如你所看到的,我们使用的是小型的 viewBox,但我们舒展绘图窗口的宽度和高度为100%,而不是保持长宽比。如果我们没有定义一个闭合的路径,我们将动画回到初始路径。
请注意,我们也可以添加多个路径(用分号隔开),它允许 SVG 绘制你将在第一演示中看到的步骤明智的动画。 我们设置叠加划分到一个固定的位置,覆盖了整个页面,并通过给 ::before 和 ::after 伪元素添加样式来实现加载提示效果。
.pageload-overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; visibility: hidden; } .pageload-overlay.show { visibility: visible; } .pageload-overlay svg { position: absolute; top: 0; left: 0; } .pageload-overlay svg path { fill: #fff; }
我们在这里使用 visibility,因为使用这些固定的风格定位与指针以及 SVG 的事件可能在移动端有些问题,所以我们通过定位和操纵父 DIV 来代替。 你可能已经注意到,圆形动画也从一个路径到另一个路径变换来实现(当然有其他的实现方式,例如缩放) ,但我们使用以下值来确定圆是响应式( Rseponsive)的:
width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="xMidYMid slice"
使用 slice 将保持纵横比,但这样整个页面显示区域都可以被 viewBox 覆盖。我们的示例创建13种效果,但正如你所看到的,可能性是无止境的。我们真的很希望你能获得启发。
本文链接:真是好东西!13个页面加载动画效果 via Codrops
相关文章
- 从零开始学习jQuery (七) jQuery动画-让页面动起来!
- CSS动画实例:行星和卫星
- Flutter Curves 动画曲线合辑
- 44 Vue动画 <transtion> 标签里有两个DOM,然后一个出现时,另一个消失
- Vue - router-view 页面切换过渡动画(CSS)
- CSS - 呼吸灯效果动画(淡隐淡出效果)
- Web 页面如何实现动画效果
- 滚动页面产生动画WOW.js的用法
- 【Three.js基础】坐标轴辅助器、requestAnimationFrame处理动画、Clock时钟、resize页面尺寸(二)
- 使用贝赛尔曲线画扇形、圆形、弧线、多边形,实现App下载时的动画效果demo
- Android Animation学习(四) ApiDemos解析:多属性动画
- iOS 实现启动屏动画(Swift实现,包含图片适配)
- SwiftUI WWDC21 新绘图和动画组件之 02 语义形状新增四个样式
- SwiftUI 动画之绘制仿心跳曲线动画 (教程含源码)
- 有趣的HTML实例(五) 加载页面动画Ⅱ(css)
- 浏览器工作原理:浅析浏览器中的页面 - 分层与合成机制 - CSS动画为什么比javascript高效
- 小学生python游戏编程arcade----基本知识4角色动画
- 【Unity3D】动画回调函数、动画事件、动画曲线
- 关于Cocos Creator用js脚本代码播放骨骼动画的步骤和注意事项
- translate动画实例
- JavaScript 帧动画