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.
