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é.