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.