Świetnym sposobem na przyciągnięcie uwagi użytkownika do witryny jest "ekran powitalny" lub "ekran intro". Jednak powodzenie jednego z nich jest bardzo trudne z jednego prostego powodu: ekrany powitalne łatwo drażnią użytkowników.
Ekrany powitalne mogą działać, jeśli pojawiają się szybko i są łatwe do zaakceptowania. Mogą być wizualnie uderzające i piękne i sprawić, że użytkownik będzie chciał przewinąć, aby dowiedzieć się więcej. Ten styl intra działa bardzo dobrze na stronach przewijających się po jednej stronie. Lub "styl bannerów" projektów internetowych, które stały się modne z tendencją do płaskiego wzornictwa. Bardzo przydatne może być również stworzenie ładnie wyglądającego stylu intro, który w tej chwili jest również w całości wściekły.
To, co chcę wam dzisiaj pokazać, to podstawowa metoda osiągnięcia tego efektu, którą można łatwo modyfikować, aby uzyskać ładnie wyglądające intra do stron internetowych.
Jeśli chcesz zobaczyć, co budujemy, jest tutaj demo. I możesz pobierz wszystkie pliki źródłowe tutaj.
Znacznik
Spróbujemy zachować znacznik dla tego bardzo prostego. W ten sposób można go faktycznie wdrożyć na wcześniej istniejących witrynach, a także nowych projektach.
Więc w zasadzie to, co chcemy zrobić, to dwa divy. Jeden z klasą powitania i inny z klasą opakowania . (Klasa opakowania może już istnieć w pewien sposób dla ciebie, jeśli implementujesz to w istniejącej już witrynie, więc może być konieczna zmiana tej nazwy klasy).
to jest to! To wszystko, czego potrzebujemy semantycznie. Ale oczywiście dodamy trochę obraźliwych treści i tytułów, abyśmy mieli coś do obejrzenia w naszym demo. Potrzebujemy również jakiegoś rodzaju strzałki, aby dodać ekran powitalny, aby pokazać użytkownikowi, że może on przewinąć w dół (ponieważ będzie to nasza metoda na zniknięcie ekranu intro i wprowadzenie głównej treści).
Oto prosty kod znaczników wchodzący w nasz tag body :
Lorem ipsum dolor sit amet, conitctetur adipisicing elit. Dolor, sapiente facere tempora ullam accusamus minus laborum porro odit sequi dolorum enim optio alias w nulla laudantium voluptatibus quibusdam quaerat provident eius quo perferendis voluptatem modi maiores cumque saepe quidem ducimus numquam et commodi cupiditate libero pariatur mollitia eveniet molestias debitis quia! Natus, minima, error, porro facere i perferendis consistatur necessitatibus id sapiente soluta veritatis magnam quasi ut cumque provident quidem nemo enim nesciunt nihil architecto in obcaecati nobis quam tenetur corrupti. Błąd, jest długi i słaby, co oznacza, że nie można go usunąć. Architecto, natus fuga non perferendis veritatis nihil repellat dolorum rerum quidem
Wyjaśnijmy więc, co dzieje się tutaj, w nieco bardziej szczegółowym temacie: zaczynamy od naszego div splash . Wewnątrz mamy tytuł i nasz wskaźnik przewijania (który tutaj jest obrazem strzałki, ale może być czymkolwiek, co chcesz, aby było oczywiste). Następnie zamykamy ten div i otwieramy kolejny z klasą otoki . Wewnątrz mamy właśnie ogólną treść strony, która będzie inna dla każdego przypadku, ale tutaj będzie to proste: tytuł, nawigacja, główny obszar treści i stopka. Następnie jQuery jest dołączany do interfejsu API Google, ponieważ będziemy go używać w celu uzyskania funkcjonalności, a na końcu dołączamy do innego pliku .js, który jest naszym własnym, w którym będziemy pisać nasz kod jQuery.
Możesz także zauważyć zanikanie nazwy klasy w obszarze ekranu powitalnego. Użyjemy tej klasy, aby dodać trochę fajnych animacji CSS3 do pewnych elementów i sprawić, że intro będzie potężniejsze. Oczywiście, jeśli spojrzysz teraz na wyniki, tak naprawdę to nie będzie nic, musimy teraz wszystko teraz stylizować. Mówiąc o tym, przejdźmy do CSS ...
Stylizacja
Ponownie spróbujmy zachować style proste i użyteczne. To wszystko jest zwykłym CSS. Przede wszystkim zacznijmy od nazwy klasy .fade-in. (Musi to być zadeklarowane u góry naszego pliku CSS, abyśmy mogli zadeklarować inne czasy opóźnień animacji na innych elementach poniżej).
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }.fade-in {opacity:0;-webkit-animation:fadeIn ease-in 1;-moz-animation:fadeIn ease-in 1;animation:fadeIn ease-in 1;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:0.3s;-moz-animation-duration:0.3s;animation-duration:0.3s;-webkit-animation-delay: 0.5s;-moz-animation-delay: 0.5s;animation-delay: 0.5s;}
Najpierw deklarujemy klatki kluczowe i wywołujemy naszą animację fadeIn. Przechodzi od 0 krycia do 1. Następnie kierujemy bezpośrednio nazwę klasy, określając, że ma 0 krycia. i wywołaj animację, którą właśnie określiliśmy, zrób ją jako ostatnią 0.3s i daj opóźnienie 0.5s.
Teraz spójrzmy na CSS potrzebny dla naszej strony powitalnej:
.splash { background: url('../img/splash-bg.jpg') center center;background-size: cover;background-attachment: fixed;position: fixed;top: 0;right: 0;bottom: 0;left: 0;min-height: 360px;z-index: 999;text-align: center;}
Wzywamy obraz tła (tutaj jest to tylko czarno-białe zdjęcie ulicy), na którym się koncentrujemy, upewniając się, że obejmuje on cały ekran w dowolnej wielkości i czyni go dołączonym - co oznacza, że " Nie ruszam się z przewijaniem. Następnie nadajemy mu "ustaloną" pozycję i określamy, że powinna ona znajdować się w odległości 0 od góry, z prawej, z dołu iz lewej strony, dlatego wypełnia całe okno przeglądarki. Damy mu minimalną wysokość, ponieważ to, co będziemy umieszczać w środku, będzie ustawione absolutnie. Upewnij się, że ma wysoki indeks z, ponieważ chcemy, aby pojawiał się nad resztą treści na stronie (która będzie teraz umieszczona bezpośrednio pod ekranem powitalnym, ponieważ ma ustaloną pozycję).
Proszę bardzo, to wszystkie style, które są rzeczywiście potrzebne, aby ekran powitalny pojawił się we właściwym miejscu na stronie. Wypełnianie ekranu, a przede wszystkim innych treści, bez zmiany przepływu strony. Teraz szybko podam ci resztę CSS, która głównie umieszcza tytuł we właściwym miejscu, dodaj miłą strzałkę skierowaną w dół, aby wskazać, że użytkownik powinien przewinąć. I wreszcie kilka podstawowych stylów strony i kilka zapytań o media:
html, body { width: 100%;height: 100%;}body { font: normal 1em/1.5em 'Open Sans', sans-serif; color: #333; margin-bottom: 20px; }.wrapper {max-width: 1000px;width: 90%;margin: 0 auto;}.splash-title {color: white;font-size: 3em;margin-top: 100px;text-shadow: 0 2px 10px #000;-webkit-animation-delay: 1s;-moz-animation-delay: 1s;animation-delay: 1s;}a.splash-arrow {color: white;font-size: 1.2em;position: absolute;bottom: 55px;left: 50%;margin-left: -25px;padding: 10px;width: 50px;height: 50px;font-weight: bold;-webkit-transition: all 0.1s ease;-moz-transition: all 0.1s ease;-o-transition: all 0.1s ease;transition: all 0.1s ease;-webkit-animation-delay: 1.5s;-moz-animation-delay: 1.5s;animation-delay: 1.5s;border: 3px solid white;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}a.splash-arrow:hover {text-decoration: none;bottom: 50px;}@media all and (max-width: 690px) {header h1 { width: 100%; text-align: center; }header nav { float: none; display: inline-block; margin: 0 auto; }.splash-title {font-size: 2em;}}@media all and (max-width: 480px) {.splash-title {font-size: 1.5em;}}
Mamy tutaj ogólne style nadwozia, niektóre najlepsze dopełnienia tytułu, w których opóźniamy także zanikanie animacji o kolejne pół sekundy. Więc ma własne wejście. Łącze ze strzałką jest ustawione absolutnie, aby zawsze znajdować się na środku i na dole ekranu. Występuje kolejne pół sekundy opóźnienia, które pojawiają się jako ostatnie na ekranie. Dodajemy niektóre przejścia CSS3, aby zmiany pozycji w stanie: hover były animowane. W końcu mamy kilka drobnych zmian w zapytaniach o media, aby wyglądały nieco ładniej na mniejszych ekranach. Ale oczywiście te style będą się zmieniać zgodnie z Twoim projektem.
jQuery
Tak jak zadeklarowaliśmy wcześniej, zrobimy plik o nazwie main.js w katalogu js . Wewnątrz tego będziemy pisać nasz jQuery, który powoduje, że ekran powitalny znika po przewinięciu lub po kliknięciu na link ze strzałką. Oto ona:
$(document).ready(function() {if($(".splash").is(":visible")) {$(".wrapper").css({"opacity":"0"} );} $ (". splash-arrow"). click (function () {$(".splash").slideUp("800", function() {$(".wrapper").delay(100).animate({"opacity":"1.0"} , 800);});});}); $ (okno) .scroll (function () {$(window).off("scroll");$(".splash").slideUp("800", function() {$("html, body").animate({"scrollTop":"0px"} 100); opóźnienie (100) .animate ({"krycie": "1.0"}, 800);});});
Przede wszystkim pakujemy nasze pierwsze kilka zdań w funkcję gotowego dokumentu , aby podjąć działanie tylko wtedy, gdy strona została w pełni załadowana. Tak więc na początek sprawdzamy, czy nasz ekran powitalny jest widoczny. Jeśli tak jest, sprawiamy, że opakowanie jest niewidoczne (więc nie mamy żadnego flashowania zawartości podczas ładowania obrazu w tle, a także po to, aby ostatecznie przejść do animacji po dotarciu na stronę). Następnie dodajemy funkcję do obsługi kliknięcia na strzałce. Jeśli więc użytkownik kliknie, ekran powitalny ślizga się (a zatem znika), a następnie animujemy stopień przezroczystości opakowania z powrotem na 1.
Ten mały blok kodu jest (prawie) taki sam, jaki będziemy używać zaraz po funkcji $ (window) .scroll . Tak więc, gdy użytkownik przewinie, podskakujemy plusk, a następnie animujemy go z powrotem na górę strony (aby użytkownik nie zaczął w połowie strony) i animować przezroczystość elementu opakowania. Dodajemy również w tym wierszu $ (okno) .off ("scroll"); to powstrzymuje okno od przewijania, kiedy nie chcemy tego. Kiedy użytkownik przewija najpierw, chcemy, aby animacja po prostu się wyłączyła, a nie przewinięcie strony. Ale gdy intro zniknie, strona przewinie się normalnie.
Wniosek
Masz więc bardzo proste (ale lekkie), ale eleganckie rozwiązanie, w którym ekran intro zostanie dodany do górnej części witryny i zniknie po przewinięciu lub gdy użytkownik kliknie określony element. Zapraszam do wzięcia tego kodu, użycia go i modyfikacji w celu dopasowania do twoich potrzeb.
Jak wspomniałem na początku, technika ta może być używana na wiele różnych sposobów, więc bądź kreatywny!