js pour obtenir des compétences d'effet_javascript en matière de conception d'interface utilisateur d'interface de gestion de projet de type carte

Il s'agit d'un effet de conception d'interface utilisateur d'interface de gestion de projet de type carte très créatif. Dans cette conception d'interface utilisateur, divers éléments sont empilés et disposés sur l'écran sous forme de cartes. Lorsqu'un élément est cliqué, l'image de l'élément sera agrandie en plein écran. Vous pouvez faire défiler vers le bas pour voir les informations d'introduction de l'élément. .
L'interface de gestion de projet propose également un menu de navigation plein écran, qui peut être déclenché par l'icône hamburger dans le coin supérieur droit.

Comment utiliser
Structure HTML
La structure HTML de l'interface de gestion de projet de type carte est divisée en trois parties : .cd-nav-trigger est le bouton de déclenchement du menu plein écran, nav.cd-primary-nav est le menu de navigation plein écran et .cd-projects-container est le conteneur non ordonné du projet pour les listes.

Chaque projet contient un élément div.cd-title représentant le titre du projet et un élément div.cd-project-info représentant les informations sur le projet. L'image de l'élément est définie comme image d'arrière-plan du pseudo-élément .cd-title::before.

<header>
 <a href="#0" class="cd-logo"><img src="img/cd-logo.svg"></a>
  
 <button class="cd-nav-trigger">Menu<span aria-hidden="true" class="cd-icon"></span></button>
</header>
 
<nav class="cd-primary-nav">
 <ul>
  <li class="cd-label">Navigation</li>
  <li><a href="#0">The team</a></li>
  <!-- 可以有更多的导航项 -->
 </ul>
</nav> <!-- .cd-primary-nav -->
 
<div class="cd-projects-container">
 <ul>
  <li class="single-project">
   <div class="cd-title">
    <h2>Project 1</h2>
   </div> <!-- .cd-title -->
 
   <div class="cd-project-info">
    <button class="cd-scroll">Scroll down</button>
     
    <div class="content-wrapper">
     <p>
      项目描述
     </p>
 
     <!-- 额外的项目信息 -->
    </div>
   </div> <!-- .cd-project-info -->
  </li>
 
  <!-- 其它项目 -->
 </ul>
</div> <!-- .cd-projects-container -->    

Style CSS
L'élément div.cd-project-info (informations sur le projet) est défini sur une hauteur et un positionnement relatif de 100 %. Chaque projet individuel est positionné de manière absolue en utilisant une hauteur de 100 % et positionné dans le coin supérieur gauche de son conteneur parent .cd-project-info. Au départ, ils sont empilés les uns sur les autres.

Ensuite, les deuxième et troisième projets sont déplacés vers le bas le long de l'axe Y à l'aide de l'attribut translationY, en se déplaçant respectivement de 1/3 et 2/3 de la hauteur de .cd-project-info. De cette façon, 3 éléments affichent chacun 1/3 du même écran.

.cd-projects-container {
 height: 100%;
 position: relative;
 overflow: hidden;
}
.cd-projects-container .single-project {
 position: absolute;
 top: 0px;
 left: 0px;
 height: 100%;
 width: 100%;
 transition: transform 0.4s;
}
.cd-projects-container .single-project:nth-of-type(2) {
 transform: translateY(33.3333333333%);
}
.cd-projects-container .single-project:nth-of-type(3) {
 transform: translateY(66.6666666667%);
}       

.cd-title (le titre du projet) est fixé à 33,33% (1/3 de la hauteur de la fenêtre), et son pseudo-élément .cd-title::before est réglé à 300%, ce qui est en fait égale à la hauteur de la fenêtre.

.cd-title {
 height: 33.3333333333%;
}
.cd-title::before {
 /* 背景图片 */
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 height: 300%;
 width: 100%;
 background-position: center center;
 background-repeat: no-repeat;
 background-size: cover;
}
.single-project:nth-of-type(1) .cd-title::before {
 background-image: url(../img/img-1.jpg);
}        

Lorsqu'un élément est sélectionné, une classe .selected est ajoutée à l'élément, qui applique une transformation translationY(0). Dans le même temps, les éléments frères de l'élément sont déplacés hors de l'écran en translation (100 %), de sorte que l'élément occupe tout l'écran.

.cd-projects-container .single-project.selected {
 /* 被选择的项目 */
 transform: translateY(0);
}
.cd-projects-container .single-project.selected ~ li {
 /* 隐藏其它项目 */
 transform: translateY(100%);
}        

Pour .cd-project-info (informations sur le projet), il a une hauteur de 100 %, un attribut overflow: auto (le rendant défilant), et il est placé dans le coin supérieur gauche de l'élément parent .single-project. Son pseudo-élément ::before est un espace réservé vide, égal à la largeur et à la hauteur de la fenêtre d'affichage. Sa fonction est de permettre à l'image du projet d'être affichée en plein écran au début au lieu d'être recouverte par le contenu de. le wrapper de contenu.

.cd-project-info {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 overflow: auto;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.4s, visibility 0.4s;
}
.cd-project-info::before {
 /* 用与占位，显示项目图片 */
 content: '';
 display: block;
 height: 100%;
 width: 100%;
 pointer-events: none;
}
.cd-project-info .content-wrapper {
 position: relative;
 z-index: 2;
 padding: 2em 0 3em;
 background-color: #FFFFFF;
}
.selected .cd-project-info {
 opacity: 1;
 visibility: visible;
 transition: opacity 0s, visibility 0s;
}        

Pour les menus de navigation en plein écran, initialement l'élément .cd-primary-nav est placé sous le conteneur .cd-projects-container. Lorsque l'utilisateur clique sur le bouton .cd-nav-trigger, tous les éléments sont déplacés vers le bas de l'écran et le menu de navigation en plein écran s'affiche.

.cd-primary-nav {
 position: absolute;
 top: 0;
 left: 0;
 /* height = (100% - 9%) - 9% is the space taken by the projects when the navigation is open */
 height: 91%;
 width: 100%;
 overflow: auto;
 opacity: 0;
}
.cd-primary-nav ul {
 transform: translateY(50px);
 transition: transform 0.4s;
}
.cd-primary-nav.nav-open {
 opacity: 1;
}
.cd-primary-nav.nav-open ul {
 transform: translateY(0);
}
 
.cd-projects-container.nav-open .single-project {
 box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
 transform: translateY(91%);
}
.cd-projects-container.nav-open .single-project:nth-of-type(2) {
 transform: translateY(94%);
}
.cd-projects-container.nav-open .single-project:nth-of-type(3) {
 transform: translateY(97%);
}        

JavaScript
Cette conception d'interface utilisateur utilise jQuery pour écouter les événements de clic sur les éléments .cd-nav-trigger et .single-project, ainsi que pour ajouter et supprimer les classes correspondantes pour les éléments correspondants.

JS implémente l'effet de conception d'interface utilisateur d'une interface de gestion de projet de type carte pour tout le monde. J'espère que cet article sera utile à tout le monde pour apprendre la conception de programmation javascript.