0

ページ表示の際にイントロエフェクトを入れてくれる「IntroTzikas」

ページ表示の際にイントロエフェクトを入れてくれる「IntroTzikas」

一昔前にオールフラッシュサイトにおいて、ページを開いた際に横から線が伸びてきて、読み込み完了の割合を表現するというビジュアルが良く見られましたが、そのようなイントロ画面をjQueryで再現することができる「IntroTzikas」をご紹介します。

 

 

DEMO

 

1.「introtzikas.js」をダウンロード

「IntroTzikas」より「introtzikas.js」をダウンロードします。

IntroTzikas

 

2.HTMLを記述

サンプル用に「START」というテキストを表示するHTMLを記述しています。

 

3.CSSを記述

サンプル用「START」という文字をセンターに配置するためのcssを記述しました。
適宜、書き換えてください。

 

4.「introtzikas.js」とjQuery本体を読み込む

 

5.JavaScriptを記述

いくつかオプション設定が可能になっています。

 

▼オプション設定

line 左から伸びてくる線の色を指定
speedwidth 線の左から右へのスピードを1000ミリ秒単位で指定
speedheight 線の上下の広がりのスピードを1000ミリ単位で指定
bg 背景色
lineheight 線の高さ幅をpx指定

 

以上になります。


 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > jQuery > ページ表示の際にイントロエフェクトを入れてくれる「IntroTzikas」