Node.js를 사용하여 카드 스타일 프로젝트 관리 인터페이스 UI 디자인 effect_javascript 기술 달성
매우 창의적인 카드 스타일의 프로젝트 관리 인터페이스 UI 디자인 효과입니다. 이 UI 디자인에서는 다양한 아이템이 카드 형태로 화면에 쌓여 배열되어 있으며, 아이템을 클릭하면 해당 아이템의 이미지가 전체 화면으로 확대되어 아이템 소개 정보를 볼 수 있습니다. .
프로젝트 관리 인터페이스는 오른쪽 상단 모서리에 있는 햄버거 아이콘으로 실행할 수 있는 전체 화면 탐색 메뉴도 제공합니다.
사용방법
HTML 구조
카드 스타일 프로젝트 관리 인터페이스의 HTML 구조는 세 부분으로 나뉩니다. .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의 왼쪽 상단에 위치합니다. 처음에는 서로 겹쳐져 있습니다.
그런 다음 두 번째와 세 번째 프로젝트는 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%); }
자바스크립트
이 UI 디자인은 jQuery를 사용하여 .cd-nav-trigger 및 .single-project 요소에서 클릭 이벤트를 수신하고 해당 요소에 대해 해당 클래스를 추가 및 제거합니다.
JS는 모든 사람을 위한 카드 스타일 프로젝트 관리 인터페이스의 UI 디자인 효과를 구현합니다. 이 글이 모든 사람이 자바스크립트 프로그래밍 디자인을 배우는 데 도움이 되기를 바랍니다.

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











기사는 JavaScript 라이브러리 작성, 게시 및 유지 관리, 계획, 개발, 테스트, 문서 및 홍보 전략에 중점을 둡니다.

이 기사는 브라우저에서 JavaScript 성능을 최적화하기위한 전략에 대해 설명하고 실행 시간을 줄이고 페이지로드 속도에 미치는 영향을 최소화하는 데 중점을 둡니다.

프론트 엔드 개발시 프론트 엔드 열지대 티켓 인쇄를위한 자주 묻는 질문과 솔루션, 티켓 인쇄는 일반적인 요구 사항입니다. 그러나 많은 개발자들이 구현하고 있습니다 ...

이 기사는 브라우저 개발자 도구를 사용하여 효과적인 JavaScript 디버깅, 중단 점 설정, 콘솔 사용 및 성능 분석에 중점을 둡니다.

이 기사는 Java의 컬렉션 프레임 워크의 효과적인 사용을 탐구합니다. 데이터 구조, 성능 요구 및 스레드 안전을 기반으로 적절한 컬렉션 (목록, 세트, 맵, 큐)을 선택하는 것을 강조합니다. 효율적인 수집 사용을 최적화합니다

이 기사는 소스 맵을 사용하여 원래 코드에 다시 매핑하여 미니어링 된 JavaScript를 디버그하는 방법을 설명합니다. 소스 맵 활성화, 브레이크 포인트 설정 및 Chrome Devtools 및 Webpack과 같은 도구 사용에 대해 설명합니다.

이 튜토리얼은 Chart.js를 사용하여 파이, 링 및 버블 차트를 만드는 방법을 설명합니다. 이전에는 차트 유형의 차트 유형을 배웠습니다. JS : 라인 차트 및 막대 차트 (자습서 2)와 레이더 차트 및 극지 지역 차트 (자습서 3)를 배웠습니다. 파이 및 링 차트를 만듭니다 파이 차트와 링 차트는 다른 부분으로 나뉘어 진 전체의 비율을 보여주는 데 이상적입니다. 예를 들어, 파이 차트는 사파리에서 남성 사자, 여성 사자 및 젊은 사자의 비율 또는 선거에서 다른 후보자가받는 투표율을 보여주는 데 사용될 수 있습니다. 파이 차트는 단일 매개 변수 또는 데이터 세트를 비교하는 데만 적합합니다. 파이 차트의 팬 각도는 데이터 포인트의 숫자 크기에 의존하기 때문에 원형 차트는 값이 0 인 엔티티를 그릴 수 없습니다. 이것은 비율이 0 인 모든 엔티티를 의미합니다

기술 및 산업 요구에 따라 Python 및 JavaScript 개발자에 대한 절대 급여는 없습니다. 1. 파이썬은 데이터 과학 및 기계 학습에서 더 많은 비용을 지불 할 수 있습니다. 2. JavaScript는 프론트 엔드 및 풀 스택 개발에 큰 수요가 있으며 급여도 상당합니다. 3. 영향 요인에는 경험, 지리적 위치, 회사 규모 및 특정 기술이 포함됩니다.
