別のページに移ることなく、画面全体の表示を変化させる方法

[新着] Webテンプレートを仮オープンしました

0   名前： chao ： 2007/08/01（水） 02:05  ID:kZLL7rqI sub-Cl
【何をしたいのか】

私の運営するブログの編集に関して事しての質問です。

①　ブログのトップページを別のリンクに飛ばない状態で
　　まったく違う画面に切り替える。

②　数秒後に①の動作を行う。（一回のみ）

③　画面の切り替え方法はフェードインで。だんだん変化していくような。

----------------------------------------------------------------
もしかすると、上記の事はJavaScriptではなくてフラッシュ関係でしょうか？

おそらく、JavaScriptを使用する場合であるなら
複数のJavaScriptを使うのでは？と思い
3つに分けてみたのですが、分かりにくいですかね？
ちなみに、ブログサイトは「ＪＵＧＥＭ」です。

できれば、今後JavaScriptを勉強する上で参考になるページ
こんな調べ方が良いのでは？というようなアドバイスでも結構ですので
ご教授宜しくお願いいたします。


自分でも色々調べてみたのですが
INDEXページを設ければ、そのページから自動的に遷移できるという
事を聞いたのですが、INDEXを設けるほどのページでもないし
作り方も分からなかったので自力ではここでストップしております。。。

知識があまり無いので視点が間違っているかもしれません。

以上です
1   名前： 元帥 ： 2007/08/01（水） 02:05  ［URL］  ID:srh.o3dd sub-bK
# 丸文字は機種依存文字なので、不特定多数の閲覧環境が考えられる公の場では使用しないで下さい。

少なくともキーワードが分かるなら、検索で直ぐに見つかると思います。

自動で切替えるなら、最初の画面を用意せずに、はなっから切替後の画面にしておけば良いと思います。
一回目に訪れた閲覧者は魅入るでしょうけど、二回目以降は待ち時間が鬱陶しく感じるかもしれません。

参考：JavaScriptで嫌いな機能は？
フェードイン・フェードアウト 2112件 8.0%
http://www.tagindex.com/statistics/q009/index.html
因みにフェードインが嫌いという意味であり、JavaScript以外でフェードインを実現しようとそれは同じ事です。

「JavaScript フェードイン」で検索すれば目的のスクリプトは入手可能でしょう。
但し、殆どはフィルターを使用したサンプルでありIE専用だと思うので、キーワードに一工夫。「Ajax フェードイン」
スクリプトが動作しない、スクリプトOFFといった環境で、ページを辿れなくなってしまわないよう、くれぐれも注意を。
2   名前： chao ： 2007/08/01（水） 02:05  ID:kZLL7rqI sub-Cl
>>元帥　様
回答ありがとうございます。

># 丸文字は機種依存文字なので、不特定多数の閲覧環境が考えられる公の場では使用しないで下さい。

「丸文字」とは、"マルイチ"などの記号の事でしょうか？
ご指摘ありがとうございます、以後気をつけます。



>少なくともキーワードが分かるなら、検索で直ぐに見つかると思います。
>「JavaScript フェードイン」で検索すれば目的のスクリプトは入手可能でしょう。

すみません、質問の仕方が悪かったので補足いたします。

以前にフェードインに関するスクリプトを調べた事があったんですが
どこのサンプルも無地の状態から絵や文字をフェードインで表示させていました。
このフェードインする前のデフォルトの画面（サンプルだと無地の画面）を
あらかじめ自分が決めた絵や文字を表示させておいて
そこから、別の絵や文字にフェードインで切り替えたいのです。

そうすれば、

>スクリプトが動作しない、スクリプトOFFといった環境で、ページを辿れなくなって…

という事もなくなると思います。


上記の事がJavaScriptで可能であるなら、詳しくご教授願いたいです。

宜しくお願いいたします。
3   名前： 匿名 ： 2007/08/01（水） 02:05  ID:gWDGQ3J. sub-Cz
# 丸付き数字は俺の環境で文字化けるので、マジで止めてね。

> どこのサンプルも無地の状態から絵や文字をフェードインで表示させていました

そんな腐ったサンプルではなくて、

> あらかじめ自分が決めた絵や文字を表示させておいてそこから、別の絵や文字にフェードインで切り替えたい

普通にあると思うよこれ。例えば、
<ul>
  <li><img .... /></li>
  <li><img .... /></li>
  <li><img .... /></li>
</ul>

のようなリストを用意しておく。

(a). スクリプト実行時、3 つの li 要素を重ね、それぞれに z-index を与えておく。
(b). 一番上の画像の opacity を徐々に下げる（次の画像が浮かび上がる）。
(c). opacity が 0 になった時点で、z-index を入れ替えて終了。
(d). (b) に戻る。

……と思ったけど、フェードインは 1 回で良いんだっけ。まあ、もう少し具体的な仕様ないし叩き台のコードがあれば、もう少し突っ込んだ話ができるかもしれない。
4   名前： プロメテウス ： 2007/08/01（水） 02:05  ［URL］  ID:cYILDfye sub-zk
途中から失礼します。
前のレスは少し読みましたが、解決とかしている事を書込んでいたらスイマセン。


まず①の意味がまったくわかりません。
リンクの場合は、主にTOPと別ウィンドウにわかれています。

TOPはもちろん今見ている、ウィンドウで他のページに移動します。
別ウィンドウは、今見ているウィンドウではなく新しいウィンドウを開いて ページを開きます。


②の回答
数秒後に①の動作を行なう。
これは以外に簡単なことです。　下記で紹介しているやり方は、URLを変更した時に何秒後にジャンプするなどで使われている方法です。

<HEAD>～</HEAD>の間に記入して下さい
<meta http-equiv="refresh" content="1;url=http://">

強調されている「1」の部分は、秒数です。
何秒後にジャンプするかを決めます。　5秒後であれば「5」に変更して下さい。

強調されている「http://」はジャンプするページのURLです。
移動させたいページのURLを記入して下さい。


③の回答
フェードインは他の方が答えたように、あまり望ましい物ではありません。
しかし、やりたいという方の為に、ソースを書き込みます。

<HEAD>～</HEAD>の間に記入して下さい
<meta http-equiv="Site-Exit" content="blendTrans(Duration=1)">

強調されている「1」はフェードインする速さです。
好みに変更しましょう。

※これの場合は、記入したページでTOPリンクしているリンクをクリックすると、同様にフェードインします。
※Yahoo!でのみ実験済みです。　他のサーバーは使用可能かはご自分で知らせべてください。


こんな感じです。
間違っていたらスイマセン。。。

後、Flashの知識が少々あるようですが、Flashはまったく別です。
ページ全体を変化させる動作は、ほとんどJavaScriptです。
Flashでページ全体を変化する場合は、Flashでのスクリプトの記述が必要となります。
5   名前： プロメテウス ： 2007/08/01（水） 02:05  ［URL］  ID:cYILDfye sub-zk
忘れていました。
ブログでしたね、ブログの場合 使用している所によります。

cssしか使用できないブログや何も変更できないブログなどあります。
あなたの使用してるブログはよくわかりませんが、htmlの変更が可能なのでしょうか？

>>4
で説明したやり方は、全てhtmlの変更が可能なブログでないとできません。
6   名前： chao ： 2007/08/01（水） 02:05  ID:kZLL7rqI sub-Cl
匿名　様、プロメテウス　様
回答ありがとうございます。


>>匿名　様

>普通にあると思うよこれ。

本当ですか！？
探し方が下手だったみたいです。もう一度よく調べてみます。

あと匿名様が挙げているソースは、リストの上の画像から順に透明化していって
下の画像を表示していく、というような解釈でよろしいでしょうか？
こういう方法もあるんですね。参考にさせていただきます。


>もう少し具体的な仕様ないし叩き台のコードがあれば…

すみません。まだ、どのスクリプトを使おうとかは、はっきりしていないのでここで提示する事ができません。
ただ、今の段階ではブログのTOPページの<body>～</body>の間の全部を
丸ごと画面切り替えしたいと考えているので、それが可能なScriptがあれば
使用したいと思っております。

----------------------------------------------------------------------

>>プロメテウス　様

>まず１の意味がまったくわかりません。

フェードインで画面を切り換えるという動作を1ページ内で行いたい（ページジャンプしないで）
、というニュアンスで書いたつもりでしたが…分かりにくくてすみませんでした。

プロメテウス様の案を採用したいのですが、別ページを用意する事は極力したくないので
最終候補として参考にさせていただきます。
ページ移動がなければ、このScriptの動作で間違いないです。

>htmlの変更が可能なのでしょうか？

html変更可能です。
7   名前： プロメテウス ： 2007/08/01（水） 02:05  ID:cYILDfye sub-zk
えっとつまりこういう事ですかね？

複数のページは作らず、そのページだけで内容を変更すると言う事ですか？
ちょっとわかりにくいと思うのど、下記をご覧下さい。

top.html [あなたのブログのTOPのページ]
∟top2.html [他のページ]
∟top3.html [他のページ]

のように複数のページを作成してリンクするのではなく、

top.html [あなたのブログのTOPのページ]
∟--- [TOPのページのソースから呼び出す]

のように内容を変更した時用のソースを呼び出す感じですか？　わかり難い言い方でスイマセン。


もし、そのような事をしたいのであれば、Flashを利用する事をオススメします。
htmlでやるとかなりめんどくさいと思いますよ。

Flashの場合は、ある程度のスクリプトを学べば簡単にできます。


ただ、ブログでしたら画面全体にFlashを配置できないと思うので、かなり難しい問題になってきますね！
いろいろと調べてみます。
一覧へ戻る