jQueryで昔のファイナルファンタジー某のプロローグのようなテキストフェードインを実装するチュートリアル - SRC遊んだり書いたり。時々プログラミング
こんにちは！ 今日はファミコン時代のあのゲームのようなエフェクトを実装するチュートリアルをご紹介します。 デモ 実装する手順 jQueryの読み込み jQueryを使用するので、Google AJAX Libraries APIからjQueryを読み込みます。 HTMLの<head>内に次の行を追加してください。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> HTML デモのように各行毎にフェードインを実装するには、それぞれの行毎に<span>タグで囲い、<br>タグで改行します。 <p> <span>むかーし むかし あるところに</span><br> <span>おじいさんと おばあさんが いました</span>
jQueryでレトロゲームのプロローグ風エフェクト - jsdo.it - Share JavaScript, HTML5 and CSS
var DELAY_SPEED = 1750;//読み込みの遅延時間 var FADE_SPEED = 1750;//表示のアニメーション速度 $(document).ready(function(){//ドキュメントのオンロード時に実行 $('span').each(function(i){//セレクタで指定した要素すべてに $(this).delay( i * DELAY_SPEED ).animate({opacity:'1'}, FADE_SPEED);//フェードインを適用 }); }); <p> <span>むかーし むかし あるところに</span><br> <span>おじいさんと おばあさんが いました</span><br> <span>おじいさんは やまへ しばかりに</span><br> <span>おばあさんは かわへ せんたくに いきました</span><br>
SPIERAL WIND
sorry this page is japanese only このホームページは画面解像度1024×768pixel以上だと見やすいと思われます。 ブラウザは"MozillaFirefox_ver10.0.2"と"IE_ver8"で動作確認しています。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
