简单实现一个开屏动画页面

最近做了一个网站项目，打开网站，首先出现一个开屏动画页面，点击页面底部的向下滚动图标，开屏页面消失，然后首页出现。这种和loading加载页面相似，只是只会在打开网站首页出现，跳转网站其它页面不会出现该页面，下面就来具体实现一下。

页面布局

先简单介绍下这个开屏动画，首先logo从上向下移入，然后一张文字图片从下向上放大进入页面，最后黄色实心线条从虚线圆圈（页面中间有个由虚线构成的圆）一端渐渐形成一个圆。

构建html页面

主要分成三部分：

内容模块： logo、文字图片
圆圈模块：虚线圆圈、实心线条圆圈（svg绘制）
滚动模块：鼠标图标、向下滚动的icon和文字

html 复制代码

<div  id="welcome">
        <div class="weigh flex-gather">
            <div class="content">
                <a href="index.html" class="logo">
                    <img src="pictures/logo.png" alt="">
                </a>
                <img src="images/word.png" alt="" class="word ">
            </div>
            <div class="welcome-scroll">
                <img class="mouse" src="images/banner-icon.png" alt="">
                <i class="icon icon-down"></i>
                <span class="en-word f12">Scroll Down</span>
               
            </div>

            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1067 1067">
                <circle class="cls-1" cx="533.5" cy="533.5" r="533.5" />
                <circle class="cls-2" cx="533.5" cy="533.5" r="533.5" />
            </svg>
            <img src="images/home-toppic.jpg" alt="" class="bg">
          </div>
    </div>

css样式

最外层div使用固定定位定位在页面上（因为开屏页面写在首页页面中，首页由其它的元素模块构成，使用固定定位就形成一种该页面只有开屏页的视觉效果）

内容模块居中垂直显示，logo和文字一开始设置opacity:0隐藏, logo向上垂直平移20px, 文字向下垂直平移20px、同时缩小，并且都设置一个transition属性，实现从无到有、移动、放大的过渡效果

圆圈模块使用绝对定位，定位在内容模块的周围，相当于一个居中的圆形背景。虚线使用 stroke-dasharray属性实现，这里设置了stroke-dasharray: 2 6;表示：虚线长2，间距6，然后重复。

实心线条圆的动画也是通过改变stroke-dasharray的值实现，该关键帧动画一开始（0%）设置长度为0，间距为一个比较大的数值；100%就改变长度为该间距数值，间距为0。

通过给外层元素添加类名，控制动画执行，显示logo和文字图片，黄色实心线条实现从无到一个圆的动画。

css 复制代码

.ready {
    .logo,
    .word{
      opacity: 1;
      transform: none;
    }
    .cls-2 {
      animation: welcome 10s linear forwards;
    }
}

JavaScript交互

开屏页只在网页打开时出现，因此根据sessionStorage会话级别的本地存储特性（用于临时保存同一窗口或标签页的数据，在关闭窗口或标签页之后将会删除数据），使用sessionStorage在本地存储一个值welcome为 1，页面一开始需要先判断该值是否等于1，不相等就显示开屏页面，并且给外层容器加上一个类名ready()，开始执行动画。相等就隐藏开屏页面。

在点击向下滚动图标事件中在本地存储welcome为 1，同时隐藏开屏页面，首页出现。

sessionStorage用于本地存储一个会话中的数据，这些数据只有在同一个会话中的页面才能访问，并且当会话结束后数据也随之销毁。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。

js 复制代码

if (sessionStorage.welcome !== '1') {
    welcome.show();
    welcome.addClass('ready');
    $('.welcome-scroll').click(function () {
        welcome.fadeOut(400, function () {
           welcome.hide();
        });
        sessionStorage.welcome = '1';
    })
} else {
   welcome.hide();
}

综上就可以简单实现一个开屏页面了