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

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

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

相关推荐
Stanford_11062 分钟前
关于IDE的相关知识之一【使用技巧】
前端·ide·windows·微信小程序·微信公众平台·twitter·微信开放平台
爱健身的小刘同学8 分钟前
安装 electron 依赖报错
前端·javascript·electron
耶啵奶膘8 分钟前
uniapp+vue2+uview2.0导航栏组件二次封装
前端·javascript·uni-app
布兰妮甜9 分钟前
如何使用 Tailwind CSS 构建响应式网站:详细指南
前端·css·tailwind css
MavenTalk10 分钟前
前端技术选型之uniapp
android·前端·flutter·ios·uni-app·前端开发
ZZZCY200325 分钟前
路由策略与路由控制实验
前端·网络
shawya_void34 分钟前
javaweb-day01-html和css初识
前端·css·html
khatung35 分钟前
React——useReducer
前端·javascript·vscode·react.js·前端框架·1024程序员节
思考的橙子37 分钟前
CSS之3D转换
前端·css·3d
木子七1 小时前
vue3-setup中使用响应式
前端·vue