Ajax Loader
HTML 
<html>
1
<html>
2
  <head>
3
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.js"></script>
4
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
5
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
6
    <script type="text/javascript" src="http://particleslider.com/js/particleslider/current/particleslider-0.9.1.core.min.js"></script> </head>
7
  <body>
8
    <div class="particles"></div>
9
    <textarea>start typing</textarea>
10
  </body>
11
</html>
12
 
 
CSS 
html, body, div.particles {
1
html, body, div.particles {
2
  background-color: #000;
3
  color: #fff;
4
  margin: 0;
5
  padding: 0;
6
  border: 0;
7
  width: 100%;
8
  height: 100%;
9
  overflow: hidden;
10
}
11
 
12
textarea {
13
  opacity: 0.0;
14
  position: absolute;
15
  z-index: 10;
16
  top: 10em;
17
}
 
JavaScript 
# Tamino Martinius - All rights reserved
1
# Tamino Martinius - All rights reserved
2
 
3
# Copyright © 2013 Tamino Martinius (http://zaku.eu)
4
# Copyright © 2013 Particleslider.com (http://particleslider.com
5
 
6
# Terms of usage: http://particleslider.com/legal/license
7
 
8
#Stats
9
$(window).load(() ->
10
  oStats = new Stats()
11
  oStats.setMode(0)
12
  oStats.domElement.style.position = 'absolute'
13
  oStats.domElement.style.left = '0px'
14
  oStats.domElement.style.top = '0px'
15
  document.body.appendChild(oStats.domElement);
16
 
17
  ps = plText = plCursor = plText = null
18
  fW2 = fH2 = 0.0
19
 
20
  nTxt = $('textarea')
21
 
22
  window.bAutoFocusText = true
23
 
24
  oParams =
25
    nRoot: $('.particles')[0]
26
    bIsRunning: true
27
    bRestless: false
28
    bIsMonochrome: true
29
    iPxSize: 2,
30
    iPxGap: 1,
31
    aColorDefault: [255, 255, 255, 255]
32
    evPreUpdate: () ->
33
      oStats.begin()
34
      return
35
    evPostRender: () ->
36
      oStats.end()
37
      return
38
    evPostResize: () ->
39
      plText.fnSetText(nTxt.val())
40
      plCursor.iOffsetX = (plText.iWidth / 2) + 10
41
      return
42
 
43
  ps = new ParticleSystem(oParams)
44
  plCursor = ps.plcRender.fnAdd()
45
  plText = ps.plcRender.fnAdd()
46
  plCursor.sAnimationIn = 'SlideInBottom'
47
  plCursor.sAnimationOut = 'SlideOutBottom'
48
  plCursor.oAnimationInParams.iAvgTtl = 10
49
  plCursor.oAnimationOutParams.iAvgTtl = 10
50
  plCursor.fnSetText('_')
51
  plText.sAnimationOut = 'Warp'
52
  plText.sAnimationIn = 'SlideInRight'
53
 
54
  setInterval(() ->
55
    plCursor.fnUnloadParticles()
56
    return
57
  , 3000
58
  )
59
  setTimeout(() ->
60
    setInterval(() ->
61
      plCursor.fnLoadParticles()
62
      plCursor.iOffsetX = plText.iWidth / 2 + 5
63
      return
64
    , 3000
65
    )
66
    return
67
  , 1000)
68
 
69
  setTimeout(() ->
70
    ps.fnResize()
71
    plText.fnSetText(nTxt.val().replace('\n', ''))
72
    plCursor.iOffsetX = plText.iWidth / 2 + 5
73
    return
74
  , 300)
75
 
76
  fnSetText = () ->
77
    s = nTxt.val()
78
    s = s.replace('\n', '')
79
    plText.fnSetText(s)
80
    plCursor.iOffsetX = plText.iWidth / 2 + 5
81
    if window.bAutoFocusText is true
82
      nTxt.focus().val('')
83
      nTxt.val(s)
84
 
85
  nTxt.blur(() ->
86
    if window.bAutoFocusText is true
87
      setTimeout(() ->
88
        fnSetText()
89
        return
90
      , 10)
91
  )
92
  $(window).keyup(() ->
93
    fnSetText()
94
    return
95
  )
96
 
97
  gui = new dat.GUI()
98
  gui.add(window, 'bAutoFocusText').name('auto focus text')
99
  gui.add(ps, 'iPxSize').min(1).max(10).step(1).name('size')
100
  gui.add(ps, 'iPxGap').min(0).max(9).step(1).name('gap').onChange(() ->
101
    fnSetText()
102
    return
103
  )
104
  gui.add(ps, 'iMaxFontSize').min(10).max(100).step(1).name('font size').onChange(() ->
105
    fnSetText()
106
    return
107
  )
108
  gui.add(ps, 'sFont',['sans-serif', 'monospace', 'serif']).name('font').onChange(() ->
109
    plText.fnSetText(nTxt.val())
110
    return
111
  )
112
  gui.add(ps, 'bRestless').name('restless')
113
  gui.addColor(ps, 'aColorDefault').name('color').onChange(() ->
114
    ps.aColorDefault[0] = ~~ps.aColorDefault[0]
115
    ps.aColorDefault[1] = ~~ps.aColorDefault[1]
116
    ps.aColorDefault[2] = ~~ps.aColorDefault[2]
117
    ps.aColorDefault[3] = ~~ps.aColorDefault[3]
118
    plText.fnSetText(nTxt.val())
119
    return
120
  )
121
  gui.add(ps, 'fnStopRunning').name('pause')
122
  gui.add(ps, 'fnStartRunning').name('play')
123
  if window.innerWidth < 1000
124
    gui.close()
125
  else
126
    $(window).keyup()
127
)
128
 
 

Particle Text

CSSDeck G+