Comment créer un site Web ou un blog en 2020 - Guide gratuit et facile pour créer un site Web

10 extraits de code HTML et CSS pour cr√©er des dispositions d’√©cran fractionn√©

Les interfaces utilisateur √† √©cran partag√© sont devenues un moyen populaire d’afficher du contenu. Nous pensons souvent qu’ils sont utilis√©s dans des domaines o√Ļ nous voulons que les utilisateurs choisissent entre deux options. Mais nous voyons √©galement d’autres utilisations cr√©atives de la technique. Par exemple, un √©cran divis√© peut √©galement √™tre utilis√© avec grand effet comme mise en page pleine ou m√™me comme animation de transition.

Voici 10 exemples d’interface utilisateur √† √©cran partag√©, avec un code source que vous pouvez modifier en fonction de vos besoins. Chacun a quelque chose d’unique √† offrir.

Fais un choix

C’est sans aucun doute la fa√ßon la plus courante d’utiliser un √©cran partag√©. Un visiteur du site Web est pr√©sent√© avec deux options. Ici, les couleurs de l’image d’arri√®re-plan permettent une bonne s√©paration, tandis que le logo arrondi au milieu le relie.

Fractionner un curseur

Un √©cran partag√© cr√©e √©galement un effet de transition int√©ressant, comme nous le voyons dans l’exemple de diaporama suivant. En faisant d√©filer vers le bas, chaque moiti√© de l’√©cran se divise et r√©v√®le l’image suivante dans la file d’attente. Le r√©sultat est une interface utilisateur tr√®s fluide et haut de gamme.

Mise en page avec une barre latérale statique

Les √©crans HD et 4K gagnant du terrain, de plus en plus de concepteurs commencent √† profiter de cet espace d’√©cran suppl√©mentaire. Cet exemple de disposition fournit une barre lat√©rale statique avec une image d’arri√®re-plan en gras. Mais il a √©galement fi√®re allure sur les √©crans plus petits, car cette barre lat√©rale devient un en-t√™te. Il est √† la fois attrayant et fonctionnel.

Par souci de comparaison

Une autre tendance qui gagne du terrain consiste √† utiliser l’√©cran partag√© pour comparer les images ¬ęavant¬Ľ et ¬ęapr√®s¬Ľ. Ici, nous avons un param√®tre qui permet aux utilisateurs de d√©placer simplement la souris pour voir les diff√©rences entre deux images. En utilisant juste un peu de JavaScript, cette interface utilisateur est une variante int√©ressante de la technique.

Galerie alternative

L’effet de d√©filement ¬ęmoiti√© par moiti√©¬Ľ avec cet exemple ajoute une touche unique. Il semble que les cartes et les photos soient empil√©es alternativement les unes sur les autres lorsque vous faites d√©filer. Et comme il utilise moins de 150 lignes de CSS pur, le temps de chargement ne devrait pas √™tre un gros probl√®me.

Présentation du magazine

Cette conception √©mule quelque chose que vous pouvez trouver dans un magazine imprim√©. La l√©gende en gras et le texte d’introduction √† gauche offrent un excellent contraste avec la photo et l’article √† plusieurs colonnes √† droite. Dans l’ensemble, il a l’air tr√®s √©l√©gant et professionnel.

Résumé des services

Le concept ici est vraiment cool du point de vue de la marque. Il utilise un √©cran divis√© dans une page o√Ļ vous avez un message de marque statique √† gauche, combin√© avec une liste d√©roulante de services offerts √† droite. C’est juste diff√©rent et c’est un moyen de se d√©marquer un peu de la foule.

Effets de d√©filement de l’√©cran partag√©

Tr√®s souvent, nous voyons de belles dispositions d’√©cran partag√©, mais pas beaucoup en termes d’interactivit√©. L’exemple suivant ajoute l’ingr√©dient manquant avec des transitions d’√©chelle de base lorsque vous passez la souris dessus. La bonne chose √† ce sujet est qu’il fournit ce petit signal visuel suppl√©mentaire pour l’utilisateur.

Carrousel 3D

Les transitions entre les diapositives sur ce carrousel ajoutent litt√©ralement une nouvelle dimension aux √©crans divis√©s. Chaque diapositive est “divis√©e” en deux tandis que la diapositive suivante est r√©v√©l√©e dans un format 3D sympa. Voici une certaine qualit√© de machine qui pourrait √™tre un excellent choix pour une entreprise d’ing√©nierie ou industrielle.

Révélation divisée

La pratique de faire d√©filer une page peut devenir ennuyeuse tr√®s rapidement. Il est surprenant que nous ne nous endormions pas dans le processus. Parfois, c’est une bonne id√©e d’apporter quelque chose de diff√©rent au d√©placement, comme cet effet de divulgation divis√©e. L’animation ajoute un peu de personnalit√© et d’excitation √† l’exp√©rience. Il peut m√™me aider √† attirer davantage de visiteurs sur votre site.

Diviser est la différence

Ce qui a commenc√© comme un moyen de choisir entre A ou B est devenu autre chose. Les conceptions et animations divis√©es offrent aux concepteurs une autre avenue cr√©ative pour encourager l’interaction. Bien que nous les voyions toujours sous leur forme traditionnelle, nous constatons √©galement qu’ils sont utilis√©s pour am√©liorer des choses comme le d√©filement √† travers le contenu et les galeries d’images. Il est m√™me utilis√© pour imiter les techniques de conception d’impression.

Esp√©rons que les exemples ci-dessus vous inspireront pour ajouter une interface utilisateur divis√©e √† vos propres projets. Amusez-vous √† exp√©rimenter et √† mettre en Ňďuvre des fonctionnalit√©s qui ont fi√®re allure et ajoutez quelque chose d’unique au m√©lange.

Table of Contents