WEBページ最下部からレイヤーを表示

質問

JavascriptもしくはJqueryで、WEBページを開くと最下部からにょきっとレイヤーが現れるという効果を出したいと考えています。

下記のサイトではFlushで実装されていますが、これをJavascriptやJqueryで行いたいと思っています。
http://solanin-movie.jp/

この効果が出せるプラグインがありましたらご紹介いただきたいですし、
またはプログラミング自体を教えて頂けると助かります。

また、この辺りを勉強すればピンポイントでこの効果を学べるといったWEBサイト、書籍等ありましたら教えて頂きたいと思います。
ちなみにプログラミングは初歩の初歩程度の知識しかありません。

よろしくお願いいたします。

回答No.2

tracer · ベストアンサー

JavaScriptの役割はいろいろありますが、もっとも期待される働きは、HTML/CSSを操作するということだと思います。つまり、JavaScriptの前に、HTML/CSS全般の知識がないとWEBページを作るのは難しいと思います。

さて、本題ですが、モダンブラウザのみの対応なら、JavaScriptを使わずともCSS3だけでできます。レガシーブラウザを含めるなら、CSSの値をjQuery Animateで操作するだけですね。HTML/CSSを理解されているのであれば、理屈はとても簡単ですよ。

お礼

自己解決しました！
ありがとうございました！

補足

ご返答ありがとうございます。
HTMLやCSSはある程度分かっているつもりです。

出来ればクロスブラウザに対応させたいですし、レガシーブラウザも対応させたいと思います。
animateが気になったので調べてみたところjqueryを使えばかなり簡単に実装出来そうですね！
しかし肝心なところが分かっていません。

http://p.tl/cKU8

このサイトを参照しましたが、animateとtoggleを利用すれば出来そうな感じですがこれだと下からにょきっとではなく上からにょきっとな感じになりそうです。
これを下からにする方法がいまいち分かりません。
もしお分かりでしたらご教授願います。

また、css3でも

http://p.tl/0CRs

こちらの方法を応用すれば出来そうな感じですが、その応用が分かりません。。。
こちらも同様にお分かりでしたらお願い致します。

回答No.1

ishi3

多分ですが、CSSをjavascriptで操作すれば出来そうな気がします。

<div class="rollup">レイヤー内容</div>

【CSS】
div.rollup {
position: absolute;
top: 10px;
right: 30px;
}

レイヤーの divブロックの配置を cssで絶対配置(position: absolute;)に指定して、
スクリプトでCSSの[top]の位置を操作する？

CSS関係の情報を探れば解決策が見つかるかも。。。

お礼

ご返答ありがとうございます。
一度それで調べてみます。