animations CSS

Css bandhiga

Xigasho:Barnaamijka Online

Waxaa jira barnaamijyo badan oo aad wax ka beddeli karto, abuuri karto montages ama xitaa abuuri karto animations, mar kasta oo ay jiraan softwares badan oo ku dara noocyadan mashaariicda is-dhexgalka. Maqaalkan kaliya maaha inaan ku baro adduunka animations, laakiin sidoo kale waxaan ku bari doonaa saaxiib cusub.

Sida aad si fiican u ogtahay, adduunka kumbuyuutarka waxaa ka buuxa amarro iyo qalab waxtar leh oo loogu talagalay horumarinta boggaga internetka ama warbaahinta internetka, kuwaas oo hadda wada nool. Nala joog oo ka hel casharkan cusub qaab kale oo aad ku kordhin karto heerkaaga xisaabinta iyo isdhexgalka.

Waa maxay animations?

Dunida animations

Xigasho: Dhamaan ciyaartoyda

Waxaan rabnaa inaad si buuxda u gashid casharrada, laakiin tan, waxaa lagama maarmaan ah in la galo adduunka animations ama waxa ku jira naqshadeynta garaafka, adduunka naqshadeynta isdhexgalka. 

Animations sidoo kale waa qayb ka mid ah aduunka maqalka muuqaalka ah, dhab ahaantii waxba ma noqonayaan haddii ama sababtoo ah waxay soo bandhigaan maqal iyo muuqaal dhaqdhaqaaqa. Sababtan awgeed, marka aan ka hadalno "animation", waxaan tixraacnaa waxa aan caan ku nahay "kartoons".

Sida kor lagu soo koobay, animation waxay ka soo baxdaa awoodda ay u leedahay in ay dhaqdhaqaaqa wax u siiso, kiiskan kartoonada. Laakin sidee loo gaaray dhammaan dhaqdhaqaaqyadaas?Hagaag, shaki la'aan, waxay ka soo baxaan waxa aan ugu yeerno, taxanaha sawirada ama sawirada in iyaga oo si isdaba-joog ah loo dalbado, midba midka kale ka dib, ay u suurtagasho in ay abuuraan dhaqdhaqaaq la aamini karo oo indhahayaga hortooda ah, kaas oo is amaahinaya oo galaya ciyaarta dhalanteedka muuqaalka ah.

Markii hore, animations-kii ugu horreeyay waxaa lagu nashqadeeyay xaashiyo, mid kasta oo ka mid ah, dabeecadda firfircoon ayaa lagu sawiray tillaabooyin, marka dhammaadka xaashida la gaaro, mid mid ayaa si degdeg ah loogu gudbay si loo gaaro saameynta dhaqdhaqaaqa. sawirid.

Noocyada animation

Waxaa jira noocyo kala duwan oo animation ah:

Kartoon ama animation-dhaqameed

Habkani waxa uu ka kooban yahay siinta dhaqdhaqaaqa qaab-dhismeedka protagonist qaab ahaan. Bilowgii, markii aysan jirin hab ku filan oo maqal-muuqaal ah, waxaa lagu fulin jiray sawiridda iyo rinjiyeynta jir kasta (oo ay ku jiraan asalka, marxaladda ama asalka animation-ka), si hadhow loogu duubo waxa aan u naqaanno cajalad filim.

Jooji dhaqaaq

Jooji Motion waa farsamo animation ah oo aan shaqo ku lahayn kartoonnada. Intaa waxa dheer, ujeeddadeeda ugu weyni waa in ay ku ekaato dhaqdhaqaaqyada walxaha dhabta ah ee gebi ahaanba taagan, waxaana loo qaybiyaa laba weji: animation of Dhoobo ama dhoobo iyo animation walxo adag.

Pixelation

Pixelation waa farsamo ka timaadda Stop Motion waxayna ka kooban tahay ku shaqaynta shay aan ahayn caruusadaha ama moodooyinka, laakiin shay ama dad caadi ah. Walxaha waxaa la sawiraa dhowr jeer oo wax yar ku beddel jir kasta.

Rotoscopy

Waxay ka kooban tahay sawirka tooska ah ee sawir kale, sida raadinta sawirka sawir kale ama qof dhab ah. Waxaa loo tixgeliyaa horudhac mocap, taas oo ah, qabashada dhaqdhaqaaqa loo isticmaalo in lagu sameeyo jilayaasha dhijitaalka ah ee adduunka shaneemada.

Animation by cutouts ama gooyay animation

Waa farsamo ka kooban tirooyinka jarista, tirooyinkan waxaa lagu matali karaa warqad ama sawirro. Jidhka jilayaasha ayaa lagu dhisay iyadoo lagu salaynayo goyn iyo dhaqdhaqaaq iyo animation ka soo baxa beddelka goynta la sheegay.

3d animation

Animation-ka 3D wuxuu ka yimid barnaamij tafatire, kaas oo u oggolaanaya jilitaanka iyo animations in la fuliyo. Labadan nooc dhexdooda, iftiin wanaagsan, dhaqdhaqaaqa kamaradaha iyo saamaynta gaarka ah ayaa soo galaya.

Hadda waxaa sidoo kale jira farsamooyin kale sida: rinjiyeynta muraayadda, animation-ka ciidda, shaashadda gujas iyo rinjiyeynta on celluloid. 

Waa maxay CSS?

Css interface ee barnaamijka

Xigasho: Naqshadaynta Shabakadda Rosario Fadhiga Studio

Hadda oo aad wax yar ka taqaanno adduunka animations, waa waqtigii aan ku bari lahayn adduunka gaabinnada CSS.

Soo koobis CSS, tixraac " xaashida qaabka cascading ". Waxay ka kooban tahay luqad loo isticmaalo qaybta naqshadeynta iyo soo bandhigida boggaga internetka, si ama si fiican loo fahmo, waa qalab iyo amarro taxane ah oo mas'uul ka ah soo bandhigida bogga internetka sida aan u aragno marka ugu horeysa. waqti markii la abuuray. Waxay si wadajir ah ula shaqeeyaan qalabka HTML (oo laga soo abaabulay nuxurka boggaga).

Magaceeda waxaa lagu go'aamiyaa tirada xaashida ay ka kooban tahay oo mid ka mid ah wuxuu dhaxlaa hanti ama astaamo kuwa kale. Taasi waa, waxaad ku shaqayn kartaa template blog fudud, laakiin markaad rabto inaad habayso muuqaalka goobta waxaad u baahan doontaa inaad hirgeliso CSS taas oo ay weheliso CMS wanaagsan waxay kaa caawin doontaa inaad kor u qaaddo gaadhista macluumaadkaaga.

Maxay CSS u tahay?

CSS, waxaad habayn kartaa boggaaga, taas oo ah, waxaad u sheegi kartaa boggaaga shabakadda sida aad rabto inaad u hesho dhammaan macluumaadka si daaweeyaha ay u sahlanaato in la xakameeyo oo faa'iido leh isla waqti isku mid ah. Halkan geli dhammaan amarrada walxaha qaarkood ee qayb ka ah qaabka ama naqshadda bogga shabakadda, tusaale ahaan, xarfaha, midabada, cabbirka iwm. 

Caadi ahaan, si aad si fiican u fahamto waxa qalabkani ku saabsan yahay, khabiirada suuqgeynta dhijitaalka ah ayaa ah kuwa ugu horreeya ee wax ka fahma arrintan maadaama ay yihiin kuwa gacanta ku haya.

Ku noolow CSS

Hagaag, hadda oo aad wax yar ka ogtahay adduunka animations iyo CSS. Hadda waa waqtigii la bilaabi lahaa casharrada.

Animations CSS waxay kuu oggolaanayaan inaad dhaqaajiso kala-guurka u dhexeeya hal qaab CSS iyo mid kale. animationsani waxay ka kooban yihiin laba qaybood: a qaabka kaas oo qeexaya animation CSS iyo qayb ka mid ah looxyada taas oo tilmaamaysa xaaladdeeda bilawga ah iyo tan u dambaysa, iyo sidoo kale qodobbada dhexe ee suurtogalka ah ee ku jira.

Mid kasta oo ka mid ah animations-kan wuxuu leeyahay faa'iidooyin taxane ah:

  • Isticmaalkeedu aad bay ugu fududahay animations fudud, waad samayn kartaa xitaa adigoon aqoon u lahayn Javascript.
  • Animation-ku si sax ah ayay u soo bandhigayaan, xitaa kombiyuutarrada tamarta yar.
  • In lagu xakameeyo browserka, waxay u ogolaataa in la wanaajiyo waxqabadkiisa iyo hufnaantiisa, sidaas awgeed hoos u dhigista inta jeer ee iyo fulinta tabsyada si aysan u muuqan.

Dejinta animation

Si loo bilaabo animation, marka hore waa inaan habayn doonaa. Si tan loo sameeyo, waxaan aadi doonaa guriga animation iyo in ay hoos - hantidooda. Qalabkani wuxuu noo ogolaanayaa inaan habeyno labadaba laxanka iyo muddada animation-ka oo aan xitaa isku xigxiga.

Hanti-hoosaadyadu waa:

animation - dib u dhac

Waqtiga dib u dhigista inta u dhaxaysa daqiiqada curiyaha la raro iyo bilowga taxanaha animation.

animation - jihada

Waxay tusinaysaa in animationku uu dib ugu laabanayo qaabka bilawga ah ee dhamaadka isku xigxiga ama in uu ka bilaabmayo bilowga marka uu gaadho dhamaadka.

animation - duration

Waxay tusinaysaa wakhtiga ay animationku ku qaadanayso dhamaystirka wareeggiisa (muddada)

animation - soo noqnoqoshada - tirinta

Inta jeer ee lagu celceliyo. Waxaan tilmaami karnaa aan lahayn inuu ku celiyo animation-ka si aan xad lahayn.

animation - magac

Waxa loo isticmaalaa in lagu qeexo magaca qeexaya mid kasta oo ka mid ah shaxanka animation-ka.

animation - ciyaar - gobolka

Ku ogolanaya in aad hakiso oo aad dib u bilowdo taxanaha animation.

animation - waqti- shaqada

Waxay tusinaysaa laxanka animation-ka, taas oo ah, sida loo tuso xayndaabka animation-ka, taas awgeed, qalooca dardargelinta ayaa la aasaasay.

animation - buuxin - hab

Wuxuu qeexayaa waxa qiimayaasha guryaha ay yeelan doonaan ka dib marka animationku dhamaado.

Ku hagaaji tixda oo leh xayndaabyo

Mar haddaynu habaysanay wakhtiga, magac-u-yaalka iwm. Waa markii aan bixin lahayn muuqaal ama dareen animation-kayaga.

Si tan loo sameeyo, waxaanu samayn doonaa laba qaybood oo cusub oo aan isticmaalno qaanuunka @keyframes. Tani, jir kastaa wuxuu qeexayaa sida curiye kasta loo helo inta lagu jiro taxanaha animation.

Si loo tilmaamo waqtiga iyo laxanka, qaabka loo isticmaalo boqolkiiba iyo ka iyo ilaaThanks to this, waxaan ku tusi karnaa marka bilawgu dhaco 0% iyo dhamaadka 100%.

Qaabka iyo animation qoraalka

Si aad ugu darto fareemyo badan oo aad qoraal ku noolaysiiso, waxaad u baahan tahay inaad codsato cabbir ka weyn farta madaxa si madaxu u kordho marka uu dhaqaaqo wakhti go'an, ka dibna hoos ugu dhaco cabbirkiisii ​​asalka ahaa ka dib. Tan waxaan u samayn doonaa koodka soo socda:

75% font - cabbirka: 300%; calaamad - bidix: 25%; ballac: 150%;

Koodhkan, waxaanu u soo jeedinaynaa browserka in 75% ee isku xigxiga, madaxu uu leeyahay margin bidix 25% iyo cabbir 200% leh ballac 150%.

Animation ku celi

Si aad ugu celiso animation, waxaad u baahan tahay inaad isticmaasho hantida soo socota animation - soo noqnoqoshada - tirinta waana inaan tilmaannaa inta jeer ee aan rabno in lagu celiyo. Waxaan sidoo kale isticmaali karnaa aan lahayn si had iyo jeer loogu celceliyo.

Gabagabo

Sidaad aragteen, CSS-ta waxaad ku abuuri kartaa mashruucyo firfircoon, waxaadna geli kartaa adigoo raacaya tillaabooyinka aan ku siinay. Haddii aad sii waddo inaad wax weydiisato oo aad naftaada u sheegto, waxaad ogaan doontaa inay jiraan doorashooyin badan oo noo bannaan.

Horay ma u dhiiratay?


Nuxurka maqaalka wuxuu u hogaansamayaa mabaadi'deena anshaxa tifaftirka. Si aad u soo sheegto khalad guji Halkan.

Noqo kuwa ugu horreeya ee faallo bixiya

Ka tag faalladaada

cinwaanka email aan la daabacin doonaa.

*

*

  1. Masuul ka ah xogta: Miguel Ángel Gatón
  2. Ujeedada xogta: Xakamaynta SPAM, maaraynta faallooyinka.
  3. Sharci: Oggolaanshahaaga
  4. Isgaarsiinta xogta: Xogta looma gudbin doono dhinacyada saddexaad marka laga reebo waajibaadka sharciga ah.
  5. Kaydinta xogta: Macluumaadka ay martigelisay Shabakadaha Occentus (EU)
  6. Xuquuqda: Waqti kasta oo aad xadidi karto, soo ceshan karto oo tirtiri karto macluumaadkaaga.