Zawartość
- 01. Dodaj kod do tagu body swojej strony
- 02. Stylizacja wyświetlacza
- 03. Wyświetlanie usterki
- 04. Trzymaj wszystko
- 05. Uruchamianie usterki
- 06. Powrót do normalności
- Kup bilet na Generate New York już teraz
Świetnym sposobem na przyciągnięcie uwagi - i utrzymanie jej - jest stworzenie układu strony internetowej, który będzie prezentował Twoje talenty od samego początku (przyzwoity kreator witryn może pomóc w tworzeniu). Witryna ukraińskiej agencji internetowej Vintage jest tego doskonałym przykładem, która przyciąga do swojego portfolio projektów VR dzięki przyciągającemu wzrok połączeniu pulsującego logo zbudowanego z cząstek szkła i uroczego kawałka usterki, który aktywuje się po najechaniu kursorem.
- Animacja internetowa: kod nie jest wymagany
Prosty efekt usterki użyty oszczędnie może nadać Twojej witrynie dodatkowy, istotny element wizualny, i jest zaskakująco łatwy w implementacji. Oto jak to zrobić.
Masz na myśli złożoną stronę internetową? Upewnij się, że Twój hosting sprosta zadaniu. I chroń swoje pliki projektowe w chmurze.
Pobierz pliki w tym samouczku.
01. Dodaj kod do tagu body swojej strony
Tworzenie prostego efektu usterki można wykonać na wiele różnych sposobów. Tutaj zrobimy to, umieszczając animowany GIF na górze tekstu, który będzie włączany i wyłączany na wyświetlaczu. Najpierw dodaj ten kod do tagu body swojej strony.
div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>
02. Stylizacja wyświetlacza
Treść będzie używać określonego kroju pisma z Google Fonts o nazwie Work Sans. Chwyć stamtąd link i umieść go w sekcji głównej; następnie dodaj CSS do znaczników stylu lub do oddzielnego pliku CSS. Strona jest czarna z białym tekstem, a oprawka jest stylizowana na tekst.
body {background: # 000; rodzina czcionek: „Work Sans”, sans-serif; kolor: #fff; } #holder {font-size: 6em; szerokość: 500px; wysokość: 300px; margines: 0 auto; pozycja: względna; }
03. Wyświetlanie usterki
Efekt usterki będzie obrazem tła umieszczonym bezpośrednio nad tekstem. Ważną częścią jest to, że staje się niewidoczny przez zmniejszenie krycia do zera, dzięki czemu nie pojawia się, dopóki użytkownik nie wejdzie w interakcję z tekstem.
#glitch {pozycja: bezwzględna; góra: 0; po lewej: 0; indeks z: 10; szerokość: 100%; wysokość: 100%; tło: url (glitch.gif); krycie: 0; }
04. Trzymaj wszystko
Dodaj tagi script na końcu sekcji body i utwórz w pamięci podręcznej odniesienie do elementu div „glitch” w dokumencie. Następnie zmienna o nazwie „over” jest ustawiana na false. Będzie to włączane i wyłączane, gdy użytkownik przesunie się po tekście.
var gl = document.getElementById ("usterka"); var over = false;
05. Uruchamianie usterki
Funkcja glitch jest wywoływana, gdy mysz przesuwa się po tekście. Jeśli usterka nie działa, to widoczność usterki jest włączana i wyłączana po półtorej sekundy.Możesz z tym poeksperymentować i użyć liczby losowej, aby uczynić ją bardziej nieprzewidywalną.
funkcja glitch () {if (over == false) {gl.style.opacity = "1"; setTimeout (function () {normal ();}, 1500); }}
06. Powrót do normalności
Efekt usterki nie powinien się utrzymywać, ponieważ byłby zbyt irytujący dla użytkownika, ale jako element interaktywny działa dobrze. W tym przypadku kod resetuje krycie z powrotem do zera, aby nie było widoczne nad tekstem.
function normal () {gl.style.opacity = "0"; }
Kup bilet na Generate New York już teraz
Trzydniowe wydarzenie poświęcone projektowaniu stron internetowych Generate New York powraca. W dniach 25-27 kwietnia 2018 r. Głównymi prelegentami są: Dan Mall z SuperFriendly, konsultant ds. Animacji internetowych Val Head, pełnoprawny programista JavaScript Wes Bos i nie tylko. Jest też cały dzień warsztatów i cennych okazji do nawiązywania kontaktów - nie przegap tego. Zdobądź swój bilet Generuj już teraz.
Ten artykuł został pierwotnie opublikowany w numerze 270 magazynu poświęconego kreatywnemu projektowaniu stron internetowych Web Designer. Kup numer 270 tutaj lub zasubskrybuj Web Designera tutaj.
