I LIKE CSS

一直想用脚本做一款文字广告，有幸这几天逛”代码市场”里看到一款类似的效果，于是把它从网站上分离出来，脚本进行了优化。这款效果基于jQuery，类似的效果有很多，比如一些文字slider。我特别喜欢它的随着文字播放背景色彩也会进行切换，如果把它加工完善后可以完成一幅纯文本的广告效果。一起来看下是如何制作的吧，文章最后提供免费下载。

Step1. HTML代码

<section class="demo">

<div class="home-typer">
    <input value="i like css" type="text">
</div>

</section>

Step2. 脚本和jQuery

(function () {

  function Word (selector, sayings) {
    this.elem = selector.nodeType ? selector : document.querySelector(selector)
    this.sayings = (sayings || []).slice(0)
    this._listeners = {}
    return this
  }

  Word.prototype.run = function(sayings) {
    var el = this.elem
    this.sayings = sayings || this.sayings

    if (this.sayings.length) {
      var saying = this.sayings.shift().split('')
      this.text('')
      this.emit('linestart')
      this.type(saying)
    } else {
      this.stop()
    }

    return this
  }

  Word.prototype.type = function(saying) {
    var self = this
      , el = this.elem

    if ((typeof saying).toLowerCase() === 'string') {
      saying = saying.split('')
    }

    if (saying.length > 0) {
      this.text(this.text()   saying.shift())
      this.letterTimer = window.setTimeout(function () { self.type(saying) }, random_number(100, 150))
    } else {
      this.emit('linefinish')
      if (!this.sayings.length) this.emit('finish')
      this.sayingTimer = window.setTimeout(function(){ self.run() }, 1400)
    }

    this.emit('lineenter')

    return this
  }

  Word.prototype.text = function (text) {
    var el = this.elem
      , input = (el.nodeName.toLowerCase() === 'input')

    if (text === undefined) {
      return input ? el.value : el.innerHTML
    } else {
      if (input) el.value = text
      else el.innerHTML = text
      return this
    }
  }

  function random_number (min, max) {
    return Math.round(Math.random() * (max - min   1))   min
  }

  Word.prototype.on = function (e, fn) {
    (this._listeners[e] = this._listeners[e] || []).push(fn)
    return this
  }

  Word.prototype.emit = function (e) {
    var listeners = this._listeners[e]
      , args = [].slice.call(arguments, 1)

    if (listeners) {
      for (var i = 0, len = listeners.length; i < len; i  = 1) {
        listeners[i].apply(this, args)
      }
    }

    return this
  }

  function word (selector, sayings) {
    return new Word(selector, sayings)
  }

  window.Word = word

})();

$(function () {

  var typer = $('.home-typer input')
   //播放的文字
  var sayings = [
      "is",
      "a sharing web design",
	  "and development",
	  "resources and tutorials",
	  "personal blog",
	  "welcome to my blog -",
	  "ilikecss.com"
    ]
    , colors = ['#3dbfd9', '#88c800', '#febc06', '#cc6601', '#866cba']  //变换的背景颜色设置
    , length = 0
  //效果开始
  if (document.querySelector('.home-typer input')) {
    var typewriter = Word('.home-typer input', sayings)
      .on('linestart', function () {
        var demo = $('.demo');
        if (length === colors.length) length = 0;
        demo.css('background', colors[length]);
        length  ;
      }).on('lineenter', function(){
        if(typeof ss_legacy == 'function') ss_legacy(typer)
      })
      .on('finish', function(){
        var demo = $('.demo')
        demo.addClass('active')
        setTimeout(function () {
          typewriter.run(sayings.slice(0))
          demo.removeClass('active')
        }, 3200)
      })

    setTimeout(function(){
      typewriter.run()
    }, 1400)

    if(typeof ss_legacy == 'function') {
      typer.keyup(function() {
        ss_legacy(typer);
      })
    }
  }
  
  function updateSlider (slideAmount) {
    var slide_amount = this.value
    $('.home-typer input').css('font-size', slide_amount 'px')
  }
})