HTML & CSS ? 表單動畫 jQuery 插件：Form Animation Plugin

表單動畫 jQuery 插件：Form Animation Plugin

發表于: HTML & CSS. 評論
Sponsor

今天為大家分享的表單動畫 jQuery 插件：Form Animatiom，我想大家看圖就知道他作用是干什么了。主要作用就是當用戶提交錯誤表單時，而觸發動畫提醒功能，這樣會更加醒目，而動畫效果友好，不會太過唐突。

該插件需要引入 Animate.css 才能實現動畫，所以你完全可以從 Animate.css 的幾十種動畫效果里挑選你喜歡的。

表單動畫插件

插件名稱：Form Animation
下載地址：https://github.com/nnluukhtn/formAnimation
Animate.css 動畫演示：https://daneden.github.io/animate.css/

但可能用戶會問，這么一個動畫也要插件嗎？別擔心，這個插件只有1KB大小，如果覺得引入 Animate.css 文件太大，可以單獨復制他的動畫 CSS 樣式出來就可以啦。

下圖是我引入了 Swing 動畫效果，也很適用呢。

使用方法

引入animate.css、juqery 庫、formAnimation.js 插件到你的 HTML 文檔里。

<head>
    <link href='animate.css' media='all' rel='stylesheet'>
</head>
...
<body>
    <form>
        <input required> //表單內容
    </form>
    <script src="jquery.js"></script>
    <script src="jquery.validate.js"></script>
    <script src="formAnimation.js"></script>
    <script>
    // 添加動畫效果 shake
    $("form").formAnimation({ animatedClass: 'shake' });
    </script>
</body>

通過修改「animatedClass: ‘shake’」設置屬性來改變動畫效果。比如案例中的 shake 改為 swing，動畫就變成搖擺效果了，相當簡單易用。

推薦：查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流：為設計新人提供的設計交流群，請加入UI設計交流群，分享經驗、接單、求職、聊設計。
贊助商鏈接

與 、、 相關的文章

贊助商鏈接
設計達人微信交流社區：shejidaren888
喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。
«
»

{ 發表評論 }