Webデザイナーブログから学ぶホームページ制作

ホームページを開いたときに画面にラインが表示されるエフェクトは、jQueryライブラリを使うことによってイントロ画面を再現できます。

ホームページを開いた時にラインエフェクトが起きるjQueryプラグイン「IntroTzikas Plugin」の設定方法を解説します。

下記からJavaScriptライブラリのダウンロードを行ってください。
jqueryライブラリダウンロード
introtzikas.jsダウンロード

「JavaScript」ファイルへのディレクトリをメタタグに記述します。
また、ラインの色、速度、背景色を設定するIntroTzikas用のscriptを記述します。

<meta charset="UTF-8">
<title>ホームページを開いた時にラインエフェクトが起きるjQuery「introtzikas」の設定方法｜Webデザイナーブログ</title>
<meta name="description" content="オープニング時にラインエフェクトが起きる jQuery 「introtzikas」のご紹介を致します。">
<meta name="keywords" content="オープニング,エフェクト,ホームページ開いた,画像,introtzikas,ブラウザ">
<meta name="robots" content="all">
<link rel="stylesheet" type="text/css" href="/sample/051/base.css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="/sample/051/introtzikas.js"></script>
<script type="text/javascript">
// オープニング エフェクト
$(document).ready(function(){
$().introtzikas({
line:'#ff9a95', //ラインの色
speedwidth:2000, //幅の移動完了スピード
speedheight:800, //高さの移動完了スピード
bg:'#000' //背景色
}); 
});
</script>

実装サンプルを作りましたのでこちらでも確認してみてください。
jQuery inview Plugin デモ

IntroTzikas Pluginを導入するだけで再現が出来るのでとても簡単です。
ローディング時のエフェクトは沢山ありますが、IntroTzikas Pluginはどのエフェクトよりも簡単に設定できます。