$(function(){ var par = $("span").offsetParent(); var ele = $("span"); ele.sort(function() { return Math.random() - Math.random(); }); ele.each(function(i){ var arr = randPos(par); $(this).delay(Math.round(Math.random() * 500) * i).css({ "left": arr[0]+"px", "top": arr[1]+"px" }).animate({ left: arr[2]+"px", top: arr[3]+"px", opacity: 1 },"slow").delay(Math.round(Math.random() * 200) * i).animate({opacity:0}) }) function randPos(par) { var arr = []; var xy = 30; arr[0] = Math.round(Math.random() * (par.width() - 100)); arr[1] = Math.round(Math.random() * (par.height() - 35)); var cx = par.width() / 2; var cy = par.height() / 2; var xps = cx - arr[0]; var yps = cy - arr[1]; if (Math.abs(xps) >= Math.abs(yps)) { if (Math.abs(xps) <= xy) xy = Math.abs(xps); if (arr[0] >= cx) arr[2] = "-=" + xy; else arr[2] = "+=" + xy; arr[3] = Math.floor((xy / xps) * yps); if (arr[1] >= cy) arr[3] = "-=" + Math.abs(arr[3]); else arr[3] = "+=" + Math.abs(arr[3]); } else { if (Math.abs(yps) <= xy) xy = Math.abs(yps); if (arr[1] >= cy) arr[3] = "-=" + xy; else arr[3] = "+=" + xy; arr[2] = Math.floor((xy / yps) * xps); if (arr[0] >= cx) arr[2] = "-=" + Math.abs(arr[2]); else arr[2] = "+=" + Math.abs(arr[2]); } return arr; } })
<div id="box"> <span>able</span> <span>acid</span> <span>angry</span> <span>automatic</span> <span>awake</span> <span>bad</span> <span>beautiful</span> <span>bent</span> <span>bitter</span> <span>black</span> <span>blue</span> <span>boiling</span> <span>bright</span> <span>broken</span> <span>brown</span> <span>certain</span> <span>cheap</span> <span>chemical</span> <span>chief</span> <span>clean</span> <span>clear</span> <span>cold</span> <span>common</span> <span>complete</span> <span>complex</span> <span>conscious</span> <span>cruel</span> <span>cut</span> <span>dark</span> <span>dead</span> <span>dear</span> <span>deep</span> <span>delicate</span> <span>dependent</span> <span>different</span> <span>dirty</span> <span>dry</span> <span>early</span> <span>elastic</span> <span>electric</span> <span>equal</span> <span>false</span> <span>fat</span> <span>feeble</span> <span>female</span> <span>fertile</span> <span>first</span> <span>fixed</span> <span>flat</span> <span>foolish</span> <span>free</span> <span>frequent</span> <span>full</span> <span>future</span> <span>general</span> <span>good</span> <span>grey</span> <span>great</span> <span>green</span> <span>hanging</span> <span>happy</span> <span>hard</span> <span>healthy</span> <span>high</span> <span>hollow</span> <span>ill</span> <span>important</span> <span>kind</span> <span>last</span> <span>late</span> <span>left</span> <span>like</span> <span>living</span> <span>long</span> <span>loose</span> <span>loud</span> <span>low</span> <span>male</span> <span>married</span> <span>material</span> <span>medical</span> <span>military</span> <span>mixed</span> <span>narrow</span> <span>natural</span> <span>necessary</span> <span>new</span> <span>normal</span> <span>old</span> <span>open</span> <span>opposite</span> <span>parallel</span> <span>past</span> <span>physical</span> <span>political</span> <span>poor</span> <span>possible</span> <span>present</span> <span>private</span> <span>probable</span> <span>public</span> <span>quick</span> <span>quiet</span> <span>ready</span> <span>red</span> <span>regular</span> <span>responsible</span> <span>right</span> <span>rough</span> <span>round</span> <span>sad</span> <span>safe</span> <span>same</span> <span>second</span> <span>secret</span> <span>separate</span> <span>serious</span> <span>sharp</span> <span>short</span> <span>shut</span> <span>simple</span> <span>slow</span> <span>small</span> <span>smooth</span> <span>soft</span> <span>solid</span> <span>special</span> <span>sticky</span> <span>stiff</span> <span>straight</span> <span>strange</span> <span>strong</span> <span>sudden</span> <span>sweet</span> <span>tall</span> <span>thick</span> <span>thin</span> <span>tight</span> <span>tired</span> <span>true</span> <span>violent</span> <span>waiting</span> <span>warm</span> <span>wet</span> <span>white</span> <span>wide</span> <span>wise</span> <span>wrong</span> <span>yellow</span> <span>young</span> </div>
body { width: 100%; height: 600px; } #box { width: 100%; height: 100%; background-color: #ccc; overflow: hidden; } span{ display: block; font-size: 40px; font-weight: bold; position: absolute; opacity: 0; }