Мазмун
- 01. Баракчаңыздын тулку тегине кодду кошуңуз
- 02. Дисплейди стилдөө
- 03. Мүчүлүштүктү көрсөтүү
- 04. Бардыгын кармаңыз
- 05. Иштетүү
- 06. Кадимкидей абалга
- Нью-Йоркту жаратуу үчүн билетиңизди азыр алыңыз
Көңүл буруунун жана аны кармануунун мыкты жолу - бул сиздин талантыңызды сырттан көрсөткөн веб-сайттын макетин түзүү (татыктуу веб-сайт куруучу курулушка жардам берет). Украина веб агенттигинин Vintage сайты анын айнек бөлүкчөлөрүнөн курулган пульсациялуу логотиптин көзгө урунган айкалышы жана кыймылдаткычта иштей турган мүчүлүштүктөр менен VR дизайн портфолиосуна тартылгандыгынын мисалы болуп саналат.
- Веб анимациясы: Код талап кылынбайт
Үнөмдүү колдонулган жөнөкөй мүчүлүштүктөрдүн таасири сиздин сайтка көздүн жоосун алган кошумча кызыгууну жаратат жана аны ишке ашыруу оңой. Бул жерде аны кантип жасоого болот.
Татаал веб-сайт барбы? Веб-хостинг тапшырмага ылайыктуу экендигин текшериңиз. Дизайн файлдарыңызды булут сактагычта сактаңыз.
Файлдарды жүктөп алыңыз бул окуу куралы үчүн.
01. Баракчаңыздын тулку тегине кодду кошуңуз
Жөнөкөй мүчүлүштүктөрдү жаратуу ар кандай жолдор менен жасалышы мүмкүн. Бул жерде тексттин үстүнө анимацияланган GIF орнотуп, дисплейде күйгүзүлүп-өчүрүлөт. Алгач, бул кодду баракчаңыздын тулку тегине кошуңуз.
div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>
02. Дисплейди стилдөө
Мазмунда Google Fonts'тун Work Sans деп аталган белгилүү бир шрифти колдонулат. Шилтемени ошол жерден алып, баш бөлүмүңүзгө жайгаштырыңыз; андан кийин CSSти стилдин тегдерине же өзүнчө CSS файлына кошуңуз. Баракча ак түстөгү кара түстө жасалып, ээси текстке ылайыкташтырылган.
body {background: # 000; font-family: 'Work Sans', sans-serif; color: #fff; } # holder {font-size: 6em; туурасы: 500px; бийиктиги: 300px; маржа: 0 авто; кызмат: салыштырмалуу; }
03. Мүчүлүштүктү көрсөтүү
Глитфикалык эффект тексттин жогору жагына жайгаштырылган фондук сүрөт болот. Бул жерде маанилүү бөлүгү, колдонуучу текст менен иштешмейинче көрүнбөй тургандай кылып, тунук эместигин нөлгө чейин төмөндөтүп, көзгө көрүнбөйт.
#glitch {абалы: абсолюттук; top: 0; left: 0; z-индекс: 10; туурасы: 100%; бийиктиги: 100%; фон: url (glitch.gif); тунуктук: 0; }
04. Бардыгын кармаңыз
Негизги бөлүмдүн аягына скрипт тегдерин кошуп, документтеги 'glitch' div жөнүндө кэш шилтемесин түзүңүз. Андан кийин 'over' деген өзгөрмө жалганга коюлган. Колдонуучу тексттин үстүнөн өткөндө, бул күйгүзүлөт жана өчүрүлөт.
var gl = document.getElementById ("glitch"); var over = false;
05. Иштетүү
Гитче функциясы чычкан тексттин үстүнөн жылганда чакырылат. Эгерде мүчүлүштүк иштебей жатса, анда глиттин көрүнөө функциясы күйгүзүлүп, ал бир жарым секунддан кийин өчүрүлөт.Бул нерсени байкап көрүп, күтүүсүз кылуу үчүн кокустук санды колдонсоңуз болот.
function glitch () {if (over == false) {gl.style.opacity = "1"; setTimeout (function () {normal ();}, 1500); }}
06. Кадимкидей абалга
Мүчүлүштүктөрдүн таасири колдонуучуга өтө эле тажатма болуп калбашы керек, бирок интерактивдүү элемент катары ал жакшы иштейт. Бул жерде текст тунуктукту тексттин жогору жагында көрүнбөй тургандай кылып нөлгө кайтарат.
function normal () {gl.style.opacity = "0"; }
Нью-Йоркту жаратуу үчүн билетиңизди азыр алыңыз
Үч күндүк веб-дизайн иш-чарасы Generate New York кайтып келди. 2018-жылдын 25-27-апрелинде болуп, баш сөз сүйлөөчүлөргө SuperF Friendly's Dan Mall, веб-анимация боюнча консультант Вал Хед, JavaScriptтин толук стекстин иштеп чыгуучусу Вес Бос жана башкалар кирет. Ошондой эле семинарлардын толук күнү жана баалуу тармактык мүмкүнчүлүктөр бар - аны өткөрүп жибербеңиз. Generate билетин азыр алыңыз.
Бул макала алгач Web Designer чыгармачыл веб-дизайн журналынын 270-санында жарыяланган. 270-чыгарылышын ушул жерден сатып алыңыз же бул жерде Веб Дизайнерге жазылыңыз.
