ちょっとお洒落なプリローダーを探してた
という方の参考になるかな・・と思ったの
と、自分でも使いたかったので備忘録です。
アニメーションエフェクトが素敵なプリ
ローダー・CUSTOM PRELOADER EFFECTの
ご紹介です。
エフェクトはjQueryとeasingで動かし、エレメントはcssで作成しています。コードも軽量で分かりやすいし、エレメントはcssベースなのでなかなか使い勝手がいいんじゃないかと思います。
CUSTOM PRELOADER EFFECT
動きがなかなか素敵なんでｓ・・と言われても動き見ないとですよね。以下、公式サイトのサンプルです。
ドットは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でエフェクトを作ってる、という感じ。コード見れば大体想像付くと思います。真似して自作するのも面白いですね。
以下よりダウンロードできます。
