阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.HexaFlip 中文API文档

      插件 jQuery.HexaFlip 中文API文档 https://github.com/dmotz/hexaflip jquery.typist

      Animated text typing.

      Live demo

      Install

      Download latest release. Use minified or development version.

      Or use bower for install:

      bower install jquery.typist --save
      

      Usage

      Include jQuery and jquery.typist on your page:

      <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
      <script src="jquery.typist.js"></script>
      

      Prepare element for typing:

      <p class="typist"></p>
      

      Call method typist() with necessary options and text:

      jQuery(function($) {
      	$('.typist').typist({
      		speed: 12,
      		text: 'Hello!'
      	});
      });
      
      

      Options

      • text {String} – text for typing;
      • speed {Number} – characters per second, default – 10;
      • cursor {Boolean} – shows blinking cursor, default – true;
      • blinkSpeed {Number} – blinking per second, default – 2;
      • typeFrom {String} – typing from start/end of element, default – 'end';
      • cursorStyles {Object} – CSS properties for cursor element.

      Methods

      • typist( [options] ) – init method;
      • typistAdd( [text], [callback] ) – additional text for typing;
      • typistRemove( [length], [callback] ) – removes length number of characters;
      • typistPause( [delay], [callback] ) – pauses for delay milliseconds;
      • typistStop() – stops all animations.

      Events

      • start_type.typist
      • end_type.typist
      • start_pause.typist
      • end_pause.typist
      • start_remove.typist
      • end_remove.typist
      • tick.typist

      Try the Demo

      $('.typist')
      	.on('start_type.typist', function() {
      		console.log('Start typing');
      	})
      	.on('end_type.typist', function() {
      		console.log('End typing');
      	})
      	.typist({ 
      		speed: 12,
      		text: 'Hello, typist!\n'
      	});
      
      目录
      目录