Web Tasarımında 10 Dramatik Açılış Ekranı Örneği

Dramatik bir giriş yapmak ister misiniz? Şaşırtıcı animasyonlarınızla, üst düzey kitaplıklarla yaptığınız deneylerle veya sadece dahiyane tasarımınızla onları şaşırtmadan önce ziyaretçileri ısıtmak mı istiyorsunuz? O zaman muhtemelen gözlerinizi bir açılış ekranına ayarlamalısınız.

Masaüstü yazılım dünyasından gelerek web tasarımında başarılı bir şekilde kök salmayı başarmıştır. Canlı, hızlı, hafif, nispeten basit ve güçlüdür. Her zaman ilk birkaç saniyenin nasıl bir dünya farkı yaratabileceğinden bahsederiz. Her şey en başından mükemmel olmalı. Ve açılış ekranları, bu görevin başarısıyla doğrudan bağlantılı olan web uygulamasının bileşenlerinden biridir.

Dışarıdaki çoğunluk, bu değerli ilk izlenimin yaratılmasının arkasında kahraman alanının olduğunu düşünüyor. Bununla birlikte, her saniyenin önemli olduğuna inanarak, i'leri noktalamayı ve t'leri geçmeyi seven titiz ve çalışkan kod sanatçıları var. Bu böyle.

Çevrimiçi kitlenizi ne kadar erken yağlamaya başlarsanız, o kadar iyi bir ilk izlenim yaratacaksınız. Bu yüzden bu arenada çeşitli özgün çözümlere tanık oluyoruz. Aslında ve gerçekte, web sitesi ve izleyici arasındaki konuşmayı açarlar. Ve bir yükleyicinin yaratıcılığınızı sergileme kapasitesine sahip olmadığını düşünüyorsanız, o zaman açılış ekranlarının kesinlikle bir potansiyeli vardır.

Tam Ekranın Kullanılması

Bir sıçrama animasyonu ile sadece küçük bir öğe değil, tüm ekran hizmetinizdedir. İzleyiciye inanılmaz bir şey vaat eden ve böylece ilgiyi ateşleyen film açılış jeneriği gibidirler.

Ted Arcuri tarafından SmokeT

Three.js, hızlı ve hafif introlar oluşturmak için iyi bir yol arkadaşı değildir, ancak Ted Arcuri söz konusu olduğunda kesinlikle hile yapar. Burada, "T" harfinin görünümünü geliştirmek için ustaca yeniden üretilmiş son derece gerçekçi duman efekti kullanılır. İkincisi, bir logo, maskot veya bir başlığa kolayca dönüştürülebildiği için burada tamamen semboliktir.

.

Timothy Giblin tarafından açılış sayfası

Açılış ekranlarının çoğu, marka kimliği ile el ele gider. Örneğin, Timothy Giblin'in Sıçrama sayfası. Bir sanatçının yaratıcı düşüncesiyle zenginleştirilmiş marka kimliğine sahip %100 klasik bir açılış ekranıdır. Yazar bize altın ortalamaya nasıl bağlı kalacağımızı gösteriyor. Konsepti orijinal ve aynı zamanda mütevazı. Sadece bir logoyu ortaya çıkarır, ancak bu açığa çıkarma göze çarpar.

Hitesh Sahu'dan Açılış Ekranı Animasyonu

Bu örnek Timothy Giblin'in çözümünden daha az etkileyici, ancak daha pratik ve bugünlerde her yerde görülebilir. Özünde, bir sonraki seviyeye alınan tembel yüklemedir. Ana sayfanın unsurlarını tek tek eğlenceli ve yaratıcı bir şekilde ortaya çıkararak işleri çok daha ilginç hale getirir.

Daha heyecan verici kod parçacıkları var. Koleksiyonu birlikte keşfedelim ve bir sonraki projeniz için en iyi eşleşmeyi bulalım.

Klasik Çözümler

Açılış ekranınız için daha denenmiş ve gerçek bir yaklaşım mı kullanmak istiyorsunuz? Aşağıdaki örnekler oraya ulaşmanıza yardımcı olacaktır.

Adam Blum'dan Açılış Ekranı

Adam Blum'un çözümünün güzelliğinin arkasında geleneksel bir kayma efekti yatıyor. Temiz, saf bir arka plan ve birbiri ardına görünen birkaç anahtar kelime öbeği içerir. Öngörünün gücünden yararlanır: Bir kullanıcının ilgisini çekmenin ilkel, ancak uygulanabilir yolu.

Nirajan tarafından Oynat

Önceki çözümü biraz daha ilginç hale getirmek için, Niranjan'ın bu kalemde yaptığı gibi bir arka plana sahip manipülasyonlar ekleyebilirsiniz. Play On adlı projesi, görüntü arka planına uygulanan yarı saydam kaplama ekranları arasında hoş kayan geçişler içeriyor. Güzel ve eğlenceli.

Benim Splash by Williams

My Splash by Williams, klasik bir açılış ekranının başka bir temsili örneğidir. Konsept iki aşamalıdır. İlk başta, animasyon, yazarın imzasını orta ve rahat bir tempoda ortaya koyuyor. Daha sonra siyah bir ekran belirir. Bu, çok sayıda projeye uyan zarif, zarif ve ticari bir çözümdür.

Dmytro Lvivsky'den Animasyonlu Açılış Ekranı

Dmytro Lvivsky'nin Animasyonlu Açılış Ekranı, kendi çözümünüzü oluşturmak için mükemmel bir başlangıç ​​noktasıdır. JavaScript destekli animasyonun birkaç ekranı ve her biri arasında geleneksel bir geçişi vardır. İkincisi, bir dairenin oyuna öncülük ettiği bir etkiye dayanır.

CodePen'de Dmytro Lvivsky (@UnforbiddenYet) tarafından kaleme alınan Animasyonlu Açılış Ekranına bakın.

Giles Papworth tarafından Basit CSS3 Solması

İşte inanılmaz derecede basitleştirilmiş bir çözüm. Rutin, metin bloklarını birer birer göstermekte ve buna, eskimeyen bir solma efekti eşlik etmektedir. Ancak, yapması gereken her şeyi yapar. Ve en önemlisi, bunu sadece CSS3 kullandığı için değerli kaynaklarınızı “yemeden” yapar. Sade, zarif, mütevazı ve hafiftir.

ruh hali belirleyici

Aşağıdaki örnekler, bir web sitesinin tonunu en başından ayarlamak için bir açılış ekranının da kullanılabileceğini göstermektedir.

Andrew Tunnecliffe tarafından konsol yükleme animasyonu

Örneğin, bir kodlayıcıysanız, Andrew Tunnecliffe'in konsol yükleme animasyonu uygun bir atmosfer oluşturacaktır. Eski usuldür, son derece basittir ve bir geliştirici için herhangi bir kişisel portföyle mükemmel bir şekilde uyumludur.

Thibault Jan Beyer tarafından Düşen Sayılar

Akılda istatistik tabanlı veya veri odaklı bir projeniz varsa, Thibault Jan Beyer'den Falling Numbers hikaye anlatımı deneyiminiz için iyi bir başlangıç. Animasyon, sonunda yere düşen ve ana ekranı açan düşen sayılarla açılır. Bazı dijital baharatlarla zenginleştirilmiş geometrik bir çekiciliğe sahiptir.

Sonuncu ama bir o kadar önemli

Birçok insan için Stan Lee her zaman “Bruce Lee'nin inek kardeşi” olacak. Bizim için iyiliğin kötülüğe galip geldiği bir evrenin arkasında duran ve sonsuza kadar kalbimizde olacak bir ikondur.

Matt Feinstein tarafından Marvel Açılış Ekranı

Matt Feinstein'dan Marvel Splash Screen tam olarak bir övgü değil, ancak tüm süper kahraman hayranları bundan keyif alacak. başlık kendisini anlatır. Onun sıçrama animasyonu harika bir çizgi roman havasına sahip. İnanılmaz görünen Marvel filmleri için bir açılış dizisinin bir kopyası.

Sıçrama Nasıl Yapılır?

Ön camlar, yükleyicilere alternatif olarak kullanılabilir – tabii ki ağır olmadıkları sürece. Ne yazık ki hala onları fazla ciddiye alıp oyunun aksiyon dolu bir parçasına dönüştürmeye çalışanlar var.

Web tasarımındaki açılış ekranları, hızlı, kısa, hafif ve doğrudan doğruya oldukları sürece etkilidir. Tabii ki, dehanızı göstermeniz için size tüm ekranı veriyorlar. Yine de, orijinal görevine bağlı kalmalısınız. Bunlar, ilgi uyandırması gereken ve bayrağı hemen daha heyecan verici bir çözüme devretmesi gereken sıçramalardır.