Giter Club home page Giter Club logo

typing-animate.js's Introduction

Typing-Animate.js

##打字动画插件(需JQuery支持)

###文件下载

在本仓库的/dist/js路径下。

###预览和简单介绍

点击这里

###一、快速使用方法

0.在最开始的开始,先将jJQuery.js和typing-animate.js文件引入

<script src="./dist/js/jquery.min.js"></script>
<script src="./dist/js/typing-animate-min.js"></script>

1.然后指定一个要实现动画效果的空标签内增加一个类名,这里我们设为typing-ani。

 <div class="typing-ani" id="title"></div>

2.使用内置的构造函数新建一个对象,第一个参数为类名,第二个参数为对动画的配置选项(不传则为默认动画效果)

 var typing = new Typing("typing-ani",{
 "typingSpeed":50,  //打字速度,数值为时间间隔(ms)
 "cursorSpeed":100, //光标闪烁速度,数值为时间间隔(ms)
 "head":"/* ",      //头部固定文字
 "foot":" */"       //尾部固定文字
 });

3.使用链式调用的方式实现想要的效果

typing.add("这是一句测试的效果")         //增加文字
.sleep(1000)                           //暂停时间(ms)
.delete(5)                             //删除五个字符,不传参即全部删除
.callback(                             //回调函数,上个任务执行后执行。
    function(){
        $(#typing-ani).css("background-color","red"); 
    }
)
.execute();                   //在最后加上execute即可立即执行动画效果。

二、配置选项介绍

您可以通过配置构造函数的第二个参数进行对动画效果的配置,参数如下:

typingSpeed       //打字速度,默认50ms
cursorSpeed       //光标闪烁速度,默认50ms
cursorChar        //光标文字,默认为█ 
loop              //动画是否一直循环,默认为false
cursorInfinity    //光标在动画完成后是否继续一直闪烁,默认为false
fade              //光标是否为渐隐渐现效果,默认为false
head              //头部固定文字,默认为无
foot              //尾部固定文字,默认为无

三、函数介绍

add()            //增加文字内容。
delete()         //删除文字,传入数字即可删除指定个数,不传参即全部删除。
sleep()          //动画暂停,传入数字为暂停时间(ms)。
setting()        //传入一个对象,可在动画的途中进行配置。
    可配置项:
     typingSpeed //打字速度,默认50ms
     cursorSpeed //光标闪烁速度,默认50ms
execute()        //末尾以此函数结束即可开始动画。

###License

Released under the MIT license.

typing-animate.js's People

Contributors

dieber avatar gitbook-bot avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.