- - Kurkite žiniatinklio animacijos ir sąveikos modelius HTML 5 naudodami „Adobe Edge“

Sukurkite žiniatinklio animacijos ir sąveikos dizainus HTML 5 naudodami „Adobe Edge“

Naujausi žiniatinklio standartai, HTML5 ir CSS3kartu su „JavaScript“ tikrai sumažino laiką ir pastangas, reikalingus kuriant grafines, tekstines ir animacines svetaines. Naudodamiesi HTML5 galimybėmis, jums nebereikia rankiniu būdu rašyti daugialypės terpės turinio įdėjimo kodo, o CSS3 daro žiniatinklio vartotojo sąsajos elementus lankstesnius, patikimesnius ir, svarbiausia, lengviau tvarkomus. Jei ieškojote žiniatinklio kūrimo įrankio, leidžiančio maksimaliai išnaudoti naujausius žiniatinklio standartus, neįpareigojant rankiniu būdu įvesti kiekvieno UI elemento kodą, naujai paleistas „Adobe Edge“ tikriausiai yra tik tai, ko jums reikia.

„Adobe Edge“ buvo specialiai sukurtasvizualiųjų, žiniatinklio ir sąveikos dizainerių, kurie dažnai kovoja kurdami judesį internete ir animacinį turinį, naudodami HTML5, CSS3 ir „JavaScript“ žiniatinklio standartus. Iš esmės tai žiniatinklio judesio ir sąveikos kūrimo įrankis, skirtas kurti animuotą turinį naudojant HTML5, CSS3 ir „JavaScript“. Nors joje yra visos pagrindinės žiniatinklio vartotojo sąsajos elementų kūrimo, redagavimo, keitimo ir projektavimo priemonės, jis siūlo intuityvų animacijos choreografą, kad būtų galima lengvai sukurti ir pritaikyti animuotą turinį jūsų tinklalapyje. Be to, tai neprivalo pradėti naujo projekto nuo nulio, galite jame importuoti HTML failą, kad būtų įtrauktos naujos vartotojo sąsajos kompozicijos ir susitaupyti su esamais vartotojo sąsajos elementais, tokiais kaip, lentelė, teksto stiliai, vaizdo atspalviai, padėtis, šriftas, konteinerių derinimas ir kita.

Pagrindinė sąsaja yra padalinta į 3 skyrius. Kairėje šoninėje juostoje yra pasirinktos vartotojo sąsajos elementų kompozicijos priemonės, dešinėje šoninėje juostoje yra visi pagrindiniai žiniatinklio vartotojo elementų sąrašai, įskaitant šešėlio efektus, vaizdus, ​​tekstą, o apatinėje dalyje yra laiko juostos redaktorius choreografų animacijoms.

Krašto pagrindinis 2

Elementų juosta leidžia parodyti / paslėpti pasirinktuselementą ir užrakinkite jį, kad nebegalėtumėte redaguoti. Kai pagrindiniame ekrane pasirenkate elementą, jis iškart jį paryškina elementų srityje, kad būtų lengviau jį paslėpti ar užrakinti. Kai užveskite pelės žymeklį ant elemento, nurodyto elementuose, jis nurodo klasės pradmenis su pavadinimu, kad galėtumėte lengvai jį identifikuoti CSS faile.

elementai pagrindiniai

Rodoma ypatybių sritis kairėje pusėjekompozicijos įrankiai pasirinktam jūsų tinklalapio UI elementui. Pasirinkę galite pakeisti vietos dydį, neskaidrumą, teksto šriftų šeimą, dydį ir teksto stilius, nustatyti transformacijos kilmę, vaizdo pasukimą ir pan.

3 kraštas

Laiko juostos redaktorius suteikia galimybę peržiūrėti laiko juostąkiekvieno animacinio elemento. Jei kalbate apie vieną didžiulį CSS failą, spustelėkite filtro mygtuką, kad Elementų srityje būtų rodomi tik animuoti elementai, kad greitai galėtumėte redaguoti jų pozicijas, spalvas, dydį ir pan. Apatiniame kairiajame skydelio kampe turite mastelio keitimo mygtuką, kad padidintumėte laiko juostą. skirtų laiko ir visų animacinių elementų perėjimo efekto patikrinimui.

animaciniai elementai

Neskaitant suderinamumo tarp naršykliųanimacinis turinys visoms plačiai populiarioms interneto naršyklėms, įskaitant „Firefox“, „Chrome“, „Internet Explorer 9“, naudojant šį įrankį sukurtas žiniatinklio turinys sklandžiai veiks ir „iOS“ bei „Android“ platformose. Anot oficialios bendruomenės, „Edge Preview“ yra aktyviai kuriama ir netrukus bus atnaujinta su daugybe funkcijų. „Adobe Edge“ veikia „Windows Vista“ ir „Windows 7“.

Atsisiųskite „Adobe Edge“

Komentarai