텍스트 벽의 변화: Glassmorphism, CSS 애니메이션 및 타이포그래피를 사용한 현대적인 디자인-JS 튜토리얼-php.cn

텍스트 벽의 변화: Glassmorphism, CSS 애니메이션 및 타이포그래피를 사용한 현대적인 디자인

Patricia Arquette

풀어 주다： 2024-11-21 10:45:10

원래의

400명이 탐색했습니다.

Transforming the Wall of Text: Modern Design with Glassmorphism, CSS Animations, and Typography

소개
"텍스트의 벽(Wall of Text)" — 읽기 귀찮은 것처럼 느껴지는 형식화되지 않은 콘텐츠의 압도적인 블록입니다. 블로그, 교육 리소스, 랜딩 페이지 등 무엇을 구축하든 이러한 벽은 사용자를 이탈시키고 이탈하게 만들 수 있습니다. 하지만 이 지루한 블록을 현대적이고 시각적으로 훌륭하며 인터랙티브한 걸작으로 변화시킬 수 있다면 어떨까요?

이 튜토리얼에서는 매력적이고 읽기 쉬운 텍스트 벽을 만드는 방법을 보여 드리겠습니다. 유리 형태, 반응형 타이포그래피, 부드러운 애니메이션을 사용하면 사용자에게 콘텐츠를 쉽게 안내할 수 있습니다. 이 접근 방식은 개발자, 디자이너 및 웹 프로젝트를 개선하려는 모든 사람에게 적합합니다.

이 튜토리얼이 끝나면 다음 내용을 배우게 됩니다.

텍스트가 많은 콘텐츠에 대해 의미론적으로 HTML을 구성하는 방법
유리 형태와 우아한 타이포그래피를 포함한 최신 CSS 기술을 적용하는 방법
CSS 애니메이션과 JavaScript를 사용하여 동적인 스크롤 트리거 효과를 만드는 방법
미묘한 상호 작용과 계층 구조를 추가하여 텍스트 콘텐츠를 흥미롭게 만드는 방법

1단계: HTML 구조화

모든 좋은 디자인은 잘 구성된 HTML에서 시작됩니다. 시맨틱 HTML은 접근성을 향상시킬 뿐만 아니라 디자인의 스타일과 유지 관리를 더 쉽게 만듭니다.

다음은 스타일을 지정할 구조의 예입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Wall of Text - Glassmorphism</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div>



<p>Key elements:</p>

<ul>
<li>Semantic tags: Tags like , , and  improve readability for developers and accessibility for screen readers.</li>
<li>Content hierarchy: Break down the wall into smaller, readable blocks using headings (<h2>), paragraphs (</h2>
<p>), and lists (</p>
<ul>).</ul>
</li>
<li>Quotes: Use  for memorable quotes to add visual interest and meaning.</li>
</ul>

<p>Step 2: Crafting the Design with CSS</p>

<p>To make this text stand out, we’ll use modern glassmorphism techniques, strong typography, and subtle interactivity.</p>

<p>Glassmorphism Background</p>

<p>Glassmorphism combines a semi-transparent background, blur effects, and shadows to mimic frosted glass. It gives a modern and polished look.<br>
</p>

<pre class="brush:php;toolbar:false">body {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(50, 50, 50, 0.9)), url('https://source.unsplash.com/1600x900/?abstract,texture') no-repeat center center/cover;
  color: #333;
  overflow: auto;
}

.container {
  width: 80%;
  max-width: 900px;
  padding: 2.5rem;
  background: rgba(255, 255, 255, 0.95); /* Subtle frosted effect */
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.container:hover {
  transform: scale(1.02);
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5);
}

로그인 후 복사

타이포그래피

타이포그래피는 가독성에 중요한 역할을 합니다. 일관된 줄 간격과 명확한 계층 구조를 갖춘 깔끔한 산세리프 글꼴에 중점을 둡니다.

.text-wall h2 {
  font-size: 2rem;
  text-transform: uppercase;
  color: #333;
  border-bottom: 2px solid #ff8a00;
  padding-bottom: 0.5rem;
}

.text-wall p {
  line-height: 1.8;
  margin-bottom: 1rem;
  color: #555;
}

.text-wall aside {
  font-style: italic;
  background: rgba(240, 240, 240, 1); /* Light background for readability */
  padding: 1rem 1.5rem;
  border-radius: 15px;
  margin-top: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

로그인 후 복사

3단계: 스크롤 애니메이션 추가

애니메이션은 디자인을 역동적으로 만듭니다. 섹션이 뷰포트에 들어올 때 애니메이션을 트리거하기 위해 Intersection Observer API를 사용할 것입니다.

스크롤 효과용 자바스크립트

document.addEventListener('DOMContentLoaded', () => {
  const sections = document.querySelectorAll('.text-wall section');

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('in-view');
        observer.unobserve(entry.target);
      }
    });
  });

  sections.forEach((section) => observer.observe(section));
});

로그인 후 복사

애니메이션 CSS

.text-wall section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.text-wall section.in-view {
  opacity: 1;
  transform: translateY(0);
}

로그인 후 복사

4단계: 콜아웃 섹션 추가

프로젝트나 서비스를 홍보하기 위해 콜아웃 섹션을 추가해 보겠습니다. 예를 들어 Gladiators Battle 프로모션은 다음과 같습니다.

<섹션>



<p>결론</p>

<p>이러한 단계를 통해 지루한 텍스트 벽을 시각적으로 매력적인 대화형 경험으로 바꾸었습니다. 시맨틱 HTML, glassmorphism 및 스크롤 트리거 애니메이션을 사용하여 이제 콘텐츠가 현대적이고 매력적입니다. 블로그, 랜딩 페이지, 교육 리소스 등 무엇이든 이 디자인 접근 방식은 사용자 경험을 향상시킵니다.</p>

<p>? 라이브 데모를 살펴보고 다음 프로젝트에 사용해 보세요.<br>
텍스트의 벽 - CodePen에서 재정의된 Glassmorphism https://codepen.io/HanGPIIIErr/pen/BaXexPL</p>

<p>더 많은 영감과 멋진 게임플레이를 보려면 https://gladiatorsbattle.com/을 확인하는 것을 잊지 마세요! 고대 로마의 세계로 들어가 독점 카드를 수집하고 스릴 넘치는 전투에 참여하세요. 트위터 @GladiatorsBT에서 우리를 팔로우하세요! ?</p>

로그인 후 복사

위 내용은 텍스트 벽의 변화: Glassmorphism, CSS 애니메이션 및 타이포그래피를 사용한 현대적인 디자인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!