js untuk mencapai kemahiran pengurusan projek gaya kad reka bentuk UI effect_javascript

Ini ialah kesan reka bentuk UI antara muka pengurusan projek gaya kad yang sangat kreatif. Dalam reka bentuk UI ini, pelbagai item disusun dan disusun pada skrin dalam bentuk kad Apabila item diklik, imej item akan dibesarkan dalam skrin penuh Anda boleh menatal ke bawah untuk melihat maklumat pengenalan item .
Antara muka pengurusan projek juga menyediakan menu navigasi skrin penuh, yang boleh dicetuskan oleh ikon hamburger di penjuru kanan sebelah atas.

Cara menggunakan
Struktur HTML
Struktur HTML antara muka pengurusan projek gaya kad dibahagikan kepada tiga bahagian: .cd-nav-trigger ialah butang pencetus menu skrin penuh, nav.cd-primary-nav ialah menu navigasi skrin penuh dan .cd-projects-container ialah projek Container tidak tersusun untuk senarai.

Setiap projek mengandungi elemen div.cd-title yang mewakili tajuk projek dan elemen div.cd-project-info yang mewakili maklumat projek. Imej item ditetapkan sebagai imej latar belakang .cd-title::before pseudo-element.

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

Gaya CSS
Elemen div.cd-project-info (maklumat projek) ditetapkan kepada ketinggian 100% dan kedudukan relatif. Setiap projek individu diletakkan secara mutlak menggunakan ketinggian 100% dan diletakkan di sudut kiri atas bekas induk mereka .cd-project-info. Pada mulanya mereka disusun di atas satu sama lain.

Kemudian, projek kedua dan ketiga dialihkan ke bawah sepanjang paksi Y menggunakan atribut translateY, masing-masing menggerakkan 1/3 dan 2/3 ketinggian .cd-project-info. Dengan cara ini, 3 item setiap satu memaparkan 1/3 daripada skrin yang sama.

.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 (tajuk projek) ditetapkan kepada 33.33% (1/3 ketinggian port pandangan) dan unsur pseudonya .cd-title::before ditetapkan kepada 300%, iaitu sebenarnya sama dengan ketinggian viewport.

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

Apabila item dipilih, kelas .selected ditambahkan pada item, yang menggunakan transformasi translateY(0). Pada masa yang sama, unsur adik-beradik item itu dialihkan ke luar skrin terjemahY(100%), supaya item itu mengambil keseluruhan skrin.

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

Untuk .cd-project-info (maklumat projek), ia mempunyai ketinggian 100%, limpahan: atribut auto (menjadikannya boleh ditatal), dan ia diletakkan di penjuru kiri sebelah atas elemen induk .projek tunggal. Elemennya ::before ialah pemegang tempat kosong, yang sama dengan lebar dan tinggi port pandangan skrin Fungsinya adalah untuk membenarkan imej projek dipaparkan dalam skrin penuh pada permulaan dan bukannya dilindungi oleh kandungan pembungkus kandungan.

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

Untuk menu navigasi skrin penuh, pada mulanya elemen .cd-primary-nav diletakkan di bawah .cd-projects-container. Apabila pengguna mengklik butang .cd-nav-trigger, semua item dialihkan ke bahagian bawah skrin dan menu navigasi skrin penuh dipaparkan.

.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
Reka bentuk UI ini menggunakan jQuery untuk mendengar peristiwa klik pada elemen .cd-nav-trigger dan .single-project serta menambah dan mengalih keluar kelas yang sepadan untuk elemen yang sepadan.

JS melaksanakan kesan reka bentuk UI antara muka pengurusan projek gaya kad untuk semua orang. Saya harap artikel ini akan membantu semua orang untuk mempelajari reka bentuk pengaturcaraan javascript.