web-dev-qa-db-ja.com

Webサイトが読み込まれる前のようこそ画面（クリックして入力）[スプラッシュ画面]

Webサイトにようこそ画面を作成するにはどうすればよいですか？たとえば、画像があり、ユーザーがクリックすると「ENTER」と表示されるリンクが表示されます。どうすればいいですか？また、可能であればJavascriptまたはJQueryを使用して、ユーザーが[ENTER]をクリックすると、スプラッシュスクリーンからWebサイトにクロスフェードできますか？

私はまだコードを持っていません。

javascriptjqueryhtmleffect
11
Julian

スプラッシュスクリーンは、最初のアクセス時にWebサイトの上部にあるdivに配置できます。ユーザーがクリックすると（または「Enter」リンクをクリックすると）、次のようにフェードスクリーンになります：

 <div id="splashscreen">
    <h2>Welcome !</h2>
    Take a look at our new products, blablabla
    <img src="http://i.telegraph.co.uk/multimedia/archive/02182/kitten_2182000b.jpg" />

    <a href="#" class="enter_link">Enter on the website</a>
</div>

そして、わずか3行のjQueryで：

 $('.enter_link').click(function() { 
        $(this).parent().fadeOut(500);
 });

スプラッシュスクリーンdivは、使用可能なスペース全体を取得し、実際のコンテンツを非表示にする背景を持っている必要があります。 JSFiddleの例： http://jsfiddle.net/5zP3Q/

スプラッシュスクリーンは最初の訪問時にのみ表示されることに注意してください。そのためには、サーバー側でセッションとCookieを使用して、コードのこの部分を表示する必要があるかどうかを決定します。

13
Maxime Lorant

これを行うには2つの方法を提案しますが、JSがオフになっているときに機能するように設計することを強くお勧めします。

オプション1は、実際にスプラッシュページ（別のファイル）を作成することで構成されます。つまり、index.html、またはプライマリランディングファイルにそのマークアップのみが含まれ、javascriptは不要です。これには欠点があります。

-JSリダイレクトなどを行うようなひどいことをしない限り、すべてのユーザーはこのページに集中します。-以前にサイトにアクセスしたことがあるユーザーにとっては、それほど追加することはできません。正確なJSリダイレクト。 -SEOが悪い（boooo）

オプション2では、スプラッシュページを実際にメインページの一部にします。これは手っ取り早い展開例ですが、大きなプロジェクトで実装したもので、非常にうまく機能します。基本的に、「スプラッシュ」divと「スプラッシュ後」divを作成します。 JSで操作できるように、両方のIDを割り当てます（おそらくそれらの正確な文字列を使用して）。スプラッシュ後のdivには（ああ、そうだと言っている）、display：noneのインラインスタイルが含まれている必要があります。これは目的であるため、アレルギー反応はありません。ユーザーがCSSの読み込みを待っている場合でも、CSSが表示されないようにするためです。

基本的に、ユーザーが「スプラッシュ」セクションの「続行」ボタンをクリックすると、JSを使用して「スプラッシュ」divの可視性を「なし」に、「ポストスプラッシュ」divをブロックするか、フェードエフェクトを実行します。 。フェード効果では、「スプラッシュ」divでの絶対配置が必要になるため、フェード中に他のコンテンツがウィンドウの上部に表示される可能性があります。

このアプローチの利点はさまざまですが、適用可能な場合はJSを使用して回避する必要がある欠点があります。私は最初に非JSマシン（米国のユーザーの1％未満）用に構築します-つまり、「続行」ボタンは、ページをロードするパラメータでページを更新するリンクになります「スプラッシュ後」が表示され、「スプラッシュ」が表示されます：なし。これは、動的なサーバー環境を実行している場合にのみ可能です。 PHPまたはASPまたは何かを実行していない場合は、オプション1のように動作させることができます。ユーザーがJavaScriptを使用している場合、onclickその続行ボタンの場合は、ページが更新されないようにpreventDefault（）メソッドを呼び出すだけで、代わりにフェードを実行してコンテンツを表示します。

これは多くの情報ですので、明確化が必要な場合はお知らせください。しかし、この方法は企業規模のプロジェクトで非常に有効であり、JSをサポートしていないマシンのWebサイトを壊さないという点で非常に互換性があります（ユーザーが無効にしている、ネットワークが無効になっているなど）。進歩的な向上に賛成です！

本当にあなたのユーザーにとって良いことであるために、あなたがすでにサイトを訪れた場合にページコンテンツに直接行くクッキーを設定するべきです。私の経験では、ユーザーはスプラッシュページを2回以上見たくありません。

7
dudewad