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

发布： 2017-01-06

热度： 57

趋势： 57

权重： 3

分类： 前端开发

标签： Jquery  CSS  加载

🎯

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

关于预加载动画

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

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

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

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

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

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

引入 Jquery

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

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

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

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

实现思路

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

定义 preloading.css

由于 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;
}

引入 CSS 文件

放在 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>