Animsition 为页面切换增加 CSS3 动画效果的 jQuery 插件

发布于 2018-11-26 字数3596 浏览 708 评论 0

Animsition 是一个 jQuery 插件,可轻松的为页面切换增加 CSS 动画效果,提供 18 种不同的动画风格,使用方便,有多个选项可供选择,可以满足用户对动画的特殊要求。这种动画特效可以应用到任何网站,内部链接使用简单的CSS类,也可以使用不同的效果在同一页面上。

动画效果

Animsition 提供 18 种不同的动画风格,他们就是:

fade

fade-in、、fade-out、fade-in-up、fade-out-up、fade-in-down、fade-out-down、fade-in-left、fade-out-left、fade-in-right、fade-out-right

Rotate

rotate-in、rotate-out

Flip

flip-in-x、flip-out-x、flip-in-y、flip-out-y

Zoom

zoom-in、zoom-out

安装方法

Install : nodejs npm grunt jekyll ruby bower

$ git clone https://github.com/blivesta/animsition.git
$ cd animsition
$ git checkout -b patch-1
$ npm install && grunt build && grunt

Build

$ grunt build

Watch & Connect

$ grunt

CDN加速

您可以使用 CDNJS 网站的 CDN 加速地址:

https://cdnjs.cloudflare.com/ajax/libs/animsition/3.4.3/css/animsition.css
https://cdnjs.cloudflare.com/ajax/libs/animsition/3.4.3/css/animsition.css.map
https://cdnjs.cloudflare.com/ajax/libs/animsition/3.4.3/css/animsition.min.css
https://cdnjs.cloudflare.com/ajax/libs/animsition/3.4.3/js/jquery.animsition.js
https://cdnjs.cloudflare.com/ajax/libs/animsition/3.4.3/js/jquery.animsition.min.js

使用方法

加载所需的 jQuery JavaScript 库和 jQuery 插件在您的网页 Animsition。

<script src="jquery.min.js"></script>
<script src="animsition.min.js"></script>

在网页的头部所需的 CSS 文件加载。

<link rel="stylesheet" href="css/animsition.min.css">

使你的 HTML 元素的影响。

$(document).ready(function() {
    $(".animsition").animsition({
        inClass       :   'fade-in',
        outClass      :   'fade-out',
        inDuration    :    1500,
        outDuration   :    800,
        linkElement   :   '.animsition-link', 
        // e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
        touchSupport  :    true, 
        loading       :    true,
        loadingParentElement  :   'body', //animsition wrapper element
        loadingClass  :   'animsition-loading',
        unSupportCss  : [ 'animation-duration',
          '-webkit-animation-duration',
          '-o-animation-duration'
        ],
        overlay       :   false,
        overlayClass  :   'animsition-overlay-slide',
        overlayParentElement  :   'body'
    });
});

This awesome jQuery plugin is developed by blivesta. For more Advanced Usages, please check the demo page or visit the official website.

示例和官网

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!