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