Jquery+CSS3实现网页入场动画特效

多数网站首页的数据往往是最庞大的,三到五秒打开都算比较优秀,因此设置一个开场(预加载)动画特效能够大幅度提升用户感官体验,这里分享本站使用的加载动画,整体比较简约清新

所属分类 WEB

相关标签 CSS加载动画

关于预加载动画

网站首页增加一个预加载动画,让用户首次访问网站的时候不会因为等待资源准备时间过长而感到枯燥。

CSS3的动画效果利用的是keyframes帧动画能力,可以理解为纯代码实现了界面的动画效果。

以前很多人会使用一个动态的图片作为预加载动画,效果很酷。

不过gif的图片相对而言会比较大一点,如果想展现更加优秀的动画效果,就需要精细的图片+更多的帧。

制作一个动态的gif本身并不困难,不太好的地方在于不能够随意更换以及自定义色彩。

因此,使用Jquery+CSS3+HTML一个新的方案来替代图片是一个比较好的解决方案。

引入Jquery

99%的网站一般都会引入Jquery库,通过Chrome内核的浏览器,右击查看网站源代码。

Ctrl+F调出搜索框,输入Jquery,检查您的网站是否引入了Jquery库。

如果没有,您需要考虑使用原生JS代码实现class的移除等。

这里为了让案例简洁,直接使用Jquery库来实现。(利用原生JS也可以实现)

实现思路

  1. 打开页面在默认显示加载的动画元素(因此动画元素应当浮在所有内容的上方并盖住其他内容)
  2. JS判断页面DOM是否Load完成($(window).load 和 $(document).ready 都可以使用,虽然有差别,整体感知不明显)
  3. Load完成后对动画元素隐藏即可

由于CSS中的特效定义比较多,解释起来比较麻烦。

感兴趣可以学习一些CSS3的线性动画特性。

.loader{
    position:fixed;
    left:50%;
    top:50%;
    margin:-0.2em 0 0 -0.2em;
    text-indent:-9999em;
    border-top:.3em solid rgba(0,0,0,0.1);
    border-right:.3em solid rgba(0,0,0,0.1);
    border-bottom:.3em solid rgba(0,0,0,0.1);
    border-left:.3em solid #9cc;
    /* 篇幅原因省略了一些兼容性CSS配置 */
    transform:translateZ(0);
    /* 关键CSS:关联对应的动画配置loader ,篇幅原因省略了一些兼容性CSS配置 */
    animation:loader .5s infinite linear;
    z-index:999;
}
.loader,.loader:after{
    border-radius:50%;width:2em;height:2em
}
.curtain{
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:white;
    filter:alpha(opacity=0);
    opacity:0;
    z-index:0
}
.sending .curtain{
    top:0px;
}
/* 动画配置loader,篇幅原因省略了一些兼容性CSS配置 */
@keyframes loader{
    0%{
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100%{
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}
.is-loading .loader,.is-loading .curtain
{
    filter:progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity:1
}
.is-loading .curtain{
    z-index:999
}
/* 自定义滚动条样式,可有可无 */
::-webkit-scrollbar
{
    width:12px;
    height:12px;
}
::-webkit-scrollbar-thumb
{
    border-radius:2px;
    background-color:#99cccc;
    background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);
}
::-webkit-scrollbar-track
{
    -webkit-box-shadow:inset 0 0 6px #ddd;
    background-color:#fbfbfb;
    border-radius:2px;
}

放在head便签区域内的最下方(尽量优先加载)。

<head>
    <link rel="stylesheet" type="text/css" href="css/preloading.css">
</head>

放在body区域最上方,主要便于浮动时可以盖住其他元素。

<body>
    <div class="is-loading" id="load"> 
        <div class="curtain">
            <div class="loader">
            </div>
        </div>
    </div>

<script type="text/javascript">
//确保Jquey已加载后执行进入 
(function($){
    //$(window).load 和 $(document).ready 都可以使用,虽然有差别,整体感知不明显
    $(window).on("load", function() { 
        window.setTimeout(function() {
            //隐藏或者移除Class均可以使用
            //推荐用CSS特性实现 
            //$("#load").removeClass("is-loading");
            $("#load").hide(500);
        }, 100);
    });
})(jQuery);
</script>
</body>

米虫

做一个有理想的米虫,伪全栈程序猿,乐观主义者,坚信一切都是最好的安排!

本站由个人原创、收集或整理,如涉及侵权请联系删除

本站内容支持转发,希望贵方携带转载信息和原文链接

本站具有时效性,不提供有效、可用和准确等相关保证

本站不提供免费技术支持,暂不推荐您使用案例商业化

发表观点

提示

昵称

邮箱

QQ

网址

当前还没有观点发布,欢迎您留下足迹!

同类其他

WEB

nvm管理node.js和npm多版本切换

在业务中我们会出现不同的项目依赖与不同版本的 node.js,总不能每次跑项目的时候都去重新安装对应版本的 node.js 和依赖,使用 nvm 可以让多个版本的 node.js 共存,并提供管理和切换

Jquery中bind()、live()、delegate()和on()的区别

自Jquery1.7起,on()方法是 bind()、live()、delegate() 方法的新的替代品,我们推荐使用on()来处理业务中的事件绑定,通过理解这些方法的差异能够更加清晰明白使用on()方法的优势所在

Jquery.bind()实现前端字段公共校验器

严谨的页面开发需要着重关注前台校验相关的内容,确保请求参数的合法以保证服务器安全,界面参数众多需要建立一个公共方法,公共校验器的核心方法是Jquery.bind()

Jquery+CSS轻松实现导航动态显示隐藏

绝大多数网站都会有个顶部导航,对于手机端而言为了便于访问导航常常会做固顶操作,通过CSS样式配合Jquery的scroll()方法或原生JS监听滑动事件方法,可以轻松实现下滑隐藏,上滑显示的效果

前端JS对字段编码预防XSS攻击

跨站脚本攻击是比较严重的一种攻击行为,恶意脚本注入到相关页面字段中轻易获取敏感信息和向后端发起请求,前端应用应当对请求数据进行编码

SVGInject插件动态加载SVG并自定义样式

HTML 中加载 SVG 有很多种方式,但如果需要在 HTML 中通过 CSS 样式自由控制 SVG 样式就必须将 svg 标签插入网页找那个成为 DOM 的一部分,本文借助 SVGInject 插件可以快速完成这一操作

选择个人头像

昵称

邮箱

QQ

网址

评论提示

  • 头像:系统为您提供了12个头像自由选择,初次打开随机为你选择一个
  • 邮箱:可选提交邮箱,该信息不会外泄,或将上线管理员回复邮件通知
  • 网址:可选提交网址,评论区该地址将以外链的形式展示在您的昵称上
  • 记忆:浏览器将记忆您已选择或填写过得信息,下次评论无需重复输入
  • 审核:提供一个和谐友善的评论环境,本站所有评论需要经过人工审核