オープニングページの実装方法とは?

このQ&Aのポイント
  • オープニングページの実装方法として、javascriptを使用して画像スライドショーを設置し、通常のコンテンツを表示させる方法があります。
  • index.html内でムービーとコンテンツを表現したい場合、htmlファイルの移動は不要で、javascriptを活用することができます。
  • 訪問者の2回目以降にムービーを表示させたくない場合は、クッキーなどを使用して訪問回数を管理することが必要です。
回答を見る
  • ベストアンサー

オープニングページを設置したい

こんにちは。 トップページを開くと、画像5枚程度のスライドショーのみが画面に表示され それが終わると通常のトップページの全内容が表示される様にしたいのですが それをjavascriptで実現させる事は可能でしょうか。。。 ファイルはindex.htmlのみでindex.htmlからtop.htmlへ移動させるような方法ではなく index.html内でオープニングムービーとコンテンツとして表現したいのです。 説明がへたくそで申し訳ないのですが 1.サイトにアクセスする 2.画像5枚程度のスライドショーのみが画面上で始まる 3.ニュースやリード文、バナー等が設置された通常のページが表示される (4.可能であれば、2回目以降の訪問者にはムービーを表示させたくありません。。) という流れを、一つのhtmlファイルで移動させる事なく実現させたいのです。。。 ご教授お願いできますでしょうか!!! よろしくお願いします!!!

質問者が選んだベストアンサー

  • ベストアンサー
  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.2

こんにちは。 以下のようなイメージでしょうか。 http://hppg.moe.hm/okwave/qa/q7732311 (パーっと作ったので細かい表示のズレとかあるかもしれません) スライドショーは好きなプラグインを利用して下さい。 (ただし、スライドショー終了後に任意のJavaScript関数を実行できるもの) 今回はRhinofaderを利用しています。 設置参考サイト http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-rhinofader.html 公式サイト http://rhinoslider.com/ またcookieを簡単に扱うためにjquery.cookie.jsを利用しています。 (4.の1度訪問した人にはスライドショーを表示しないようにする為) 動作原理は、 #main,#topimageはスタイルシートで非表示 クッキーを参照し、訪問者である場合は#mainをshow()で表示することにより通常のコンテンツを表示する。 初めての訪問の場合は#topimageをshow()で表示し、スライドショーを実行する。 全てのスライドショーを実行後にスライドショーの画像をfadeOutし、非表示とする。 fadeOutの実行終了後に#mainをfadeIn()することで通常のコンテンツを表示する。 このような動きになっています。

getupkids1976
質問者

お礼

LancerVII様 こんにちは。 早速のご回答、ありがとうございます!!! まさにこのような動きをイメージしておりました!!! 先ほどから、ソースをダウンロード拝見させていただいているのですが 調べながら一つ一つ理解して覚えていきます!!! 自分にはなかなか時間がかかりそうですが。。。 まずは、御礼申し上げます!! 今後ともどうぞよろしくお願いします!!

その他の回答 (1)

  • seastar3
  • ベストアンサー率69% (99/142)
回答No.1

JavaScriptでJQuery.jsのライブラリを取り込んで、その中の画像表示効果の関数を活用します。 実は私も試したことがないので丸投げで恐縮ですが、WebDesignFactryサイトの記事が参考なると思います。 http://webdesignfactory.schoolbus.jp/jquery_slide/ また、2回目以降の訪問者のオープニング停止は、クッキーを活用して動作を停止することで実現できますから、これも調べてみましょう。

getupkids1976
質問者

お礼

seastar3様 こんにちは。 早速のご丁寧な回答をありがとうございます!!! ヒントをいただいているにも関わらず、理解できず。。。 勉強します。。。。 今後ともどうぞよろしくお願いします!!!!

関連するQ&A

  • Javascriptでオープニングページの設置

    トップページを開くと、画像5枚程度のスライドが順番に画面に表示され それが終わると通常のトップページの全内容が表示される様にしたいのですが どのようにjavascriptで実現させる事ができるのでしょうか? ファイルはindex.htmlのみでindex.htmlからtop.htmlへ移動させるような方法ではなく index.html内でオープニングコンテンツとして表現したいのです。 イメージ的にはこのような感じなのです。 http://www.cluch.jp/ ご教授のほどよろしくお願い致します。 よろしくお願いします!

  • サイトでオープニングでスライドショーを使いたい。

    こんにちは。 サイトのトップページで4,5枚の画像をスライドショーで表示させ、 スライドショーをフェードアウトで終了後に通常のトップ画面がフェードインして表示させることを、 FlashかjQueryで動作させるにはどうしたらいいのでしょうか? トップページは遷移してページを表示させるのではなく同ページ内で実行させたいです。 参考にしたいwebサイトとしてこちらのhttp://www.boku-seka.com/ 映画公式サイト「僕たちは世界を変えることが出来ない。」のように 出来ればなと考えています。 どうか詳しくご存知の方教えていただけないでしょうか。 よろしくお願いします。

    • 締切済み
    • CSS
  • AS3: flvオープニングムービーから一定時間経過でTOPページへ

    Flash初心者です。 Flashでflvファイルのムービーを流し(オープニングムービー)、一定時間経過後にトップページへ飛ばすというサイトを作りたいのですが、一定時間経過後に指定のページへ飛ばすスクリプトが分かりません。 オープニングムービーのページはindex.html→ (index.htmlにムービーを取り込んだswfファイルを配置) トップページはmain-index.html(仮) という感じでかんがえております。 AS3もしくはAS2で簡単な方法ありますでしょうか? よろしくお願いします。

    • ベストアンサー
    • Flash
  • オープニングムービーからメインページへ移動させるのはどのようにすればいいのでしょうか?

    現在ホームページビルダー9でHPを作成中です。 http://○○○.comでホームページを開けた時に、FLASHで作ったオープニングムービーを最初に持ってきてムービー終了かムービー内のスキップボタンを押すことによってindex.htmlのトップページに移動さすにはどのようにすればよいのでしょうか? また、ムービー内にスキップボタンを作ってトップページへのリンク設定はビルダーの方でするのでしょうか?(ムービーだけFLASHで作成し、あとはビルダーでボタンやリンク設定を付属させていくのですか?) 現在は苦戦しながらムービーを作成中です(^-^;

  • ページ読込中に表示が崩れるのを直したい。

    ショッピングカートのASPを使っていて、javascriptをheadで読み込めません。 そのせいなのかわかりませんが、スライドショーのjqueryを使用すると、ページ読み込みの際に、 スライドショーの中の画像が崩れた形で表示されます。 数秒待てば通常の表示に戻るのですが、綺麗に表示させることはできないでしょうか? javascriptでページ成形された後に、画像が読み込まれればいいのですが。 何卒よろしくお願い致します。

  • 既存のサイトにオープニングムービーを組み込みたい

    仕事で作っている既存の自社サイトに社長の意向でオープニングムービーを組み込むことになりました。 index.html (オープニングムービー.swf)  ↓クリック top.html(トップページ・現在のindex.html) という構成にするのが簡単だとは思うのですが ページがとてもたくさんあることと、最近まで別の方(現在は退職されてます)が担当されていて このサイトの全体内容をきちんと理解している方がいないという理由から リンクの張替え(homeを押すとトップページに飛ぶようになっています)に二の足を踏んでいます。 そこで質問なのですが、現在のindex.htmlにトップページがある状態のままで、 オープニングムービーを流す方法はないでしょうか? その際、homeを押したりプラウザの戻るで戻った時に再びオープニングムービーが 流れてしまうことは避けたいです。 flashは簡単なムービーを製作したことがある程度の知識しかないので おかしな質問になっていたら申し訳ありません。 詳しい方がいらっしゃいましたら、よろしくお願いします。 製作環境はwindows xp、flash cs5、ActionScript3.0です。

    • ベストアンサー
    • Flash
  • トップページのタグについて

    ホームページ作成についての質問です。 最初に転送したTOPページ(index.html)なんですけど、リニューアルするのに、新規のファイルでTOP用のファイルを作りました。 そして、転送すると以前のTOPページしか現れないのですが、どうしてでしょうか?? 新しく作ったTOPページもindex.htmlにしています。 最初に作ったindex.htmlを消したらTOPページが何も表示されなくなってしまいます。 現在TOPページ(index.html)が2っある状態です。 どうしたらいいでしょうか??

  • FlashCS4のActionscript2.0でボタンを押して画像を

    FlashCS4のActionscript2.0でボタンを押して画像をスライド表示させる方法 ウェブサイトのトップページのヘッダー画像に スライドショーをFlashで作りたいと思っています。 動きとしては以下のURLで紹介されているようなもの。 http://www.skuare.net/test/proGlider.html 例えば、3つのボタンを A,B,C とし、 ムービークリップの画像をa,b,cとします。 ボタンBを押した時のbの動きは、 ムービークリップ”c”が表示されているときは、左からスライドして現れ ムービークリップ”a”が表示されているときは、右からスライドして現れ るようにしたいです。 お手数ですが、ご教授よろしくお願いします。

    • ベストアンサー
    • Flash
  • スマホだとjQueryを使っているページが見れまん

    現在作成中のWebサイトの全ページをスマートフォンで確認したら、jQueryを使ってスライドショーをしているページだけが3秒くらいで消えます。 始めの3秒くらいは、きちんと表示されるのに、3秒後に突然ブラウザが閉じて、スマートフォンのホーム画面に戻ってしまいます。 その3秒後くらいというのは、おそらくスライドショーにより画像が切り替わる瞬間だと思います。 このような問題は、なぜ起きるのでしょうか? 私のスマートフォンはイーモバイル製ですが、このスマホだとjQueryが見れないからでしょうか? それならば、noscriptを付ければ良いのでしょうか? というよりも、別な問題なのでしょうか?

  • ホームページをつくったんですが…

    アップして、トップページを見たら「アクティブコンテンツを許可しますか?」という画面が出て、許可するを押したらトップのスライドショーが消えてしまいます。許可しないにしたら、正常にトップの画面が表示されます。イマイチ原因がわかりません… 教えてください お願いします。 ホームページはスライドショーとジャバスクリプトでマウスの形を変えているのと、フレームで分割しています。

専門家に質問してみよう