js, um UI-Design-Effekte für Projektmanagementschnittstellen im Kartenstil zu erwerben_Javascript-Fähigkeiten

Dies ist ein sehr kreativer UI-Designeffekt für Projektmanagementschnittstellen im Kartenstil. In diesem UI-Design werden verschiedene Elemente in Form von Karten auf dem Bildschirm gestapelt und angeordnet. Wenn Sie auf ein Element klicken, wird das Bild des Elements im Vollbildmodus angezeigt. Sie können nach unten scrollen, um die Einführungsinformationen des Elements anzuzeigen .
Die Projektmanagement-Oberfläche bietet außerdem ein Vollbild-Navigationsmenü, das über das Hamburger-Symbol in der oberen rechten Ecke aufgerufen werden kann.

Anwendung
HTML-Struktur
Die HTML-Struktur der Projektmanagementoberfläche im Kartenstil ist in drei Teile unterteilt: .cd-nav-trigger ist die Auslöseschaltfläche des Vollbildmenüs, nav.cd-primary-nav ist das Vollbildnavigationsmenü und .cd-projects-container ist der ungeordnete Projektcontainer für Listen.

Jedes Projekt enthält ein div.cd-title-Element, das den Projekttitel darstellt, und ein div.cd-project-info-Element, das Projektinformationen darstellt. Das Bild des Elements wird als Hintergrundbild des Pseudoelements .cd-title::before festgelegt.

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

CSS-Stil
Das Element div.cd-project-info (Projektinformationen) ist auf 100 % Höhe und relative Positionierung eingestellt. Jedes einzelne Projekt wird absolut mit 100 % Höhe positioniert und in der oberen linken Ecke des übergeordneten Containers .cd-project-info positioniert. Zunächst werden sie übereinander gestapelt.

Dann werden das zweite und dritte Projekt mithilfe des Attributs TranslateY entlang der Y-Achse nach unten verschoben, wobei 1/3 bzw. 2/3 der Höhe von .cd-project-info verschoben werden. Auf diese Weise zeigen 3 Elemente jeweils 1/3 des gleichen Bildschirms an.

.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 (der Titel des Projekts) ist auf 33,33 % (1/3 der Höhe des Ansichtsfensters) und sein Pseudoelement .cd-title::before auf 300 % festgelegt tatsächlich gleich der Höhe des Ansichtsfensters.

.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);
}        

Wenn ein Element ausgewählt wird, wird dem Element eine .selected-Klasse hinzugefügt, die eine TranslateY(0)-Transformation anwendet. Gleichzeitig werden die Geschwisterelemente des Elements translatorY(100 %) aus dem Bildschirm verschoben, sodass das Element den gesamten Bildschirm einnimmt.

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

Für .cd-project-info (Projektinformationen) hat es eine Höhe von 100 %, ein overflow: auto-Attribut (was es scrollbar macht) und wird in der oberen linken Ecke des übergeordneten Elements .single-project platziert. Sein ::before-Pseudoelement ist ein leerer Platzhalter, der der Breite und Höhe des Bildschirmansichtsfensters entspricht. Seine Funktion besteht darin, zu ermöglichen, dass das Projektbild zu Beginn im Vollbildmodus angezeigt wird, anstatt vom Inhalt verdeckt zu werden der Content-Wrapper.

.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;
}        

Für Vollbild-Navigationsmenüs wird zunächst das .cd-primary-nav-Element unter dem .cd-projects-container platziert. Wenn der Benutzer auf die Schaltfläche „.cd-nav-trigger“ klickt, werden alle Elemente an den unteren Bildschirmrand verschoben und das Navigationsmenü im Vollbildmodus angezeigt.

.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
Dieses UI-Design verwendet jQuery, um auf Klickereignisse für die Elemente .cd-nav-trigger und .single-project zu warten und entsprechende Klassen für die entsprechenden Elemente hinzuzufügen und zu entfernen.

JS implementiert den UI-Designeffekt einer Projektmanagementschnittstelle im Kartenstil für alle. Ich hoffe, dass dieser Artikel für alle hilfreich sein wird, um das Javascript-Programmierdesign zu erlernen.