10 ├║tr┼żkov HTML a CSS na vytvorenie rozdelen├ęho rozlo┼żenia obrazovky

UI na rozdelenej obrazovke sa stali popul├írnym sp├┤sobom zobrazovania obsahu. ─îasto si mysl├şme, ┼że sa pou┼ż├şvaj├║ v oblastiach, v ktor├Żch chceme, aby si pou┼ż├şvatelia vybrali medzi dvoma mo┼żnos┼ąami. Vid├şme v┼íak aj in├ę tvoriv├ę vyu┼żitie tejto techniky. Napr├şklad rozdelen├í obrazovka sa m├┤┼że ve─żmi dobre vyu┼żi┼ą aj ako ├║pln├ę rozlo┼żenie str├ínky alebo dokonca ako anim├ícia prechodu.

Tu je 10 pr├şkladov pou┼ż├şvate─żsk├ęho rozhrania rozdelenej obrazovky, doplnen├Żch zdrojov├Żm k├│dom, ktor├Ż m├┤┼żete upravi┼ą pod─ża svojich potrieb. Ka┼żd├Ż z nich m├í ─Źo pon├║knu┼ą.

Rozhodn├║┼ą sa

Toto je bezpochyby najbe┼żnej┼í├ş sp├┤sob pou┼żitia rozdelenej obrazovky. N├ív┼ítevn├şk webovej str├ínky m├í dve mo┼żnosti. Tu farby na obr├ízku na pozad├ş poskytuj├║ pekn├ę oddelenie, zatia─ż ─Źo zaoblen├ę logo v strede ich sp├íja dohromady.

Rozdelenie jazdca

Rozdelen├í obrazovka tie┼ż vytv├íra zauj├şmav├Ż prechodn├Ż efekt, ako vid├şme v nasleduj├║com pr├şklade prezent├ície. Pos├║vanie nadol sp├┤sob├ş, ┼że sa ka┼żd├í polovica obrazovky rozdel├ş a odhal├ş ─Ćal┼í├ş obr├ízok vo fronte. V├Żsledkom je ve─żmi plynul├ę a ┼ípi─Źkov├ę u┼ż├şvate─żsk├ę rozhranie.

Rozlo┼żenie str├ínky so statick├Żm bo─Źn├Żm panelom

V─Ćaka displejom v rozl├ş┼íen├ş HD a 4K za─Ź├şnaj├║ nov├ę dizajn├ęri vyu┼ż├şva┼ą viac dizajn├ęrov, ktor├ş vyu┼ż├şvaj├║ tento priestor na obrazovke. Toto vzorov├ę rozlo┼żenie poskytuje statick├Ż bo─Źn├Ż panel s tu─Źn├Żm obr├ízkom na pozad├ş. Vyzer├í to v┼íak skvele aj na men┼í├şch obrazovk├ích, preto┼że tento bo─Źn├Ż panel sa st├íva hlavi─Źkou. Je atrakt├şvny a funk─Źn├Ż.

Pre porovnanie

─Äal┼í├şm trendom, ktor├Ż z├şskava p├┤du, je pou┼żitie rozdelenej obrazovky na porovnanie obr├ízkov ÔÇ×predÔÇť a ÔÇ×poÔÇť. Tu m├íme nastavenie, ktor├ę umo┼ż┼łuje pou┼ż├şvate─żom jednoducho pohn├║┼ą my┼íou, aby videli rozdiely medzi dvoma obr├ízkami. Pou┼ż├şvan├şm iba mal├ęho k├│du JavaScript je toto pou┼ż├şvate─żsk├ę rozhranie zauj├şmav├Żm zvratom v technike.

Alternat├şvna gal├ęria

Efekt pos├║vania ÔÇ×napoly na polovicuÔÇť v tomto pr├şklade dod├íva jedine─Źn├Ż dojem. Zd├í sa, ┼że karty a fotografie sa pri pos├║van├ş striedavo ukladaj├║ na seba. A ke─Ć┼że pou┼ż├şva menej ako 150 riadkov ─Źist├ęho CSS, ─Źas na─Ź├ştania by nemal by┼ą ve─żk├Żm probl├ęmom.

Rozlo┼żenie ─Źasopisu

Tento dizajn napodob┼łuje nie─Źo, ─Źo n├íjdete v tla─Źovom ─Źasopise. Tu─Źn├Ż titulok a ├║vodn├Ż text na─żavo poskytuj├║ vynikaj├║ci kontrast k fotografick├ęmu a viac st─║pcov├ęmu ─Źl├ínku napravo. Celkovo to vyzer├í ve─żmi ┼ít├Żlovo a profesion├ílne.

Zhrnutie slu┼żieb

T├íto koncepcia je z poh─żadu zna─Źky skuto─Źne cool. Pou┼ż├şva rozdelen├║ obrazovku na str├ínke, na ktorej je v─żavo statick├í spr├íva o zna─Źke, v kombin├ícii s pos├║vac├şm zoznamom slu┼żieb pon├║kan├Żch napravo. Je to len in├Ż sp├┤sob, ako sa trochu vymani┼ą z davu.

Efekty pos├║vania rozdelenej obrazovky

Ve─żmi ─Źasto vid├şme kr├ísne rozlo┼żenie rozdelenej obrazovky, ale nie z h─żadiska interaktivity. Nasleduj├║ci pr├şklad prid├íva ch├Żbaj├║cu zlo┼żku s niektor├Żmi prechodmi v z├íkladnom mer├ştku, ke─Ć nad ┼łou prejdete kurzorom my┼íi. Dobr├í vec na tom je, ┼że poskytuje u┼ż├şvate─żovi trochu extra vizu├ílneho podnetu.

3D karusel

Prechody medzi sn├şmkami v tomto karuseli doslova dod├ívaj├║ rozdelen├Żm obrazovk├ím nov├Ż rozmer. Ka┼żd├í sn├şmka je ÔÇ×rozdelen├íÔÇť na polovicu, zatia─ż ─Źo ─Ćal┼íia sn├şmka je odhalen├í v chladnom 3D form├íte. Tu je ur─Źit├í kvalita podobn├í stroju, ktor├í by mohla by┼ą skvelou vo─żbou pre stroj├írsku alebo priemyseln├║ spolo─Źnos┼ą.

Split Reveal

Postup rolovania po str├ínke sa m├┤┼że nudi┼ą ve─żmi r├Żchlo. Je prekvapuj├║ce, ┼że v tomto postupe nesp├şme. Ob─Źas je dobr├ę prinies┼ą nie─Źo in├ę ako vys├şdlenie, napr├şklad tento efekt zverejnenia. Anim├ícia dod├íva z├í┼żitku trochu osobnosti a vzru┼íenia. M├┤┼że dokonca pom├┤c┼ą pril├íka┼ą n├ív┼ítevn├şkov, aby sa viac z├║─Źastnili na va┼íich str├ínkach.

Rozde─ż je rozdiel

To, ─Źo za─Źalo ako sp├┤sob v├Żberu medzi A alebo B, sa stalo nie─Ź├şm in├Żm. Rozdelen├ę n├ívrhy a anim├ície pon├║kaj├║ dizajn├ęrom ─Ćal┼íiu tvoriv├║ cestu na podporu interakcie. Aj ke─Ć ich st├íle vid├şme vo svojej tradi─Źnej podobe, zis┼ąujeme tie┼ż, ┼że sa pou┼ż├şvaj├║ na vylep┼íenie vec├ş, ako je napr├şklad pos├║vanie obsahu a gal├ęrie obr├ízkov. Dokonca sa pou┼ż├şva na napodob┼łovanie techn├şk tla─Źov├ęho dizajnu.

D├║fajme, ┼że pr├şklady uveden├ę vy┼í┼íie bud├║ in┼ípirova┼ą sp├┤soby, ako prida┼ą rozdelen├ę u┼ż├şvate─żsk├ę rozhranie k va┼íim vlastn├Żm projektom. Bavte sa experimentovan├şm a implement├íciou funkci├ş, ktor├ę vyzeraj├║ skvele a prid├ívaj├║ do zmesi nie─Źo jedine─Źn├ę.