Webデザインにおけるスプラッシュスクリーンの10の劇的な例

公開: 2021-02-03

劇的な入り口を作りたいですか？驚異的なアニメーション、ハイエンドライブラリでの実験、または単に独創的なデザインで訪問者を驚かせる前に、訪問者をウォームアップしたいですか？次に、おそらくスプラッシュ画面に目を向ける必要があります。

デスクトップソフトウェアの世界から来て、それはウェブデザインに首尾よく定着することに成功しました。それは活発で、速く、軽量で、比較的シンプルで強力です。私たちは常に、最初の数秒がどのように世界を変えることができるかについて話します。すべてが最初から完璧でなければなりません。また、スプラッシュスクリーンは、このミッションの成功に直接関連するWebアプリケーションのコンポーネントの1つです。

そこにいる大多数は、ヒーローエリアがこの貴重な第一印象の作成の背後にあると考えています。しかし、毎秒が重要であると信じて、iを点在させ、tを交差させることを崇拝する、綿密で勤勉なコードアーティストがいます。まあ、それはそうです。

オンラインオーディエンスを早くバターアップし始めるほど、第一印象は良くなります。そのため、この分野でさまざまな独自のソリューションを目の当たりにしています。実際にそして事実上、彼らはウェブサイトと聴衆の間の会話を開きます。そして、ローダーにあなたの創造性を誇示する能力がないと思うなら、スプラッシュスクリーンには確かにいくつかの可能性があります。

フルスクリーンを活用する

スプラッシュアニメーションを使用すると、小さな要素だけでなく、画面全体が利用できます。それらは、観客に信じられないほどの何かを約束し、それによって興味を刺激する映画のオープニングクレジットシーケンスのようなものです。

TeddArcuriによるSmokeT

Three.jsは、すばやく軽量なイントロを作成するための優れたコンパニオンではありませんが、TeddArcuriの場合は確かにうまくいきます。ここでは、巧みに再現された非常にリアルな煙の効果を使用して、文字「T」の外観を向上させています。後者は、ロゴタイプ、マスコット、またはタイトルに簡単に変更できるため、ここでは純粋に象徴的です。

。

TimothyGiblinによるスプラッシュページ

スプラッシュ画面の大部分は、ブランドアイデンティティと密接に関連しています。たとえば、TimothyGiblinによるスプラッシュページ。これは、アーティストの創造的な思考で強化されたブランドアイデンティティを特徴とする100％クラシックなスプラッシュスクリーンです。著者は、中庸を守る方法を教えてくれます。彼のコンセプトは独創的であると同時に控えめです。それはロゴタイプだけを明らかにします、それでもこの発見は目を引きます。

HiteshSahuによるスプラッシュスクリーンアニメーション

この例は、Timothy Giblinによる解決策ほど印象的ではありませんが、より実用的であり、最近ではどこでも見ることができます。本質的には、次のレベルに進むのは遅延読み込みです。ホームページの要素をひとつひとつ遊び心と創造性で明らかにし、物事をより面白くします。

よりエキサイティングなコードスニペットがいくつかあります。コレクションを一緒に調べて、次のプロジェクトに最適なものを見つけましょう。

クラシックソリューション

スプラッシュ画面に対して、より実証済みのアプローチを使用したいとお考えですか？以下の例は、そこに到達するのに役立ちます。

アダムブルームによるスプラッシュスクリーン

従来のスライド効果は、AdamBlumのソリューションの美しさの背後にあります。クリーンで純粋な背景と、次々と現れるいくつかのキーフレーズが含まれています。それは期待の力を利用します：ユーザーの興味を鼓舞するための原始的でありながら実行可能な方法。

NirajanによるPlayOn

前のソリューションをもう少し面白くするために、Niranjanがこのペンで行ったような背景の操作を追加できます。彼のプロジェクトPlayOnは、画像の背景に適用された半透明のオーバーレイ画面間の素敵なスライドトランジションを特徴としています。素晴らしくて面白い。

ウィリアムズによる私のスプラッシュ

ウィリアムズによる私のスプラッシュは、古典的なスプラッシュスクリーンのもう1つの代表的な例です。コンセプトには2つの段階があります。最初に、アニメーションは適度で快適なペースで作者の署名を明らかにします。その後、黒い画面が表示されます。これは、多くのプロジェクトに適合する、エレガントで洗練されたビジネスライクなソリューションです。

DmytroLvivskyによるアニメーションスプラッシュスクリーン

Dmytro Lvivskyによるアニメーションスプラッシュスクリーンは、独自のソリューションを作成するための完璧な出発点です。 JavaScriptを利用したアニメーションには、いくつかの画面と、各画面間の従来の遷移があります。後者は、サークルがプレイをリードする効果に基づいています。

CodePenのDmytroLvivsky（@UnforbiddenYet）によるペンアニメーションスプラッシュ画面を参照してください。

GilesPapworthによるシンプルなCSS3フェード

これは、信じられないほど単純化されたソリューションです。ルーチンは、テキストのブロックを1つずつ表示し、昔ながらのフェード効果を伴うことにあります。ただし、必要なことはすべて実行します。そして、最も重要なことは、CSS3のみを使用するため、貴重なリソースを「食べる」ことなくそれを実行することです。シンプルでエレガント、控えめで軽量です。

ムードセッター

次の例は、スプラッシュ画面を使用して、最初からWebサイトのトーンを設定できることを示しています。

AndrewTunnecliffeによるコンソール読み込みアニメーション

たとえば、あなたがコーダーである場合、AndrewTunnecliffeによるコンソールローディングアニメーションは適切な雰囲気を確立します。それは昔ながらのものであり、残酷にシンプルであり、開発者の個人的なポートフォリオと完全に一致します。

Thibault JanBeyerによる減少数

統計ベースまたはデータ駆動型のプロジェクトを念頭に置いている場合は、Thibault JanBeyerによるFallingNumbersがストーリーテリング体験の良いスタートです。アニメーションは数字が下がって開き、最終的には地面にぶつかってメイン画面が開きます。それはいくつかのデジタルスパイスで強化された幾何学的な魅力を持っています。

最後だが大事なことは

多くの人にとって、スタン・リーは常に「ブルース・リーのオタク兄弟」です。私たちにとって、彼は善が悪に打ち勝つ宇宙の後ろに立っていたアイコンであり、私たちの心に永遠に残るでしょう。

MattFeinsteinによるマーベルスプラッシュスクリーン

MattFeinsteinによるMarvelSplash Screenは正確には賛辞ではありませんが、すべてのスーパーヒーローファンはそれを楽しむでしょう。タイトルはそれ自体を物語っています。彼のスプラッシュアニメーションは素晴らしい漫画の雰囲気を持っています。それは信じられないほどに見えるマーベル映画のオープニングシーケンスのレプリカです。

スプラッシュの作り方

スプラッシュスクリーンは、ローダーの代わりに使用できます。もちろん、重い場合を除きます。残念ながら、彼らを真剣に受け止めて、アクション満載の劇の一部に変えようとする人々がまだいます。

ウェブデザインのスプラッシュスクリーンは、すばやく、短く、軽量で、的確である限り効果的です。もちろん、彼らはあなたにあなたの天才を示すための全画面を提供します。それでも、元の使命に固執する必要があります。それらは興味をかき立て、すぐにバトンをよりエキサイティングな解決策に渡すはずのスプラッシュです。