首页 >web前端 >js教程 >改变文字墙：玻璃形态、CSS 动画和版式的现代设计

改变文字墙：玻璃形态、CSS 动画和版式的现代设计

Patricia Arquette原创: 2024-11-21 10:45:10393浏览

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

简介
“文本墙”——一大堆无格式的内容，读起来像是一件苦差事。无论您是在构建博客、教育资源还是登陆页面，此类墙都会使用户脱离并离开。但是，如果您可以将这个沉闷的街区变成一个现代的、视觉上令人惊叹的、互动的杰作呢？

在本教程中，我们将向您展示如何使文本墙既有吸引力又可读。使用玻璃形态、响应式排版和流畅的动画，您可以轻松引导用户浏览您的内容。这种方法非常适合开发人员、设计师以及任何希望改进其 Web 项目的人。

在本教程结束时，您将学到：

如何为文本较多的内容构建 HTML 语义结构。
如何应用现代 CSS 技术，包括 glassmorphism 和优雅的排版。
如何使用 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 步：添加标注部分

让我们添加一个标注部分来宣传您的项目或服务。例如，角斗士之战的促销：




<p>结论</p>

<p>通过这些步骤，您已经将无聊的文字墙变成了视觉上引人注目的交互式体验。使用语义 HTML、玻璃形态和滚动触发的动画，您的内容现在变得现代且引人入胜。无论是博客、登陆页面还是教育资源，这种设计方法都能提升用户体验。</p>

<p>？探索现场演示并尝试在您的下一个项目中使用它：<br>
文字墙 - CodePen 上重新定义的 Glassmorphism https://codepen.io/HanGPIIIErr/pen/BaXexPL</p>

<p>别忘了查看 https://gladiatorsbattle.com/ 以获得更多灵感和史诗般的游戏玩法！走进古罗马世界，收集专属卡牌，参与惊心动魄的战斗。在 Twitter 上关注我们：@GladiatorsBT！ ？</p>

以上是改变文字墙：玻璃形态、CSS 动画和版式的现代设计的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript css html Resource if for try using this viewport transform animation https

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：How to Find the Most Frequent Element in an Array in JavaScript?下一篇：Extending vs. Overwriting JavaScript Prototypes: Which Approach is Best?

查看更多