WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

jQueryでページロード時にカーテンが開くような効果をつけてみる

Webページを開いた際(ページロード時)に何か演出を加えられたらおもしろいかな、と
ふと思い立って作ってみた、ページロード時にカーテンが開くような演出を加えるスクリプト。
何かに使えそうな感じもしたので紹介してみます。

まず動作サンプルから。(画面内の「ページリロード」をクリックしてみてください。)

※サンプル画面上のページロード演出部分以外は、
先日のエントリー「jQueryで追尾型メニューリストを作ってみる」と同じものを使用しています。

別ウィンドウで見る場合はこちら

ページロードされると同時にカーテン要素となる<div>を左右に2つ生成し、
animateで幅と透明度を制御しているだけ。
HTMLソース内には特に特別な指定を加える必要はありません。

CSSでカーテン要素として生成する<div>に対して以下の指定を加えます。
※今回のサンプルではカーテン要素の左側を<div id=”curtainLeft”>、
右側を<div id=”curtainRight”>としています。

[css]
◆CSS
html,body {
height: 100%;
}

#curtainLeft,
#curtainRight {
top: 0;
width: 50%;
height: 100%;
background: #000;
position: absolute;
}
#curtainLeft { left: 0; z-index:100;}
#curtainRight { right: 0; z-index:101;}
[/css]

カーテン部分を縦に画面目いっぱい表示するために
IE様用にhtmlとbodyにも『height:100%;』を入れてあげる必要があります。

そして肝心のSCRIPT部分は、以下のような感じに。

[javascript]
◆SCRIPT(jQuery)
$(window).load(function () {
if(document.getElementById(“curtainLeft”) === null){
$(‘body’).prepend(‘<div id=”curtainLeft”></div>’);
}
if(document.getElementById(“curtainRight”) === null){
$(‘body’).prepend(‘<div id=”curtainRight”></div>’);
}
$(“#curtainLeft”).stop().animate({width:’0′,opacity:’0′}, 2000 );
$(“#curtainRight”).stop().animate({width:’0′,opacity:’0′},2000 );
setTimeout(‘Eliminate()’,5000);
});
function Eliminate() {
$(‘#curtainLeft’).remove();
$(‘#curtainRight’).remove();
}
[/javascript]

ページロード時に<div id=”curtainLeft”>と<div id=”curtainRight”>を生成して
animateで幅[width]と透明度[opacity]を変化させています。

生成したカーテン用の<div>要素はずっと残しておくのも気持ち悪いので、
ページロード後、5秒後に消す処理を加えています。

サンプルでは各<div>に背景色を敷いていますが、
これを画像にすることで違った見え方にすることも可能になります。

ページをロード(更新含む)する度に起こる演出なので、
あまり派手にすると返ってウザくなってしまう危険性もあるのでほどほどに。

半分は遊び間隔のSCRIPTですが何かの際に是非。。。

jQueryでページロード時にカーテンが開くような効果をつけてみる」への2件のフィードバック

  • 2014年2月13日 @ 7:22 PM
    パーマリンク

    初めてjQueryを使ってみました。
    背景に画像を置いて、感動して何十回もF5キーを押してしまいました。
    色々試してみます。
    判り易く書いてくださってありがとうございます。

    返信
  • 2014年2月16日 @ 10:45 AM
    パーマリンク

    >クララさん
    コメントありがとうございます。
    当記事のアニメーションスクリプトがお役に立ったようで
    嬉しく思っております。

    当ブログでは他にも色々とjQueryを使っての演出方法など
    紹介させていただいておりますので
    あれこれお試しいただけると幸いです。

    よろしくお願いします。

    返信

コメントを残す

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