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

Czy chcesz dokona─ç dramatycznego wej┼Ťcia? Czy chcesz rozgrza─ç odwiedzaj─ůcych, zanim zauroczysz ich niesamowitymi animacjami, zaawansowanymi eksperymentami bibliotecznymi lub po prostu sprytnym projektem? Wtedy prawdopodobnie powiniene┼Ť spojrze─ç na ekran powitalny.

Pochodz─ůc ze ┼Ťwiata oprogramowania komputerowego, z powodzeniem zakorzeni┼é si─Ö w projektowaniu stron internetowych. Jest szybki, szybki, lekki, stosunkowo prosty i mocny. Zawsze m├│wimy o tym, jak pierwsze kilka sekund mo┼╝e zrobi─ç wielk─ů r├│┼╝nic─Ö. Wszystko musi by─ç idealne od samego pocz─ůtku. Ekrany powitalne s─ů jednym z tych komponent├│w aplikacji internetowych, kt├│re s─ů bezpo┼Ťrednio powi─ůzane z sukcesem tej misji.

Wi─Ökszo┼Ť─ç ludzi uwa┼╝a, ┼╝e ÔÇőÔÇőobszar bohatera popiera stworzenie tego cennego pierwszego wra┼╝enia. S─ů jednak pilni i skrupulatni arty┼Ťci kodu, kt├│rzy uwielbiaj─ů kropkowa─ç litery i przekracza─ç litery t, wierz─ůc, ┼╝e liczy si─Ö ka┼╝da sekunda. Tak to ju┼╝ jest.

Im szybciej zaczniesz zwi─Öksza─ç liczb─Ö odbiorc├│w online, tym lepsze b─Ödzie twoje pierwsze wra┼╝enie. Dlatego jeste┼Ťmy ┼Ťwiadkami kilku oryginalnych rozwi─ůza┼ä w tej dziedzinie. W rzeczywisto┼Ťci otwieraj─ů rozmow─Ö mi─Ödzy stron─ů internetow─ů a publiczno┼Ťci─ů. A je┼Ťli uwa┼╝asz, ┼╝e ┼éadowarka nie jest w stanie wykaza─ç si─Ö kreatywno┼Ťci─ů, ekrany powitalne z pewno┼Ťci─ů maj─ů pewien potencja┼é.

Skorzystaj z pełnego ekranu

Dzi─Öki animacji powitalnej ca┼éy ekran jest do Twojej dyspozycji, a nie tylko ma┼éy element. S─ů jak sekwencje kredytowe z film├│w, kt├│re obiecuj─ů publiczno┼Ťci co┼Ť niesamowitego, wzbudzaj─ůcego zainteresowanie.

Tedd Arcuri SmokeT

Three.js nie jest dobrym towarzyszem do tworzenia szybkich i lekkich prezentacji, jednak w przypadku Tedda Arcuriego z pewno┼Ťci─ů dzia┼éa. Tutaj zastosowano wysoce realistyczny i umiej─Ötnie odtworzony efekt dymu, aby poprawi─ç wygl─ůd litery ÔÇ×TÔÇŁ. Ta ostatnia jest tutaj czysto symboliczna, poniewa┼╝ mo┼╝na j─ů ┼éatwo zmieni─ç na logo, maskotk─Ö lub tytu┼é.

.

Strona powitalna Timothy’ego Giblina

Wi─Ökszo┼Ť─ç ekran├│w prezentacji idzie w parze z to┼╝samo┼Ťci─ů marki. Na przyk┼éad strona Splash Timothy’ego Giblina. Jest to w 100% klasyczny ekran prezentacji, kt├│ry przedstawia to┼╝samo┼Ť─ç marki wzbogacon─ů tw├│rczym my┼Ťleniem artysty. Autor pokazuje nam, jak trzyma─ç si─Ö z┼éotego medium. Jego koncepcja jest oryginalna i jednocze┼Ťnie skromna. Odkryj tylko jedno logo, ale to odkrycie przyci─ůga uwag─Ö.

Animacja ekranu powitalnego Hitesh Sahu

Ten przyk┼éad jest mniej imponuj─ůcy ni┼╝ rozwi─ůzanie Timothy’ego Giblina, ale jest bardziej praktyczny i mo┼╝na go zobaczy─ç wsz─Ödzie w tych dniach. Zasadniczo jest to tylko leniwy ┼éadunek przeniesiony na wy┼╝szy poziom. Odkrywaj elementy strony g┼é├│wnej jeden po drugim w spos├│b zabawny i kreatywny, dzi─Öki czemu wszystko jest o wiele bardziej interesuj─ůce.

Istnieje kilka ciekawszych fragment├│w kodu. Zbadajmy razem kolekcj─Ö i znajd┼║ najlepsze dopasowanie do twojego nast─Öpnego projektu.

Klasyczne rozwi─ůzania

Czy chcesz zastosowa─ç bardziej sprawdzone podej┼Ťcie na ekranie g┼é├│wnym? Poni┼╝sze przyk┼éady pomog─ů ci si─Ö tam dosta─ç.

Ekran powitalny Adama Bluma

Tradycyjny efekt przesuwny podkre┼Ťla pi─Ökno rozwi─ůzania Adam Blum. Zawiera czyste i czyste t┼éo oraz kilka kluczowych zwrot├│w, kt├│re pojawiaj─ů si─Ö jedna po drugiej. Wykorzystaj moc przewidywania – prymitywny, ale realny spos├│b na wzbudzenie zainteresowania u┼╝ytkownika.

Nirajan Play On

Aby powy┼╝sze rozwi─ůzanie by┼éo nieco bardziej interesuj─ůce, mo┼╝esz doda─ç manipulacje z t┼éem takim jak Niranjan w tym pi├│rze. Jego projekt Play On oferuje pi─Ökne przesuwane przej┼Ťcia mi─Ödzy p├│┼éprzezroczystymi ekranami nak┼éadki zastosowanymi na tle obrazu. Fajnie i przyjemnie

My Splash Williamsa

My Splash Williamsa to kolejny reprezentatywny przyk┼éad klasycznego ekranu powitalnego. Koncepcja sk┼éada si─Ö z dw├│ch etap├│w. Pocz─ůtkowo animacja ods┼éania podpis autora w umiarkowanym i wygodnym tempie. Nast─Öpnie pojawia si─Ö czarny ekran. To eleganckie, eleganckie i profesjonalne rozwi─ůzanie, kt├│re dostosowuje si─Ö do wielu projekt├│w.

Animowany ekran powitalny Dmytra Lwowskiego

Animowany ekran powitalny Dmytra Lwowskiego to idealny punkt wyj┼Ťcia do stworzenia w┼éasnego rozwi─ůzania. Animacja JavaScript ma wiele ekran├│w i tradycyjne przej┼Ťcia mi─Ödzy nimi. Ten ostatni opiera si─Ö na efekcie, w kt├│rym ko┼éo prowadzi gr─Ö.

Zobacz animowany ekran powitalny pi├│ra Dmytra Lwowskiego (@UnforbiddenYet) na CodePen.

Proste wygaszanie CSS3 autorstwa Gilesa Papwortha

Oto niezwykle uproszczone rozwi─ůzanie. Procedura polega na wy┼Ťwietlaniu blok├│w tekstu jeden po drugim, z tradycyjnym efektem zanikania. Jednak robi wszystko, co powinien. I, co najwa┼╝niejsze, robi to bez ÔÇ×zjadaniaÔÇŁ twoich cennych zasob├│w, poniewa┼╝ u┼╝ywa tylko CSS3. Jest prosty, elegancki, skromny i lekki.

Humorysta

Poni┼╝sze przyk┼éady pokazuj─ů, ┼╝e ekran g┼é├│wny mo┼╝e by─ç r├│wnie┼╝ u┼╝ywany do ustawienia tonu witryny od samego pocz─ůtku.

Animacja ładowania konsoli przez Andrew Tunnecliffe

Na przyk┼éad, je┼Ťli jeste┼Ť koderem, animacja ┼éadowania konsoli Andrew Tunnecliffe zapewni odpowiedni─ů atmosfer─Ö. Jest oldskulowy, brutalnie prosty i idealnie pasuje do ka┼╝dego osobistego portfela programisty.

Falling Numbers Thibault Jan Beyer

Je┼Ťli masz na my┼Ťli projekt oparty na statystykach lub danych, Falling Numbers Thibaulta Jana Beyera to dobry pocz─ůtek dozna┼ä narracyjnych. Animacja rozpoczyna si─Ö od malej─ůcych liczb, kt├│re ostatecznie uderzaj─ů o ziemi─Ö i otwieraj─ů g┼é├│wny ekran. Ma geometryczny urok wzbogacony o cyfrowe przyprawy.

Nie mniej wa┼╝ny

Dla wielu os├│b Stan Lee zawsze b─Ödzie ÔÇ×nerdy bratem Bruce’a LeeÔÇŁ. Dla nas jest ikon─ů stoj─ůc─ů za wszech┼Ťwiatem, w kt├│rym dobro zwyci─Ö┼╝a z┼éo, i na zawsze pozostanie w naszych sercach.

Marvel Ekran powitalny Matta Feinsteina

Marvel Splash Screen Matta Feinsteina nie jest ho┼édem, ale spodoba si─Ö wszystkim fanom superbohater├│w. Tytu┼é m├│wi sam za siebie. Jego animacja powitalna ma cudown─ů komiczn─ů atmosfer─Ö. Jest to replika sekwencji otwieraj─ůcej filmy z Marvel co wygl─ůda niesamowicie.

Jak zrobi─ç plusk

Ekrany powitalne mog─ů by─ç u┼╝ywane jako alternatywa dla ┼éadowarek, chyba ┼╝e s─ů one oczywi┼Ťcie ci─Ö┼╝kie. Niestety wci─ů┼╝ s─ů ludzie, kt├│rzy traktuj─ů je zbyt powa┼╝nie i staraj─ů si─Ö przekszta┼éci─ç w pe┼éni─Ö akcji.

Ekrany powitalne w projektowaniu stron s─ů skuteczne, o ile s─ů szybkie, kr├│tkie, lekkie i bezpo┼Ťrednio do celu. Oczywi┼Ťcie daj─ů ci pe┼ény ekran, aby pokaza─ç sw├│j geniusz. Nadal musisz kontynuowa─ç swoj─ů pierwotn─ů misj─Ö. S─ů to plamy, kt├│re powinny wzbudzi─ç zainteresowanie i natychmiast zmieni─ç pa┼ék─Ö w bardziej ekscytuj─ůce rozwi─ůzanie.