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

最近做了一个网站项目,打开网站,首先出现一个开屏动画页面,点击页面底部的向下滚动图标,开屏页面消失, 然后首页出现。这种和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();
}

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

相关推荐
qq_3901617716 分钟前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test1 小时前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.1 小时前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家2 小时前
Vue 计算属性和监听器
前端·javascript·vue.js