Բովանդակություն
- 01. Կոդ ավելացրեք ձեր էջի մարմնի պիտակի վրա
- 02. theուցադրման ոճավորում
- 03. Հայտնաբերում է անսարքությունը
- 04. Ամեն ինչ պահեք
- 05. Սխալ վազում
- 06. Վերադառնալ նորմալությանը
- Ստացեք ձեր տոմսը Generate New York- ի համար հիմա
Ուշադրություն գրավելու և այն պահելու հիանալի միջոց է ստեղծել կայքի դասավորություն, որը ցուցադրում է ձեր տաղանդները դրսից (պատշաճ կայք ստեղծողը կարող է օգնել կառուցելուն): Ուկրաինայի Vintage կայքի կայքէջը դրա հիանալի օրինակն է, որը ձեզ ներգրավում է իր VR դիզայնի պորտֆոլիոյում `ապակու մասնիկներից կառուցված զարկերակային լոգոտիպի և համեղ համադրությամբ համակցված համադրությամբ, որն ակտիվանում է սավառնելիս:
- Վեբ անիմացիա. Կոդ չի պահանջվում
Խնայողաբար օգտագործված պարզ էֆֆեկտը կարող է ձեր կայքին տալ տեսողական հետաքրքրության մի փոքր ավելորդ տեսք, և դա զարմանալիորեն հեշտ է իրականացնել: Ահա, թե ինչպես դա անել:
Մտքում կա՞ բարդ կայք: Համոզվեք, որ ձեր վեբ հոստինգը համապատասխանում է առաջադրանքին: Եվ ձեր դիզայնի ֆայլերը անվտանգ պահեք ամպային պահուստում:
Ներբեռնեք ֆայլերը այս ձեռնարկի համար:
01. Կոդ ավելացրեք ձեր էջի մարմնի պիտակի վրա
Պարզ անփոփոխ էֆեկտի ստեղծումը կարող է կատարվել շատ տարբեր ձևերով: Այստեղ մենք դա անելու ենք ՝ ունենալով անիմացիոն GIF տեքստի վերևում, որը միացված և անջատված է ցուցադրման մեջ: Սկզբից ավելացրեք այս կոդը ձեր էջի մարմնի պիտակի վրա:
div id = "կրող" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>
02. theուցադրման ոճավորում
Բովանդակությունը կօգտագործի հատուկ տառատեսակ Google տառատեսակներից, որը կոչվում է «Աշխատանքային առանց»: Վերցրեք հղումը այնտեղից և տեղադրեք այն ձեր գլխի բաժնում; ապա CSS- ն ավելացրեք կամ ոճի հատկորոշիչներին կամ առանձին CSS ֆայլ: Էջը սև է արվում `սպիտակ տեքստով, և կրողը ձևավորվում է տեքստի համար:
մարմին {ֆոն `# 000; font-family: 'Work Sans', sans-serif; գույնը ՝ #fff; } #holder {font-size: 6em; լայնությունը `500px; բարձրությունը `300px; լուսանցք ՝ 0 ավտոմատ; դիրքը ՝ հարաբերական; }
03. Հայտնաբերում է անսարքությունը
Անփոփոխ էֆեկտը լինելու է ֆոնային պատկեր, որը տեղադրված է անմիջապես տեքստի վերևում: Այստեղ կարևոր մասն այն է, որ այն անտեսանելի դառնա `անթափանցիկությունը զրոյի հասցնելով, որպեսզի այն չերևա, քանի դեռ օգտագործողը չի փոխազդում տեքստի հետ:
# խախուտ {դիրքը ՝ բացարձակ; վերև ՝ 0; ձախ: 0; z- ինդեքսը `10; լայնությունը `100%; բարձրությունը `100%; ֆոն ՝ url (glitch.gif); անթափանցիկություն ՝ 0; }
04. Ամեն ինչ պահեք
Մարմնի հատվածի վերջում ավելացրեք սցենարի պիտակներ և ստեղծեք փաստաթղթում պահված պահվածքը «glitch» div- ին: Այնուհետև «over» անունով փոփոխականը դրվում է false: Սա միացված և անջատված կլինի, երբ օգտագործողը տեղափոխվի տեքստի վրայով:
var gl = document.getElementById ("անսարքություն"); var over = false;
05. Սխալ վազում
Անփոփոխ գործառույթը կոչվում է, երբ մկնիկը շարժվում է տեքստի վրա: Եթե անսարքությունը չի աշխատում, ապա անսարքության տեսանելիությունը միացված է և այն մեկուկես վայրկյան անց անջատվում է:Դուք կարող եք փորձարկել սա և օգտագործել պատահական թիվ `այն ավելի անկանխատեսելի դարձնելու համար:
ֆունկցիայի անսարքություն () {if (over == false) {gl.style.opacity = "1"; setTimeout (գործառույթ () {նորմալ ();}, 1500); }}
06. Վերադառնալ նորմալությանը
Անփութության էֆեկտը չպետք է վառվի, քանի որ դա չափազանց տհաճ կլինի օգտագործողի համար, բայց որպես ինտերակտիվ տարր այն լավ է աշխատում: Այստեղ կոդը ծածկում է անթափանցիկությունը զրոյին, որպեսզի այն տեսանելի չլինի տեքստի վերևում:
գործառույթը նորմալ է () {gl.style.opacity = "0"; }
Ստացեք ձեր տոմսը Generate New York- ի համար հիմա
Generate New York վեբ դիզայնի եռօրյա միջոցառումը վերադարձավ: 2018 թ.-ի ապրիլի 25-27-ը ընկած ժամանակահատվածում, վերնագրերի բանախոսները ներառում են SuperFriendly's Dan Mall- ը, վեբ անիմացիայի խորհրդատու Val Head- ը, JavaScript- ի լրիվ բուրգի մշակող Ուես Բոսը և ավելին: Կա նաև սեմինարների մի ամբողջ օր և ցանցի արժեքավոր հնարավորություններ. Մի կարոտեք այն: Ստացեք ձեր Generate տոմսը հիմա:
Այս հոդվածն ի սկզբանե տպագրվել է Web Designer ստեղծագործական վեբ ձևավորման ամսագրի 270 համարում: Գնեք այստեղ 270 համարը կամ բաժանորդագրվել Web Designer- ին այստեղ.
