Мундариҷа
- 01. Ба теги бадани сафҳаи худ рамз илова кунед
- 02. Тарроҳии намоиш
- 03. Нишон додани беназмӣ
- 04. Ҳама чизро нигоҳ доред
- 05. Иҷрои садо
- 06. Бозгашт ба ҳолати муқаррарӣ
- Ҳоло чиптаи худро барои тавлиди Ню Йорк дастрас кунед
Усули хуби ҷалб кардани диққат ва нигоҳ доштани он - сохтани тарҳрезии вебсайтест, ки истеъдоди шуморо аз ғайр намоиш медиҳад (созандаи сазовори вебсайт метавонад дар сохтмон кумак кунад). Сомонаи Vintage вебсайти Vintage-и Украина намунаи олиест дар ин бора, ки шуморо бо портфели тарроҳии VR-и худ бо омезиши чашмраси тамғаи лаппиши аз зарраҳои шиша сохташуда ва каме беназири беназирие, ки дар hover фаъол мешавад, ҷалб мекунад.
- Аниматсияи веб: Рамз лозим нест
Таъсири оддии беназири истифодашуда метавонад ба сайти шумо каме шавқи зиёди визуалӣ диҳад ва татбиқи ин тааҷуб осон аст. Ин аст тарзи иҷро кардани он.
Вебсайти мураккабро дар назар доред? Боварӣ ҳосил кунед, ки хостинги вебии шумо ба вазифа мувофиқат мекунад. Ва файлҳои тарроҳии худро дар анбори абр бехатар нигоҳ доред.
Файлҳоро зеркашӣ кунед барои ин дастур.
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: 'Sans Work', sans-serif; ранг: #fff; } # holder {font-size: 6em; паҳнӣ: 500px; баландӣ: 300px; маржа: 0 худкор; мавқеъ: нисбӣ; }
03. Нишон додани беназмӣ
Эффектҳои беназмӣ тасвири замина хоҳад буд, ки бевосита дар болои матн ҷойгир карда мешаванд. Қисми муҳим дар ин ҷо он аст, ки он бо кам кардани ношаффофӣ ба сифр ноаён карда мешавад, то он даме ки корбар бо матн ҳамкорӣ накунад.
#glitch {мавқеъ: мутлақ; боло: 0; чап: 0; индекси z: 10; паҳнӣ: 100%; баландӣ: 100%; замина: url (glitch.gif); шаффофӣ: 0; }
04. Ҳама чизро нигоҳ доред
Ба охири қисмати бадан барчаспҳои скриптро илова кунед ва ба 'glitch' div дар ҳуҷҷат истиноди кэш эҷод кунед. Пас тағирёбанда бо номи 'over' ба false таъин карда мешавад. Вақте ки корбар аз болои матн мегузарад, ин фурӯзон ва хомӯш карда мешавад.
var gl = document.getElementById ("glitch"); var over = false;
05. Иҷрои садо
Ҳангоми ҳаракат дар болои матн функсия хато номида мешавад. Агар носозӣ иҷро нашуда бошад, пас намоии он фаъол карда мешавад ва пас аз якуним сония хомӯш карда мешавад.Шумо метавонед бо ин таҷриба гузаронед ва рақами тасодуфиро барои пешгӯинашавандатар истифода баред.
функсияи glitch () {if (over == false) {gl.style.opacity = "1"; setTimeout (function () {normal ();}, 1500); }}
06. Бозгашт ба ҳолати муқаррарӣ
Таъсири беназмӣ набояд боқӣ монад, зеро он барои корбар хеле нороҳат хоҳад буд, аммо ҳамчун унсури интерактивӣ он хуб кор мекунад. Дар ин ҷо, рамз шаффофиро ба сифр бармегардонад, то ки дар болои матн намоён набошад.
function normal () {gl.style.opacity = "0"; }
Ҳоло чиптаи худро барои тавлиди Ню Йорк дастрас кунед
Чорабинии серӯзаи тарроҳии веб Generate New York баргашт. Дар байни 25-27 апрели соли 2018, баромадкунандагон сарлавҳаҳо иборатанд аз DanFall SuperFriendly, мушовири веб аниматсия Val Head, таҳиягари пурраи JavaScript Wes Bos ва ғайра. Инчунин як рӯзи пурраи семинарҳо ва имкониятҳои арзандаи шабакавӣ мавҷуданд - инро аз даст надиҳед. Ҳоло чиптаи худро тавлид кунед.
Ин мақола аслан дар шумораи 270 маҷаллаи эҷодии тарроҳии Web Designer нашр шудааст. Нашри 270-ро аз ин ҷо харед ё дар инҷо ба Web Designer обуна шавед.
