35 dheeraad ah oo saameyn CSS ah oo loogu talagalay websaydhkaaga

Waxaan horeyba u daabacnay dhowr toddobaad kahor taxane ah saamaynta qoraalka CSS ee loogu talagalay hagaajinta soo bandhigida cinwaanka H2 alaabta ama cinwaanka gelitaanka adeegga ee lagu iibiyo websaydhka macaamiisha. Saameynta qoraalka CSS ee awood u leh inay siiso bartaas tayada ah ee aan raadineyno inaan ku qancino macaamilka oo nagu sii hayno faylalka muddo dheer.

Waxaan ku laabaneynaa liis kale oo weyn oo ah saameynta qoraalka CSS ee sida gaarka ah loogu talagalay in lagu soo bandhigo degel sida ugu wanaagsan ee suurtogalka ah. alaabta, adeegga, bogga soo degitaanka ama nooc kale oo mawduuc ah. 35 saamayn qoraal ah oo aadan seegi karin si aad u muujiso in naqshadeynta websaydhku maanta ay marayso heerkii ugu wanaagsanaa iyo inaannaan seegi karin tareenka si aan ula socono bilicsanaanta hadda jirta.

Saamaynta qoraalka aamusnaanta filimka

Saameyn qoraal oo gaar ah oo loo soo bandhigay inay tahay mid ku habboon nooc gaar ah oo mawduuc ah. Xigashooyin waa la tusi karaa si loo caddeeyo inaan fiiro gaar ah u leenahay qaabeynta degelkeenna ama tan macmiilka.

Kordhinta gelitaanka qoraalka CSS

Qoraalkan CSS-ka ee aan rasmiga ahayn wuxuu isku dayayaa inuu u kala sooco sidii ay ahayd oo kale furaha sirta ah ee silsilad. Hab aad u cajaa'ib badan oo lagu soo bandhigo qoraal loogu talagalay degel loogu talagalay mowduuc gaar ah.

Cassie

Una animation in svg taas macnaheedu waa miisaan aad u yar oo lagu soo bandhigayo qoraal lagu sameeyay dhowr midab. Waxay garaacaysaa jiritaanka qoraalkan oo waliba adeegsanaya JavaScript si loo siiyo sumadda gebi ahaanba.

Qoraalka sawirka hooska

Qoraalkan hooska ah ee firfircoon wuxuu leeyahay taabasho qurux badan oo gaar ah wuxuuna ka duwan yahay inta kale ee ku jirta liiska. Halkan waxaan ilaawnay JavaScript in lagu soo bandhigo wax aan ka badnayn lambarka CSS.

Qoraalka Morph

Qoraal animated ah oo ku jira JavaScript iyo CSS taas isu beddesha meerto oo leh midabyo neon ah. Websaydhada halka midabka asalka uu yahay madow ama cawl. Animation aad u siman u saamayn qoraal aad u kala duwan.

Kala-baxa qoraalka qoraalka

Qoraalkan waxaa loo tuuray dhaqan galkiisa ku muuji animation aad u jilicsan. Waxay kaloo leedahay JavaScript. Hal guji waxaad ku arki kartaa animation-ka lagu gaadhay saameyn qoraal aad u xiiso badan.

Animation Wave

Ku ruxrux animation qoraalka gudahiisa oo leh SVG. Mid ka mid ah qodobbada xiisaha leh ee tan Saamaynta qoraalka waxay ku jirtaa sawirka asalka iyo wejigiisa buuxiya mawjadda si uu si sax ah uga soo baxo.

Qoraalka xiisaha leh

Waxoogaa JavaScript ah waxay ku guuleystaan ​​saameyn qoraal taas oo ah xaraf kastaa wuxuu leeyahay qiime u gaar ah si ay ugu muuqato inay ka kooban tahay warqado istiikir ah oo kala duwan. Saameyn weyn oo loogu talagalay qoraalka hal-abuurka leh ee soo-bandhigga.

Saamaynta qiiqa

Saamaynta qiiqa weyn ee qoraalka taas ayaa si tartiib tartiib ah u sii lumaysa in gebi ahaanba la waayo. Waxaa loo isticmaali karaa in lagu garaaco ama lagu gujiyo oo qoraalku horteenna uumi u bixiyo. Maya JavaScript iyo lambar CSS aad u yar.

Saamaynta xumbada

Saamaynta qoraalka jQuery ee ina tusaysa sida loo abuuro saamaynta xumbo ee cinwaanka ah HTML. Saameyntu waa inay ka dhigto goobooyin ka soo baxa qoraalka gadaashiisa sidii inay yihiin biyo dhalaalaya. Aad u soo jiidasho leh.

Qoraalka buuxinta Animated

Saamayn qoraal animated ah oo font ku buuxisa sawirka asalka. Uma baahna JavaScript waxayna ku shaqaysaa oo keliya koodhka CSS. A animation aad u gaabis ah oo deggan oo qoraal ah oo kaamil noqon doona mawduucyo gaar ah oo loogu talagalay degel.

Qoraal animation ah CSS iyo HTML

A animation qoraalka fudud ee CSS iyo HTML oo ka dhigaya ereyadu waxay u dhacaan si qumman kor ka socda. Waxaan iska hilmaamaynaa JavaScript halkan si aan u dhameystirno animation toosan oo fudud oo aan duubni badan.

Sawirka qoraalka midabka

Halkan qoraalka ayaa lagu sawiray saameyn midab leh oo aad u layaab leh taasna waxay ku siin kartaa qoraalka arrimaha la xiriira qaan-gaarnimada ama dhallinyarada. Ugu dambayntii waa madhan tahay, halka farta lagu dhajiyay codad taxane ah oo firfircoon.

Qoraalka xiisaha leh ee SVG

Animation ah kaliya hal sekan wuxuu marayaa sawirka oo dhan ee xarfaha qoraalka animated ee SVG. Waxay leedahay xoogaa lambar JavaScript ah oo ay la socdaan CSS iyo HTML.

Qoraalka hooska

Hooska qoraalkaani wuxuu soo saarayaa qoto dheer midabyo dhalaalaya oo u eg sidii dukaan la dubo. Naafada kaliya ayaa ah in aan lagu hagaajin aaladaha mobilada.

Montserrat

CSS iyo animation HTML oo isu soo bandhigaysa hal-abuurkeeda iyo qaar midabyo u dhexeeya jaalle iyo casaan. Wixii adeegsi ah oo lagu go'aamiyay gaar ahaaneed ee animation-ka midabadaas oo u dhex maraya sawirka qoraalka.

Waxyeellada qarxa

Saamaynta qoraalka ah Ku qarxay qaybo badan in aan ka gaabin karno adigoo ka tagaya tilmaamaha jiirka oo maraya mid kasta oo ka mid ah xarfaha ereyga ka kooban. Saamayn indho qabasho leh, tayo sare leh oo qoraal ah oo adeegsata HTML, CSS iyo JavaScript.

Saamaynta qoraalka mawjadda

JavaScript la'aan, saamaynta qoraalka mawjadani waxay maamushaa in animation la dhigo runtii dhaqaajiya sawirka hore iyada oo loo marayo sawirka erayga. Isaga oo ku dhuftay shaqo la’aan shaki la’aan iyo saameyn weyn.

Animation GSAP

Sida filimo badan, dhammaan xarfaha sameeya cutub ayaa ka soo muuqan doona meel kasta si ay ugu dambeyntii u soosaaraan jumladaha iyagoo saameyn weyn ku leh animation. Aad u jilicsan mid ka mid ah saameynta qoraal indho qabad badan leh oo tayo sare leh oo ku jira liiska oo dhan. Muhiim u ah in maskaxda lagu hayo noocyada qaarkood ee shaqooyinka macaamiisha.

Animation qoraal midab leh

Una animation gaabis ah iyo dheecaan ah midab leh oo ku jira qoraalka maareynta gradient. In kasta oo ay xoogaa JavaScript leedahay, waxay badanaa ku saleysan tahay SCSS. Waa mid ka mid ah saameyntaas khafiifka ah, laakiin taasi waxay muujineysaa xarrago in la yaqaan sida loo doorto websaydhka. Ma noqon doonto mid aan la dareemin.

Saamaynta qoraalka aan macquul ahayn

El sanduuqa cas ee ku wareegsan qoraalka Waxay isku rogtaa iyada oo leh hooska hooska oo daboolaya erayga ama oraahda. Waa wax aad u xiiso badan oo xiiso weyn leh in lagu daboolo iridda ama cinwaanka degel websaydh leh xarrago.

Qoraalka oo midabbo badan leh ayaa laga buuxinayaa SVG

Multicolor buuxinta midab oo loo bixiyay sida mid ka mid ah Saamaynta qoraalka soo baxday laftiisa. Waxay ku gaar tahay liiska oo waxay leedahay taabashadaas qarxa ee u sababi doona dareen soo booqdeyaasha websaydhka. Haddii uu garanayo sida loo meeleeyo, wuxuu bixin doonaa qoraalka.

Qoraalka xiisaha leh ee SVG

Sidii waddadii isaga loo sii waday ayaa la miiqay dhalaalaya animated sawirka qoraalka SVG. Mid ka mid ah waxyaabaha ugu xiisaha badan ee liiska ku jira taasna waxaa lagu meeleeyaa meeshiisa si loo aqoonsado nafteeda.

Qoraalka cilad

Qoraalkan oo ku qoran JavaScript, CSS iyo HTML wuxuu noqon karaa kaamil taabashada gaarka ah ee wakaaladda xayeysiinta inaad ku siiso qoraalka erey xukun ah. Saameyntu waa dhiirigelin waxayna soo jiidanaysaa booqdaha.

Qoraalka cilad

Sida haddii ay jirtay faragelin ku jirtay calaamadda taas sawiri qoraalka ama noolee, Saamaynta qoraalkaani waa dhammaystir weyn. Kali kali ah oo aan shaki ku jirin oo iskeed isu soo bandhigaysa. Lagu sameeyay HTML (pug) iyo CSS (SCSS).

Qoraalka Glitch SCSS

Qoraal kale oo cilad ah oo faragelin ah oo boggaagu ka heli doono degel aad u gaar ah mawduuca, xaqiiqdii la xiriira sheekooyinka sayniska.

Qoraal qoraalka 

Xilliga aan dul dhigno tilmaamaha qoraalka, Tani waxay noqon doontaa nooc isweydaarsi ah taas oo noo oggolaan doonta inaan uga gudubno mid kasta oo ka mid ah xarfaha si aan diiradda u saarno, maadaama inta soo hartay ay noqon doonaan kuwa diiradda la saarayo. HTML, CSS iyo JavaScript saameyn qoraal oo aad u gaar ah.

Ku dul dhaqaaq qoraalka si muuqaal ah

Markaan dhigno jiir tilmaame qoraalkan, waxay ku dhaqaaqi doontaa aragti aad u xiiso badan oo gudbisa saameynta 3D.

Qoraalka muujinta xiisaha leh

Iyadoo tilmaanta jiirka aan ku iftiimin doono qoraalka sida hadday ahaan lahayd in la koobiyeysto ama la jaro. Saamaynta qoraalka ee kor ka soo dhacda si loo daboolo dhammaan ereyada ku jira cutubka. Iyadoo aan lahayn JavaScript iyo CSS.

Qoraal farxad leh

Saamaynta qoraalka ku faraxsanahay inay soo turayso ilaa aan dul dhigno tilmaamaha jiirka qaar ka mid ah xarfaheeda. Saamaynta ay keentay waxay noqon doontaa boodboodka qaar loogu yeero sidaas oo kale. Iyadoo aan lahayn JavaScript iyo CSS.

Qoraal 3D ah oo ka kooban

Saamayn kale oo 3D ah oo loogu talagalay sameysmaan ereyada kala duwan ee dhammaan xarfaha kaas oo ka soo muuqan doona isku duubnaan ayaa laga soo durkay banaanka ilaa gudaha Natiijo aad u fiican oo muuqaal iyo shineemo leh. Mid kale ayaa lagula taliyay liiska.

Qoraal CSS saafi ah hooska

Qoraalkan wuxuu saameyn ku yeelanayaa CSS saafi ah progaan hooska natiijada weyn iyo qaab fiican. Lama sheegi karo iyo mid kale oo ka mid ah waxyaabaha ugu muhiimsan liiska. Animation No, laakiin dhalaalaya.

Hooska qurxoon

Saamaynta hooska oo runtii u muuqata mid weyn. Ku habboon bogagga degitaanka ama shabakadaha xanaanada. CSS saafi ah oo gooni u taagan.

Hooska labaad

Saamayn kale oo weyn oo hoos ah ayaa ku jirta HTML iyo CSS oo taagan kaligeed. Hooska shaxda wuxuu ku abuuraa xarrago websaydhyo mawduucyo gaar ah leh.

Parallax Hooska

Liiska ayaan ku dhamaynaynaa mid ee saameynta ugu quruxda badan ee ku jirta parallax hooska loo tuuray qoraalka. Waxaan u gudbineynaa tilmaamaha jiirka iyo dhanka midig, hadba inta fog ee hooska ayaa ka muuqan doonta. Waxaa qoray Ract, ES6 iyo Babel.

Waxaad haysaa liis kale oo ah saamaynta qoraalka halkan.