jsでカード型のプロジェクト管理インターフェイスUIデザインを実現する効果_JavaScriptスキル

これは非常にクリエイティブなカード スタイルのプロジェクト管理インターフェイス UI デザイン効果です。このUIデザインでは、さまざまなアイテムがカードの形で画面上に積み重ねられ、配置されています。アイテムをクリックすると、アイテムの画像が全画面で拡大され、アイテムの紹介情報が表示されます。 。
プロジェクト管理インターフェイスには、ユーザーが右上隅のハンバーガー アイコンからトリガーできる全画面ナビゲーション メニューも提供されます。

使い方
HTML 構造
カード スタイルのプロジェクト管理インターフェイスの HTML 構造は 3 つの部分に分かれています。.cd-nav-trigger は全画面メニューのトリガー ボタン、nav.cd-primary-nav は全画面ナビゲーション メニュー、 .cd-projects-container は、リストの順序付けされていないプロジェクト コンテナーです。

各プロジェクトには、プロジェクト タイトルを表す div.cd-title 要素と、プロジェクト情報を表す div.cd-project-info 要素が含まれています。項目の画像は、.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 -->    

CSS スタイル
div.cd-project-info 要素 (プロジェクト情報) は、高さと相対位置が 100% に設定されます。個々のプロジェクトは、100% の高さを使用して絶対に配置され、親コンテナー .cd-project-info の左上隅に配置されます。最初は、それらは互いに積み重ねられています。

次に、2 番目と 3 番目のプロジェクトが、translateY 属性を使用して Y 軸に沿って下に移動され、それぞれ .cd-project-info の高さの 1/3 と 2/3 移動します。このように、3 つの項目がそれぞれ同じ画面の 1/3 を表示します。

.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 (プロジェクトのタイトル) は 33.33% (ビューポートの高さの 1/3) に設定され、その疑似要素 .cd-title::before は 300% に設定されます。実際にはビューポートの高さと同じです。

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

項目が選択されると、.selected クラスが項目に追加され、translateY(0) 変換が適用されます。同時に、項目の兄弟要素が画面外へ移動され、translateY(100%)、項目が画面全体を占めるようになります。

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

.cd-project-info (プロジェクト情報) の場合、高さ 100%、overflow: auto 属性 (スクロール可能にする) があり、親要素 .single-project の左上隅に配置されます。その ::before 擬似要素は、画面ビューポートの幅と高さに等しい空白のプレースホルダーであり、その機能は、プロジェクト イメージがコンテンツによって覆われずに、最初に全画面で表示されるようにすることです。コンテンツラッパー。

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

全画面ナビゲーション メニューの場合、最初は .cd-primary-nav 要素が .cd-projects-container の下に配置されます。ユーザーが .cd-nav-trigger ボタンをクリックすると、すべての項目が画面の下部に移動され、全画面ナビゲーション メニューが表示されます。

.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
この UI デザインは、jQuery を使用して .cd-nav-trigger 要素と .single-project 要素のクリック イベントをリッスンし、対応する要素の対応するクラスを追加および削除します。

JS は、カード スタイルのプロジェクト管理インターフェイスの UI デザイン効果を実装します。この記事が JavaScript プログラミングを学習する皆さんのお役に立てれば幸いです。