jQueryで動かすアニメーションエフェクトが素敵なプリローダー・CUSTOM PRELOADER EFFECT

ちょっとお洒落なプリローダーを探してた
という方の参考になるかな・・と思ったの
と、自分でも使いたかったので備忘録です。
アニメーションエフェクトが素敵なプリ
ローダー・CUSTOM PRELOADER EFFECTの
ご紹介です。

エフェクトはjQueryとeasingで動かし、エレメントはcssで作成しています。コードも軽量で分かりやすいし、エレメントはcssベースなのでなかなか使い勝手がいいんじゃないかと思います。

CUSTOM PRELOADER EFFECT

動きがなかなか素敵なんでｓ・・と言われても動き見ないとですよね。以下、公式サイトのサンプルです。

Sample

ドットはcss3でサークル上を形成、位置はランダムとなっています。

コード

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src="jquery.easing.js" type="text/javascript"></script>
<script src="init.js" type="text/javascript"></script>

上記でOK。あとはマークアップするだけです。

<div class="preloader">
	<div class="circle"></div>
	<div class="percent">0%</div>
</div>

アニメーションエフェクトを変えたい

41行目くらいにeasingのエフェクトを指定する箇所がありますのでスピードやらエフェクトやらを変えてください。

t.css(css).stop(true, true).animate(animation, 900, 'easeInBack', function(){

エフェクトの名はここ見ながらで。

span要素を生成して、cssで形状を作ってランダムで表示させて、easingでエフェクトを作ってる、という感じ。コード見れば大体想像付くと思います。真似して自作するのも面白いですね。

以下よりダウンロードできます。

CUSTOM PRELOADER EFFECT