Բովանդակություն
- 01. Անիմացիոն արեգակնային համակարգ
- 02. Կետ
- 03. ellyելե մենյու
- 04. Քաշվող ջրհեղեղ
- 05. Հեղուկի ցանցը `օգտագործելով տեքստի հավասարեցում. Արդարացնել
- 06. Սքվիշ կոճակներ
- 07. Մաքուր CSS կլեպը կպչուն է
- 08. տեքստային տեքստային տեքստ
- 09. Վախի գնդակներ
- 10. Կտրվող կտոր
- 11. JavaScript գնացք
- 12. Ձգողականության կետերը
CodePen- ը կոդի խմբագիր է, որն աշխատում է ձեր զննարկչում և տալիս է ձեր աշխատանքի ակնթարթային նախադիտում: Դա նաև հիանալի վայր է ձեր ստեղծագործությունները կիսելու և ուրիշների արածները ուսումնասիրելու համար: Այստեղ մենք համախմբել ենք մի շարք լավագույն UI տարրեր և անիմացիաներ, որոնք տարածվել են CodePen- ում:
01. Անիմացիոն արեգակնային համակարգ
Animուլիան Գարնիեի ստեղծած այս անիմացիոն մոդելը ցույց է տալիս ութ մոլորակները 3D արևի շուրջ պտտվող արևի շուրջ (այո, դուք ճիշտ եք կարդացել. Չնայած դպրոցում ձեր ասածին, բոֆինները վերջերս որոշեցին, որ Պլուտոնն այլևս պաշտոնապես մոլորակ չէ): Դեմոն ներշնչված էր Ալեքս ironիրոնի և Նիկոլաս Գալագերի նմանատիպ նախագծերից:
02. Կետ
Կարգի այս Flash անիմացիայից հարմարեցված մի կետ, որը հետեւում է ձեր մկնիկին էկրանի շուրջ, Diego Leme's CodePen տարբերակը ստեղծվել է SVG- ի և JavaScript- ի միջոցով: Դա հիանալի օրինակ է այն բանի, թե ինչպես որոշ պարզ ձևեր կարող են աշխատել միասին `ստեղծելով բավականին զարմանալի բան:
03. ellyելե մենյու
Սա կարծես ցանկացած այլ ընտրացանկ է, քանի դեռ չեք տալիս նրան ոլորել և պարզել, որ այն պատրաստված է ժելեից: Menաշացանկի իրերը թեքվում են, երբ շարժվում են և անշարժ վիճակում պտտվում:
04. Քաշվող ջրհեղեղ
Երբեմն ձեր տեքստի կարգավորման պլանները և տեքստը ինքնին չեն գործում միասին: Քաշվող գերհեղեղը թույլ է տալիս ամեն ինչ կոկիկ պահել ՝ առանց բովանդակության հարցում փոխզիջման գնալու: Տեքստը մարում է, երբ այն հարվածում է ձողերին, և այն քարշ տալով կարող է ոլորվել:
05. Հեղուկի ցանցը `օգտագործելով տեքստի հավասարեցում. Արդարացնել
Այս հիանալի տեխնիկան օգտագործում է տեքստի հավասարեցում. Հիմնավորեք ստեղծել հեղուկ ցանց ձեր պատասխանատու դասավորությունների համար, որը ձեզ չի խնայում հորիզոնական լուսանցքներ, բոցեր կամ հստակ շտկումներ սահմանելու անհրաժեշտությունը: Դրա մասին ավելին կարող եք կարդալ Պատրիկ Կունկայի բլոգային գրառման մեջ:
06. Սքվիշ կոճակներ
Այս աներևակայելի փխրուն կոճակները ձեր էկրանին կեղծ-շոշափելի փորձ են բերում, նույնիսկ եթե դրանք մկնիկով են օգտագործվում: Մենք դրանք դեռ չենք փորձել սենսորային ինտերֆեյսով, բայց համոզված ենք, որ նրանք կթողնեն մեր միտքը:
07. Մաքուր CSS կլեպը կպչուն է
Այս CSS կպչուն արթնացնում է հաճելի շոշափելի հիշողություն. Այս անգամ մի պիտակի, որը հեշտությամբ կեղևոտվում է ՝ հայտնաբերելու այլ բան:
08. տեքստային տեքստային տեքստ
Titleուցադրեք վերնագրի որոշ տեքստեր ոլորող, Jamesեյմս-Բոնդ ոճի ներածական շրջանաձեւ պատուհանի միջոցով: Պատուհանը ետ է ցատկում, երբ այն հարվածում է տեքստի ավարտին:
09. Վախի գնդակներ
Այս գնդակները սարսափելի, կյանքի նման վախենում են ձեր մկնիկի ցուցիչից: Եթե ագրեսիվ շարժվեք, նրանք խուճապի են մատնվելու և ցրվելու են, բայց եթե դանդաղ մոտենաք, և նրանք նույն արագությամբ կքշվեն, միշտ պահպանելով որոշակի հեռավորություն: Հետաքրքիրն այն է, որ եթե դուք շատ հեռու եք գնում, նրանք հավաքվում են միասին և հետաքրքրությամբ նայում են դեպի ձեզ:
10. Կտրվող կտոր
Սա վարագույր է, որը կարող ես թափահարել: Ոչ, դա ավելին է, քան դա: Դուք կարող եք այն իսկապես ուժեղ ցնցել: Դրանից հնարավոր է նույնիսկ անցքեր անել և կտորներ պոկել, որոնք բավարար կերպով ցատկում են էկրանի շուրջ: Դուք կարող եք մանրակրկիտ խորտակել այս բանը և ձեզ զգալ ինչպես պատշաճ վանդալ:
11. JavaScript գնացք
Այս ուրվական գնացքը պտտվում է մի շարք ստվերային թունելների միջով: Անհավանական ստեղծագործություն ՝ օգտագործելով փոքր քանակությամբ կոդ:
12. Ձգողականության կետերը
Երկնային մարմիններն այս սիմուլյատորի մեջ աննպատակորեն սավառնում են մինչև որ ցնցեք իրերը ՝ ավելացնելով ինքնահոս որոշ կետեր: Հետաքրքիր ասպեկտ պետք է նկատել այն է, որ ինքնահոս կետերը ձգվում են միմյանց, ուստի դրանք դանդաղորեն սողալով կընկնեն միասին, մինչև միանան և կազմեն ավելի մեծ, ավելի հզոր կետ:
