10 dramatycznych przykładów ekranów powitalnych w projektowaniu stron internetowych

Chcesz zrobić dramatyczne wejście? Chcesz rozgrzać odwiedzających przed zadziwieniem ich oszałamiającymi animacjami, eksperymentami z wysokiej klasy bibliotekami lub po prostu pomysłowym projektem? Wtedy prawdopodobnie powinieneś spojrzeć na ekran powitalny.

Pochodząc ze świata oprogramowania komputerowego, z powodzeniem zakorzenił się w projektowaniu stron internetowych. Jest energiczny, szybki, lekki, stosunkowo prosty i mocny. Zawsze mówimy o tym, jak pierwsze kilka sekund może zmienić świat. Wszystko powinno być idealne od samego początku. A ekrany powitalne są jednym z tych elementów aplikacji internetowej, które są bezpośrednio powiązane z sukcesem tej misji.

Większość uważa, że ​​za stworzeniem tego cennego pierwszego wrażenia stoi obszar bohatera. Są jednak tacy skrupulatni i sumienni twórcy kodu, którzy uwielbiają stawiać kropki nad i, wierząc, że liczy się każda sekunda. Cóż, tak właśnie jest.

Im wcześniej zaczniesz podlewać swoich odbiorców online, tym lepsze pierwsze wrażenie zrobisz. Dlatego jesteśmy świadkami różnych oryginalnych rozwiązań na tej arenie. Właściwie i faktycznie otwierają rozmowę między serwisem a odbiorcami. A jeśli uważasz, że loader nie jest w stanie pochwalić się twoją kreatywnością, ekrany powitalne z pewnością mają pewien potencjał.

Korzystanie z pełnego ekranu

Dzięki animacji powitalnej cały ekran jest do Twojej dyspozycji, a nie tylko mały element. Są jak sekwencje czołówki filmu, które obiecują widzom coś niesamowitego, tym samym wzbudzając zainteresowanie.

SmokeT autorstwa Tedda Arcuri

Three.js nie jest dobrym towarzyszem do tworzenia szybkich i lekkich intro, ale w przypadku Tedda Arcuriego z pewnością załatwia sprawę. Tutaj umiejętnie odwzorowany, wysoce realistyczny efekt dymu został wykorzystany do uwydatnienia wyglądu litery „T”. Ta ostatnia ma tu charakter czysto symboliczny, gdyż można ją łatwo zamienić na logotyp, maskotkę czy tytuł.

.

Strona powitalna Timothy'ego Giblina

Większość ekranów powitalnych idzie w parze z tożsamością marki. Na przykład strona powitalna Timothy'ego Giblina. Jest to w 100% klasyczny ekran powitalny, który przedstawia tożsamość marki wzbogaconą o kreatywne myślenie artysty. Autor pokazuje nam, jak trzymać się złotego środka. Jego koncepcja jest oryginalna i jednocześnie skromna. Odsłania tylko logotyp, ale to odkrycie przyciąga wzrok.

Animacja ekranu powitalnego autorstwa Hitesha Sahu

Ten przykład jest mniej imponujący niż rozwiązanie Timothy'ego Giblina, ale jest bardziej praktyczny i można go dziś zobaczyć wszędzie. W istocie jest to po prostu leniwe ładowanie przeniesione na wyższy poziom. Odsłania elementy strony głównej jeden po drugim w zabawny i kreatywny sposób, czyniąc rzeczy o wiele ciekawszymi.

Istnieje kilka bardziej ekscytujących fragmentów kodu. Przeanalizujmy razem kolekcję i znajdźmy najlepsze dopasowanie do Twojego następnego projektu.

Klasyczne rozwiązania

Chcesz zastosować bardziej sprawdzone i prawdziwe podejście do ekranu powitalnego? Poniższe przykłady pomogą Ci się tam dostać.

Ekran powitalny autorstwa Adama Bluma

Za pięknem rozwiązania Adama Bluma kryje się tradycyjny efekt poślizgu. Zawiera czyste, czyste tło i kilka kluczowych fraz, które pojawiają się jedna po drugiej. Wykorzystuje moc przewidywania: prymitywny, ale realny sposób na wzbudzenie zainteresowania użytkownika.

Zagraj w Nirajan

Aby poprzednie rozwiązanie było nieco ciekawsze, możesz dodać manipulacje z tłem, tak jak Niranjan zrobił to w tym piórze. Jego projekt Play On zawiera piękne, przesuwane przejścia między półprzezroczystymi nakładkami ekranowymi nałożonymi na tło obrazu. Miły i zabawny.

Mój Splash autorstwa Williamsa

My Splash autorstwa Williamsa to kolejny reprezentatywny przykład klasycznego ekranu powitalnego. Koncepcja ma dwa etapy. Początkowo animacja ujawnia podpis autora w umiarkowanym i wygodnym tempie. Następnie pojawia się czarny ekran. To eleganckie, eleganckie i biznesowe rozwiązanie, które pasuje do wielu projektów.

Animowany ekran powitalny autorstwa Dmytro Lvivsky

Animowany ekran powitalny autorstwa Dmytro Lvivsky'ego to doskonały punkt wyjścia do stworzenia własnego rozwiązania. Animacja oparta na JavaScript ma kilka ekranów i tradycyjne przejście między nimi. Ten ostatni opiera się na efekcie, w którym okrąg prowadzi grę.

Zobacz ekran powitalny animowany piórem autorstwa Dmytro Lvivsky (@UnforbiddenYet) na CodePen.

Proste zanikanie CSS3 autorstwa Gilesa Papworth

Oto niesamowicie uproszczone rozwiązanie. Rutyna polega na wyświetlaniu bloków tekstów jeden po drugim, czemu towarzyszy uświęcony tradycją efekt zanikania. Robi jednak wszystko, co powinien. A co najważniejsze, robi to bez „zjadania” cennych zasobów, ponieważ używa tylko CSS3. Jest prosty, elegancki, skromny i lekki.

Ustalacz nastroju

Poniższe przykłady pokazują, że ekranu powitalnego można również użyć do ustawienia tonu dla witryny internetowej od samego początku.

Animacja ładowania konsoli autorstwa Andrew Tunnecliffe'a

Na przykład, jeśli jesteś programistą, animacja ładowania konsoli autorstwa Andrew Tunnecliffe'a stworzy odpowiednią atmosferę. Jest oldschoolowy, jest brutalnie prosty i doskonale komponuje się z każdym osobistym portfolio dewelopera.

Spadające liczby, Thibault Jan Beyer

Jeśli masz na myśli projekt oparty na statystykach lub danych, Falling Numbers autorstwa Thibault Jana Beyera jest dobrym początkiem do opowiadania historii. Animacja otwiera się spadającymi liczbami, które w końcu uderzają w ziemię i otwierają główny ekran. Posiada geometryczny urok wzbogacony o odrobinę cyfrowej pikanterii.

Nie mniej ważny

Dla wielu ludzi Stan Lee zawsze będzie „bratem nerdy Bruce'a Lee”. Dla nas jest ikoną, która stała za wszechświatem, w którym dobro zwycięża zło i która na zawsze pozostanie w naszych sercach.

Ekran powitalny Marvela autorstwa Matta Feinsteina

Marvel Splash Screen autorstwa Matta Feinsteina nie jest hołdem, ale spodoba się wszystkim fanom superbohaterów. Tytuł mówi sam za siebie. Jego animacja powitalna ma wspaniały komiksowy klimat. Jest to replika sekwencji otwierającej filmy Marvela, która wygląda niesamowicie.

Jak zrobić plusk

Ekrany powitalne mogą być używane jako alternatywa dla ładowarek – o ile oczywiście nie są ciężkie. Niestety wciąż są ludzie, którzy traktują je zbyt poważnie i próbują przekształcić je w pełną akcji część spektaklu.

Ekrany powitalne w projektowaniu stron internetowych są skuteczne, o ile są szybkie, krótkie, lekkie i bezpośrednie. Oczywiście dają ci cały ekran za pokazanie swojego geniuszu. Mimo wszystko powinieneś trzymać się jego pierwotnej misji. Są to chlapnięcia, które powinny wzbudzić zainteresowanie i od razu przekazać pałeczkę do bardziej ekscytującego rozwiązania.