Мазмұны
- 01. Өз парағыңыздың негізгі тегіне код қосыңыз
- 02. Дисплейді сәндеу
- 03. Ақаулықты көрсету
- 04. Барлығын ұстаңыз
- 05. Ақаулықты іске қосу
- 06. Қалыпты жағдайға оралу
- Generate New York-қа билетті қазір алыңыз
Назар аударудың және оны ұстаудың тамаша тәсілі - сіздің талантыңызды сырттан көрсететін веб-сайттың макетін жасау (лайықты веб-сайт жасаушы құрылыста көмектесе алады). Украина веб-агенттігінің 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 файлына қосыңыз. Парақ ақ мәтінмен қара түсті және ұстаушы мәтінге сәйкес келтірілген.
дене {өң: # 000; font-family: ‘Work Sans’, sans-serif; түс: #fff; } # holder {қаріп өлшемі: 6em; ені: 500px; биіктігі: 300px; маржа: 0 автоматты; позиция: салыстырмалы; }
03. Ақаулықты көрсету
Глитч эффект мәтіннің жоғарғы жағында орналасқан фондық сурет болады. Мұндағы маңызды бөлік - бұл пайдаланушының мәтінмен өзара әрекеттесуіне дейін көрінбеуі үшін бұлыңғырлықты нөлге дейін төмендету арқылы көрінбейтін етеді.
#glitch {жағдайы: абсолютті; жоғарғы: 0; сол жақта: 0; z-индексі: 10; ені: 100%; биіктігі: 100%; фон: url (glitch.gif); бұлыңғырлық: 0; }
04. Барлығын ұстаңыз
Негізгі бөлімнің соңына скрипт тегтерін қосып, құжаттағы ‘glitch’ div туралы кэштелген сілтеме жасаңыз. Сонда ’over’ деген айнымалы жалғанға орнатылады. Бұл пайдаланушы мәтінді ауыстырған кезде қосылады және өшіріледі.
var gl = document.getElementById («glitch»); var over = false;
05. Ақаулықты іске қосу
Глитч функциясы тышқан мәтін үстінен қозғалғанда аталады. Егер ақаулық жұмыс істемесе, онда глитчтің көріну мүмкіндігі қосылады және ол бір жарым секундтан кейін өшіріледі.Сіз эксперимент жасай аласыз және оны күтпеген ету үшін кездейсоқ санды пайдалана аласыз.
функция glitch () {if (over == false) {gl.style.opacity = «1»; setTimeout (function () {normal ();}, 1500); }}
06. Қалыпты жағдайға оралу
Ақаулық эффектісі қолданушыға қатты тітіркендіретіндіктен қалмауы керек, бірақ интерактивті элемент ретінде ол жақсы жұмыс істейді. Мұнда код мөлдірлікті нөлге қайтарады, сонда ол мәтіннің жоғарғы жағында көрінбейді.
функциясы қалыпты () {gl.style.opacity = «0»; }
Generate New York-қа билетті қазір алыңыз
Generate New York веб-дизайнының үш күндік іс-шарасы оралды. 2018 жылдың 25-27 сәуірі аралығында өткен тақырыптық спикерлерге SuperF Friendly's Dan Mall, веб-анимация бойынша кеңесші Val Head, JavaScript толық стекстері Wes Bos және басқалары кіреді. Сондай-ақ, семинарлардың толық күні және құнды желілік мүмкіндіктер бар - оны жіберіп алмаңыз. Generate билетіңізді қазір алыңыз.
Бұл мақала бастапқыда Web Designer веб-дизайн журналының 270 санында жарияланған. 270 шығарылымын мына жерден сатып алыңыз немесе веб-дизайнерге жазылыңыз.
