vue网页预加载页面

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类，稍后我们将对其子级，标题，除法和内部框应用动画：

<div id="ip-container" class="ip-container"><!-- initial header -->
<header class="ip-header"><h1 class="ip-logo">
<svg class="ip-inner" width="100%" height="100%" viewBox="0 0 300 160" preserveAspectRatio="xMidYMin meet" aria-labelledby="logo_title">
<title id="logo_title">Delightful Demonstrations by Codrops</title>
<path d="...our super-long path..." />
</svg>
</h1><div class="ip-loader">
<svg class="ip-inner" width="60px" height="60px" viewBox="0 0 80 80">
<path class="ip-loader-circlebg" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z"/>
<path id="ip-loader-circle" class="ip-loader-circle" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z"/>
</svg>
</div></header><!-- main content -->
<div class="ip-main"><h2>Make yourself at home.</h2><div class="browser clearfix">
<div class="box">
<span class="icon-bell"></span>
<p>...</p>
</div>
<div class="box">
<span class="icon-heart"></span>
<p>...</p>
</div>
<div class="box">
<span class="icon-cog"></span>
<p>...</p>
</div>
</div>
</div>
</div><!-- /container -->

Let’s go on and style this.

让我们继续进行样式设置。

CSS (The CSS)

Note that the CSS will not contain any vendor prefixes, but you will find them in the files.

请注意，CSS将不包含任何供应商前缀，但是您可以在文件中找到它们。

Initially, we’ll include some fonts that we’ll need for the dummy text and the icons in the boxes. The icons used in the demos are from the Feather icon set and we’ve created the icon font with the Icomoon App. The dummy font is Blokk, a really great fonts when creating wireframes and mockups.

最初，我们将在虚拟文本和框中的图标中包含一些字体。 演示中使用的图标来自Feather图标集，我们已经使用Icomoon App创建了图标字体。 虚拟字体是Blokk ，这是创建线框和模型时非常好的字体。

@font-face {
font-weight: normal;
font-style: normal;
font-family: 'Blokk';
src: url('../fonts/blokk/BLOKKRegular.eot');
src: url('../fonts/blokk/BLOKKRegular.eot?#iefix') format('embedded-opentype'),
url('../fonts/blokk/BLOKKRegular.woff') format('woff'),
url('../fonts/blokk/BLOKKRegular.svg#BLOKKRegular') format('svg');
}@font-face {
font-weight: normal;
font-style: normal;
font-family: 'feather';
src:url('../fonts/feather/feather.eot?-9jv4cc');
src:url('../fonts/feather/feather.eot?#iefix-9jv4cc') format('embedded-opentype'),
url('../fonts/feather/feather.woff?-9jv4cc') format('woff'),
url('../fonts/feather/feather.ttf?-9jv4cc') format('truetype'),
url('../fonts/feather/feather.svg?-9jv4cc#feather') format('svg');
}

We want the header to fill all the viewport initially, so let’s give it a 100% in width and height and set its position to fixed:

我们希望标题最初填充所有视口，所以让我们将其宽度和高度设为100％，并将其位置设置为fixed ：

.ip-header {
position: fixed;
top: 0;
z-index: 100;
min-height: 480px;
width: 100%;
height: 100%;
background: #f1f1f1;
}

Let’s remove any margins from the logo headline:

让我们从徽标标题中删除所有边距：

.ip-header h1 {
margin: 0;
}

Both, the logo and the loader will be positioned absolutely and we’ll stretch them over the viewport:

徽标和加载程序都将被绝对定位，我们将在视口上拉伸它们：

.ip-logo,
.ip-loader {
position: absolute;
left: 0;
width: 100%;
opacity: 0;
cursor: default;
pointer-events: none;
}

Instead of simply taking the logo element and positioning it in the center of the header, we need to keep the following in mind: we want the logo SVG itself to be responsive, meaning that we might not have knowledge about its dimension, and we want to move it to the top of the main content using 3D transforms, once the loading is done. Mainly, because we don’t know the size of our logo, we don’t know how much we have to actually translate it in order to be at the top of the content (percentage translations take the element as reference and not the parent). But we do know and can work with one particular value: the viewport height. So let’s just set the logo to 100% height and translate it 25% so that the logo SVG stays in the middle of the page:

我们不仅要记住徽标元素并将其放置在标题的中心，还需要牢记以下几点：我们希望徽标SVG本身具有响应性，这意味着我们可能不了解其尺寸，我们希望加载完成后，使用3D变换将其移至主要内容的顶部。 主要是因为我们不知道徽标的大小，所以我们不知道要实际翻译多少徽标才能显示在内容的顶部(百分比翻译以元素为参考，而不是父元素) 。 但是我们确实知道并且可以使用一个特定值：视口高度。 因此，我们仅将徽标设置为100％高度，然后将其转换为25％，以便徽标SVG停留在页面中间：

.ip-logo {
top: 0;
height: 100%;
transform: translate3d(0,25%,0);
}

We position the logo element at the bottom of the viewport:

我们将徽标元素放置在视口的底部：

.ip-loader {
bottom: 20%;
}

The SVGs, which we gave the class ip-inner, will be displayed as block element and we center it horizontally with the auto margin:

我们为ip-inner类提供的SVG将显示为块元素，并使用自动边距将其水平居中：

.ip-header .ip-inner {
display: block;
margin: 0 auto;
}

The logo SVG should be responsive but not become too big or too small. So, beside a percentage value as the width, we also set a max and min width:

徽标SVG应该具有响应性，但不要太大或太小。 因此，除了百分比值作为宽度外，我们还设置了最大和最小宽度：

.ip-header .ip-logo svg {
min-width: 320px;
max-width: 480px;
width: 25%;
}

Since we’ve added the logo SVG inline, we can directly style the color of the path:

由于我们已添加徽标SVG内联，因此我们可以直接设置路径颜色的样式：

.ip-header .ip-logo svg path {
fill: #ef6e7e;
}

And the same holds for the loader:

对于加载程序也是如此：

.ip-header .ip-loader svg path {
fill: none;
stroke-width: 6;
}

The first path has a gray fill:

第一条路径用灰色填充：

.ip-header .ip-loader svg path.ip-loader-circlebg {
stroke: #ddd;
}

And the second path will have the progress transition that we will control in our JS. But here, we’ll define the transition of the stroke-dashoffset:

第二条路径将具有我们将在JS中控制的进度过渡。 但是在这里，我们将定义stroke-dashoffset的过渡：

.ip-header .ip-loader svg path.ip-loader-circle {
transition: stroke-dashoffset 0.2s;
stroke: #ef6e7e;
}

And now, we’l style the content of the page, which is all wrapped in the ip-main division:

现在，我们将页面的内容设置为样式，这些内容全部包装在ip-main分区中：

.ip-main {
overflow: hidden;
margin: 0 auto;
padding: 160px 0 10em 0;
max-width: 1100px;
width: 90%;
}

The headline will be sized with vw which will make it responsive:

标题将使用vw调整大小，以使其具有响应性：

.ip-main h2 {
margin: 0;
padding: 0.5em 0 1em;
color: #be4856;
text-align: center;
font-size: 4.25em;
font-size: 4vw;
line-height: 1;
}

Let’s add a browser image:

让我们添加一个浏览器图像：

.browser {
margin: 0 auto;
padding-top: 8%;
min-height: 400px;
max-width: 1000px;
width: 100%;
border-radius: 8px;
background: #fff url(../img/browser.png) no-repeat 50% 0;
background-size: 100%;
color: #d3d3d3;
}

And some dummy boxes:

还有一些虚拟盒子：

.box {
float: left;
padding: 3.5em;
width: 33.3%;
font-size: 0.7em;
line-height: 1.5;
}.box p {
font-family: 'Blokk', Arial, sans-serif;
}

The boxes will each have an icon:

每个框上都有一个图标：

[class^="icon-"]::before,
[class*=" icon-"]::before {
display: block;
margin-bottom: 0.5em;
padding: 0.5em;
border-radius: 5px;
background: #dfdfdf;
color: #fff;
text-align: center;
text-transform: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-size: 5em;
font-family: 'feather';
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}.icon-bell:before {
content: "e006";
}.icon-cog:before {
content: "e023";
}.icon-heart:before {
content: "e024";
}

Now we have to define the animations that should take place. As we mentioned earlier, we will control the firing of animations by adding classes to the main container. The initial animation of the header elements will make them move in from the bottom:

现在我们必须定义应该发生的动画。 如前所述，我们将通过向主容器中添加类来控制动画的触发。 标头元素的初始动画将使它们从底部移入：

.loading .ip-logo,
.loading .ip-loader {
opacity: 1;
animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both;
}.loading .ip-loader {
animation-delay: 0.2s;
}@keyframes animInitialHeader {
from {
opacity: 0;
transform: translate3d(0,800px,0);
}
}

We only need to define the from keyframe since we want to move the elements to their original position. The custom cubic-bezier timing function, will add a nice smoothness to the effect. The loading element needs to have a slight delay before it slides in.

我们只需要定义from关键帧，因为我们要将元素移动到其原始位置。 自定义三次贝塞尔曲线定时功能将为效果添加一个很好的平滑度。 加载元件需要稍稍延迟才能滑入。

At this point, let’s keep in mind, that we will animate the circular progress with JS. So we need another “state” which will be switched to, once that progress animation is done. We will give the class loaded to the container and apply the following animations:

此时，请记住，我们将为JS的循环进度设置动画。 因此，一旦完成进度动画，我们将需要切换到另一个“状态”。 我们将把类加载到容器中并应用以下动画：

.loaded .ip-logo,
.loaded .ip-loader {
opacity: 1;
}.loaded .ip-logo {
transform-origin: 50% 0;
animation: animLoadedLogo 1s cubic-bezier(0.7,0,0.3,1) forwards;
}@keyframes animLoadedLogo {
to {
transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1);
}
}.loaded .ip-logo svg path {
transition: all 0.5s ease 0.3s;
fill: #fff;
}.loaded .ip-loader {
animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
}@keyframes animLoadedLoader {
to {
opacity: 0;
transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1);
}
}

The logo moves down 100% (remember, our logo is 100% of the viewport height, so this will make it move the entire screen height) plus a bit more for some spacing, and then we also scale it down a bit. The color of the SVG path will change with a transition. The loader element moves up, scales down and fades out.

徽标向下移动100％(请记住，我们的徽标是视口高度的100％，因此它将使其移动整个屏幕高度)，再增加一些间距，然后再将其缩小一点。 SVG路径的颜色将随着过渡而改变。 加载程序元素向上移动，缩小并逐渐消失。

The fixed header itself needs to move up as well:

固定标头本身也需要向上移动：

.loaded .ip-header {
animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
}@keyframes animLoadedHeader {
to { transform: translate3d(0,-100%,0); }
}

Let’s take care of the content elements. Here, you can do a lot of creative effects. This of course, all depends on what content you have on the page. In our case, we want to fade the elements in while moving them up from below:

让我们来照顾内容元素。 在这里，您可以做很多创意效果。 当然，这完全取决于页面上的内容。 在我们的例子中，我们希望在将元素从下方向上移动时使其淡入：

/* Content animations */
.loaded .ip-main h2,
.loaded .ip-main .browser,
.loaded .ip-main .browser .box,
.loaded .codrops-demos {
animation: animLoadedContent 1s cubic-bezier(0.7,0,0.3,1) both;
}.loaded .ip-main .browser,
.loaded .ip-main .browser .box:first-child {
animation-delay: 0.1s;
}.loaded .ip-main .browser .box:nth-child(2) {
animation-delay: 0.15s;
}.loaded .ip-main .browser .box:nth-child(3) {
animation-delay: 0.2s;
}@keyframes animLoadedContent {
from {
opacity: 0;
transform: translate3d(0,200px,0);
}
}

The slight delay for the boxes in the browser division, will create a nifty extra effect.

浏览器分区中的框略有延迟，将产生漂亮的额外效果。

In order to avoid problems with scrolling and gaps at the bottom of the page, we need to switch the positioning of the header from fixed to absolute. This, we can control by adding a class to the body (or any parent) once all the animations are done. With the help of that class, we switch the positioning:

为了避免滚动和页面底部空白的问题，我们需要将页眉的位置从fixed切换到absolute 。 一旦完成所有动画，我们就可以通过向主体(或任何父代)添加一个类来进行控制。 在该课程的帮助下，我们切换了位置：

.layout-switch .ip-header {
position: absolute;
}

If we don’t have JavaScript, we show the state after all animations. This we can do by setting the header to relative positioning and sizing the logo accordingly:

如果没有JavaScript，则会在所有动画之后显示状态。 我们可以通过将标题设置为相对位置并相应调整徽标大小来做到这一点：

.no-js .ip-header {
position: relative;
min-height: 0px;
}.no-js .ip-header .ip-logo {
margin-top: 20px;
height: 180px;
opacity: 1;
transform: none;
}.no-js .ip-header .ip-logo svg path {
fill: #fff;
}

Last, but not least, we have to take care of the large headline and the boxes for smaller screens:

最后但并非最不重要的一点是，我们必须注意大标题和小屏幕的框：

@media screen and (max-width: 45em) {.ip-main h2 {
font-size: 2.25em;
font-size: 10vw;
}.box {
width: 100%%;
}}

And that’s all the style.

这就是所有样式。

JavaScript (The JavaScript)

The JavaScript consists of two parts. We will separate the general progress element’s loading functionality from the rest. Let’s call that script pathLoader.js since it is the path element that animates. We want to be able to set the stroke-dashoffset in order to animate the filling the path. Initially, this and the stroke-dasharray are set to the length of the path (getTotalLength()). We draw the path by setting the dash offset to a lower value up until zero where the path is totally drawn. This is done by calling the setProgress function with a parameter for the value. The optional callback parameter might be useful if we want to execute some code once the value is set and the transition is finished.

JavaScript由两部分组成。 我们将把一般进度元素的加载功能与其余的功能分开。 我们将其称为pathLoader.js脚本，因为它是动画的path元素。 我们希望能够设置stroke-dashoffset以便为填充路径设置动画。 最初，此和stroke-dasharray设置为路径的长度(getTotalLength())。 我们通过将破折号偏移量设置为一个较低的值直到零，以完全绘制路径来绘制路径。 这是通过调用带有参数值的setProgress函数来完成的。 如果我们想在设置值并完成转换后执行一些代码，则可选的回调参数可能会很有用。

function PathLoader( el ) {
this.el = el;
// clear stroke
this.el.style.strokeDasharray = this.el.style.strokeDashoffset = this.el.getTotalLength();
}PathLoader.prototype._draw = function( val ) {
this.el.style.strokeDashoffset = this.el.getTotalLength() * ( 1 - val );
}PathLoader.prototype.setProgress = function( val, callback ) {
this._draw(val);
if( callback && typeof callback === 'function' ) {
// give it a time (ideally the same like the transition time) so that the last progress increment animation is still visible.
setTimeout( callback, 200 );
}
}PathLoader.prototype.setProgressFn = function( fn ) {
if( typeof fn === 'function' ) { fn( this ); }
}

The setProgressFn method is used here to define a possible way to interact with the loader. For instance, for our demo we are not preloading anything but instead we simulate a loading animation by setting a random value between 0 and 1 throughout a set of time intervals:

在这里，使用setProgressFn方法定义与加载程序进行交互的可能方式。 例如，对于我们的演示，我们没有预加载任何东西，而是通过在整个时间间隔内将随机值设置在0和1之间来模拟加载动画：

var simulationFn = function(instance) {
var progress = 0,
interval = setInterval( function() {
progress = Math.min( progress + Math.random() * 0.1, 1 );
instance.setProgress( progress );
// reached the end
if( progress === 1 ) {
clearInterval( interval );
}
}, 100 );
};var loader = new PathLoader([pathselector]);
loader.setProgressFn(simulationFn);

Next, let’s create our resting script in main.js. First we initialize and cache some variables:

接下来，让我们在main.js中创建休息脚本。 首先，我们初始化并缓存一些变量：

var support = { animations : Modernizr.cssanimations },
container = document.getElementById( 'ip-container' ),
header = container.querySelector( 'header.ip-header' ),
loader = new PathLoader( document.getElementById( 'ip-loader-circle' ) ),
animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' },
// animation end event name
animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ];

We start the initial animation (both logo and loader slide up) by adding the loading class to the main container. After the animation ends we start the “fake” loading animation on the SVG loader element like explained before. Note that while these animations are taking place we don’t allow the page to be scrolled.

通过将加载类添加到主容器中，我们开始了初始动画(徽标和加载器都向上滑动)。 动画结束后，我们如前所述在SVG加载器元素上开始“伪”加载动画。 请注意，在执行这些动画时，我们不允许滚动页面。

function init() {
var onEndInitialAnimation = function() {
if( support.animations ) {
this.removeEventListener( animEndEventName, onEndInitialAnimation );
}startLoading();
};// disable scrolling
window.addEventListener( 'scroll', noscroll );// initial animation
classie.add( container, 'loading' );if( support.animations ) {
container.addEventListener( animEndEventName, onEndInitialAnimation );
}
else {
onEndInitialAnimation();
}
}// no scroll
function noscroll() {
window.scrollTo( 0, 0 );
}

Again, we will simulate that something is being loaded by passing a custom function to the setProgressFn. Once the animation is finished we replace the loading class with the loaded class which will initiate the main animations for the header and the content. After that’s done, we add the layout-switch class to the body and allow scrolling:

再次，我们将通过向setProgressFn传递自定义函数来模拟正在加载的东西。 一旦动画完成后，我们与加载的类，它会发起针对标题和内容为主的动画更换加载类。 完成之后，我们将layout-switch类添加到主体并允许滚动：

function startLoading() {
// simulate loading something..
var simulationFn = function(instance) {
var progress = 0,
interval = setInterval( function() {
progress = Math.min( progress + Math.random() * 0.1, 1 );instance.setProgress( progress );// reached the end
if( progress === 1 ) {
classie.remove( container, 'loading' );
classie.add( container, 'loaded' );
clearInterval( interval );var onEndHeaderAnimation = function(ev) {
if( support.animations ) {
if( ev.target !== header ) return;
this.removeEventListener( animEndEventName, onEndHeaderAnimation );
}classie.add( document.body, 'layout-switch' );
window.removeEventListener( 'scroll', noscroll );
};if( support.animations ) {
header.addEventListener( animEndEventName, onEndHeaderAnimation );
}
else {
onEndHeaderAnimation();
}
}
}, 80 );
};loader.setProgressFn( simulationFn );
}

And that’s it, all done!

就是这样，全部完成！

We hope you enjoyed this tutorial and find it useful and inspiring!

我们希望您喜欢本教程，并发现它对您有帮助并且鼓舞人心！

Resource credits: Browser by Keyners, logo made from GraphicBurger template: 5 Vintage Labels / Insignias Vol.1

资源来源： Keyners的Browser，由GraphicBurger模板制作的徽标： 5个Vintage Labels / Insignias Vol.1

翻译自: https://tympanus.net/codrops/2014/08/05/page-preloading-effect/

vue网页预加载页面