• かちびと.net

    jQueryで動かすアニメーションエフェクトが素敵なプリローダー・CUSTOM PRELOADER EFFECTのご紹介です。結構素敵だったのでご紹介。どこかで使いたいな。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

スポンサーリンク

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

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

CUSTOM PRELOADER EFFECT


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

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

URL :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services