vue网页预加载页面_页面预加载效果

vue网页预加载页面

View demo 查看演示 Download Source 下载源

Today we want to show you how to create a very simple page preloading effect with CSS animations, SVG and JavaScript. For websites, where it’s crucial to load all or part of the assets, these kind of preloader screens can be a creative way to make waiting a bit less boring for the visitor. The idea for this tutorial is based on the beautiful preloading effect seen on the website of Fontface Ninja. Initially, the logo and a circular progress element slide up and when the loader finishes its progress animation, i.e. the page assets are loaded, the whole “header” moves up while the page elements are revealed with yet another animation. The sliding logo with its color change makes the icing on the cake.

今天，我们想向您展示如何使用CSS动画，SVG和JavaScript创建非常简单的页面预加载效果。 对于需要全部或部分加载资产至关重要的网站，此类预加载器屏幕可以成为一种新颖的方式，以使等待者的访问量减少一些。 本教程的想法是基于在Fontface Ninja网站上看到的漂亮的预加载效果。 最初，徽标和圆形进度元素会向上滑动，并且当加载程序完成其进度动画(即页面资源已加载)时，整个“标题”将向上移动，同时页面元素将通过另一个动画进行显示。 带有颜色变化的滑动徽标使蛋糕锦上添花。

In this tutorial we will re-create the effect seen on Fontface Ninja with some adjustments and a second demo with slightly different effects. For the logo and the circular progress element we will use inline SVGs, so that we can style their paths in our CSS. We’ll create a little script for the stroke animation of the SVG loading element and then we’ll control the page animations with classes that we add to the main container.

在本教程中，我们将通过一些调整来重新创建在Fontface Ninja上看到的效果，并在第二个演示中使用稍有不同的效果。 对于徽标和圆形进度元素，我们将使用嵌入式SVG，以便我们可以在CSS中设置其路径样式。 我们将为SVG加载元素的笔触动画创建一个小脚本，然后使用添加到主容器中的类来控制页面动画。

Please note that we’ll be using CSS animations and CSS 3D transforms, so this will only work as intended in browsers that support them.

请注意，我们将使用CSS动画和CSS 3D转换，因此这只能在支持它们的浏览器中按预期工作。

So, let’s get started!

所以，让我们开始吧！

标记 (The Markup)

Let’s wrap a header and the main content division into a container. We have to keep in mind that we want to control anything that happens to the initial view and the content with classes. So we will use the main container as our control element. We give it the class and ID ip-container.

让我们将头文件和主要内容包装到容器中。 我们必须记住，我们想控制初始视图和类内容中发生的任何事情。 因此，我们将使用主容器作为控制元素。 我们给它class和ID ip-container 。

The initial view consists of a header that contains the logo and the loading element. They are both SVGs and our logo is a bit more complex than the loader, so we’ll leave out the path coordinates in the snippet below because its really long. As you can see, we are defining some SVG attributes like the width and height, the viewBox and the preserveAspectRatio. The value for the preserveAspectRatio is xMidYMin meet which means that we force uniform scaling where the graphic fits completely into its container while its centered on the X axis and aligned at the top. In order to make the logo accessible, we add a title, description and the necessary ARIA attribute, aria-labelledby.

初始视图由包含徽标和加载元素的标题组成。 它们都是SVG，我们的徽标比加载程序要复杂一些，因此我们在下面的代码段中省略了路径坐标，因为它的确很长。 正如你所看到的，我们定义喜欢的宽度和高度，一些SVG属性viewBox和preserveAspectRatio 。 为值preserveAspectRatio是xMidYMin满足这意味着我们迫使均匀缩放其中图形拟合完全进入它的容器，而其在X轴为中心并且在顶部对齐。 为了使徽标易于访问，我们添加了标题，描述和必要的ARIA属性aria-labelledby 。

The main content has the class ip-main and later on we’ll apply animations to its children, the headline, the division and the inner boxes:

主要内容具有ip-main类，稍后我们将对其子级，标题，除法和内部框应用动画：