Садржај
- 01. Додајте код на ознаку тела ваше странице
- 02. Стилизовање екрана
- 03. Приказивање грешке
- 04. Држи све
- 05. Покретање проблема
- 06. Повратак у нормалу
- Набавите карту за Генерате Нев Иорк одмах
Одличан начин да привучете пажњу - и задржите је - је да направите изглед веб странице који изнова приказује ваше таленте (пристојан градитељ веб страница може вам помоћи у изради). Веб-сајт украјинске веб агенције Винтаге је сјајан пример за то, увлачећи вас у свој портфељ ВР дизајна са привлачном комбинацијом пулсирајућег логотипа изграђеног од честица стакла и љупког глитцха који се активира при лебдењу.
- Веб анимација: Није потребан код
Једноставан глитцх ефекат који се штедљиво користи може вашој веб локацији пружити витални додатак визуелног интереса, а изненађујуће је једноставан за примену. Ево како то да урадите.
Имате на уму сложену веб страницу? Уверите се да ваш веб хостинг одговара том задатку. И заштитите своје дизајнерске датотеке на складишту у облаку.
Преузмите датотеке за овај водич.
01. Додајте код на ознаку тела ваше странице
Стварање једноставног глитцх ефекта може се обавити на толико различитих начина. Овде ћемо то урадити тако што ћемо имати анимирани ГИФ преко врха текста, који ће се укључивати и искључивати на екрану. Прво додајте овај код у ознаку тела ваше странице.
див ид = "холдер" онмоусеовер = "глитцх ()"> див ид = "глитцх"> / див> ВЕБ бр> ПРОДУЦТ- бр> ИОН / див>
02. Стилизовање екрана
Садржај ће користити специфични фонт из Гоогле фонтова под називом Ворк Санс. Ухватите везу одатле и ставите је у главу; затим додајте ЦСС или у стилске ознаке или у засебну ЦСС датотеку. Страница је црна са белим текстом, а држач је обликован за текст.
тело {позадина: # 000; породица фонтова: ’Ворк Санс’, санс-сериф; боја: #ффф; } #холдер {фонт-сизе: 6ем; ширина: 500пк; висина: 300пк; маржа: 0 ауто; положај: сродник; }
03. Приказивање грешке
Ефекат грешке биће слика у позадини која се поставља директно на врх текста. Овде је најважније да се учини невидљивим смањивањем непрозирности на нулу, тако да се не приказује док корисник не ступи у интеракцију са текстом.
#глитцх {позиција: апсолутно; топ: 0; лево: 0; з-индекс: 10; ширина: 100%; висина: 100%; позадина: урл (глитцх.гиф); непрозирност: 0; }
04. Држи све
Додајте ознаке скрипти на крај одељка тела и креирајте кеширану референцу на „глитцх“ див у документу. Тада је променљива са именом 'овер' постављена на фалсе. Ово ће се укључити и искључити када се корисник помери преко текста.
вар гл = доцумент.гетЕлементБиИд ("грешка"); вар преко = нетачно;
05. Покретање проблема
Функција глитцх се позива када се миш пређе преко текста. Ако грешка не ради, видљивост грешке је укључена и искључена је након једне и по секунде.Можете експериментисати са овим и користити случајни број да бисте га учинили непредвидљивијим.
функција глитцх () {иф (овер == фалсе) {гл.стиле.опацити = "1"; сетТимеоут (фунцтион () {нормал ();}, 1500); }}
06. Повратак у нормалу
Ефекат квара не би требало да остане, јер би био превише досадан кориснику, али као интерактивни елемент добро функционише. Овде код ресетује непрозирност на нулу, тако да није видљив на врху текста.
функција нормална () {гл.стиле.опацити = "0"; }
Набавите карту за Генерате Нев Иорк одмах
Вратио се тродневни догађај веб дизајна Генерате Нев Иорк. Од 25. до 27. априла 2018. године, међу главним говорницима су Дан Малл компаније СуперФриендли, саветник за веб анимацију Вал Хеад, ЈаваСцрипт програмер Вес Бос и други. Ту су и целодневне радионице и драгоцене могућности умрежавања - не пропустите. Набавите своју Генерате карту одмах.
Овај чланак је првобитно објављен у броју 270 часописа Цреативе Веб Десигн Веб Десигнер. Купите издање 270 овде или претплатите се на Веб Десигнер овде.
