テキストの壁を変える: Glassmorphism、CSS アニメーション、タイポグラフィーによるモダンなデザイン-jsチュートリアル-php.cn

テキストの壁を変える: Glassmorphism、CSS アニメーション、タイポグラフィーによるモダンなデザイン

Patricia Arquette

リリース： 2024-11-21 10:45:10

オリジナル

315 人が閲覧しました

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

はじめに
「テキストの壁」 — 読むのが面倒に感じられる、フォーマットされていないコンテンツの圧倒的なブロック。ブログ、教育リソース、ランディングページのいずれを構築している場合でも、そのような壁があるとユーザーが離れてしまい、離れてしまう可能性があります。しかし、この退屈なブロックを、現代的で視覚的に素晴らしい、インタラクティブな傑作に変えることができたらどうでしょうか?

このチュートリアルでは、テキストの壁を魅力的かつ読みやすくする方法を説明します。グラスモーフィズム、応答性の高いタイポグラフィ、スムーズなアニメーションを使用して、コンテンツを簡単にユーザーに案内できます。このアプローチは、開発者、デザイナー、および Web プロジェクトを改善したいと考えている人に最適です。

このチュートリアルが終わるまでに、次のことを学習します:

テキストの多いコンテンツ向けに 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 を使用して、セクションがビューポートに入ったときにアニメーションをトリガーします。

スクロール効果用の JavaScript

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、グラスモーフィズム、スクロール トリガー アニメーションを使用することで、コンテンツがモダンで魅力的なものになります。ブログ、ランディング ページ、教育リソースのいずれであっても、このデザイン アプローチはユーザー エクスペリエンスを向上させます。</p>

<p>?ライブデモを調べて、次のプロジェクトで試してみてください:<br>
テキストの壁 - CodePen で再定義された Glassmorphism https://codepen.io/HanGPIIIErr/pen/BaXexPL</p>

<p>さらなるインスピレーションと壮大なゲームプレイについては、https://gladiatorsbattle.com/ をチェックすることを忘れないでください!古代ローマの世界に足を踏み入れ、限定カードを集めてスリリングなバトルを繰り広げましょう。 Twitter で @GladiatorsBT をフォローしてください! ?</p>

ログイン後にコピー

以上がテキストの壁を変える: Glassmorphism、CSS アニメーション、タイポグラフィーによるモダンなデザインの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。