10 útržkov HTML a CSS na vytvorenie rozloženia na rozdelenej obrazovke

Užívateľské rozhrania rozdelenej obrazovky 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 pravdepodobne 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ú dobré oddelenie, zatiaľ čo zaoblené logo v strede spája všetko 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 sofistikované užívateľské rozhranie.

Rozloženie stránky so statickým bočným panelom

Vďaka tomu, že obrazovky HD a 4K získavajú priestor, začínajú využívať ďalší priestor dizajnéri ďalší návrhári. Toto vzorové rozloženie poskytuje statický bočný panel s tučným obrázkom na pozadí. Ale tiež vyzerá skvele na menších obrazovkách, pretože bočný panel sa stáva hlavičkou. Je to atraktívne 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. Pomocou trochu kódu JavaScript je toto používateľské rozhranie zaujímavým zvratom v technike.

Alternatívna galéria

Efekt posúvania „pol a pol“ v tomto príklade dodáva jedinečný nádych. Je to takmer pocit, ž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ť hlavným problémom.

Rozloženie časopisu

Tento dizajn simuluje niečo, čo nájdete v tlačovom časopise. Tučný popis a úvodný text naľavo ponúkajú vynikajúci kontrast k fotografickému článku a viac stĺpcov napravo. Celkovo to vyzerá veľmi elegantne a profesionálne.

Zhrnutie služieb

Tento koncept je z hľadiska značky veľmi 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

Často vidíme krásne rozloženie rozdelenej obrazovky, ale nie z hľadiska interaktivity. Nasledujúci príklad pridá chýbajúcu zložku s niektorými prechodmi základných mierok, keď na ňu prejdete. Dobrá vec na tom je, že poskytuje použí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 vyvinutá v chladnom 3D formáte. Tu je určitá kvalita stroja, ktorý môže 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. Niekedy je dobré presunúť do posunu niečo iné, ako je tento efekt zverejnenia informácií. Animácia dodáva zážitku malú osobnosť a emócie. Môže dokonca pomôcť prilákať návštevníkov, aby sa viac zúčastnili na vašich stránkach.

Zdieľanie je rozdiel

To, čo sa začalo ako spôsob výberu medzi A alebo B, sa stalo niečím iným. Rozdelené kresby a animácie ponúkajú dizajnérom ďalší kreatívny spôsob, ako podporiť interakciu. 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 prechádzanie galériami obsahu a obrázkov. Dokonca sa používa na napodobňovanie techník tlačového dizajnu.

Našťastie vyššie uvedené príklady inšpirujú spôsoby, ako pridať rozdelené používateľské rozhranie do vašich vlastných projektov. Bavte sa experimentovaním a implementáciou funkcií, ktoré vyzerajú skvele a pridávajú do zmesi niečo jedinečné.