Transformer le mur de texte : design moderne avec glassmorphisme, animations CSS et typographie-js tutoriel-php.cn

Transformer le mur de texte : design moderne avec glassmorphisme, animations CSS et typographie

Patricia Arquette

Libérer： 2024-11-21 10:45:10

original

316 Les gens l'ont consulté

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

Présentation
Le « mur de texte » : un bloc impressionnant de contenu non formaté qui ressemble à une corvée à lire. Que vous créiez un blog, une ressource éducative ou une page de destination, de tels murs peuvent inciter les utilisateurs à se désengager et à rebondir. Mais et si vous pouviez transformer ce bloc ennuyeux en un chef-d'œuvre moderne, visuellement époustouflant et interactif ?

Dans ce tutoriel, nous allons vous montrer comment rendre vos murs de texte à la fois attrayants et lisibles. Grâce au glassmorphisme, à la typographie réactive et aux animations fluides, vous pouvez guider les utilisateurs à travers votre contenu sans effort. Cette approche est parfaite pour les développeurs, les concepteurs et tous ceux qui cherchent à améliorer leurs projets Web.

À la fin de ce tutoriel, vous apprendrez :

Comment structurer sémantiquement HTML pour un contenu contenant beaucoup de texte.
Comment appliquer les techniques CSS modernes, notamment le glassmorphisme et la typographie élégante.
Comment utiliser les animations CSS et JavaScript pour créer des effets dynamiques déclenchés par le défilement.
Comment ajouter une interactivité et une hiérarchie subtiles pour rendre le contenu textuel attrayant.

Étape 1 : structurer le HTML

Tout bon design commence par un HTML bien organisé. Le HTML sémantique améliore non seulement l'accessibilité, mais rend également votre conception plus facile à styliser et à entretenir.

Voici un exemple de structure que nous allons styliser :

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

Copier après la connexion

Typographie

La typographie joue un rôle essentiel dans la lisibilité. Concentrez-vous sur une police propre et sans empattement avec un interligne cohérent et une hiérarchie claire.

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

Copier après la connexion

Étape 3 : Ajout d'animations de défilement

Les animations rendent le design dynamique. Nous utiliserons l'API Intersection Observer pour déclencher des animations lorsque les sections entrent dans la fenêtre.

JavaScript pour les effets de défilement

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

Copier après la connexion

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

Copier après la connexion

Étape 4 : Ajouter une section de légende

Ajoutons une section d'accroche pour promouvoir vos projets ou services. Par exemple, une promotion pour Gladiators Battle :

<section>



<p>Conclusion</p>

<p>Grâce à ces étapes, vous avez transformé un mur de texte ennuyeux en une expérience interactive visuellement convaincante. Grâce au HTML sémantique, au glassmorphisme et aux animations déclenchées par le défilement, votre contenu est désormais moderne et attrayant. Que ce soit pour un blog, une page de destination ou une ressource pédagogique, cette approche de conception améliore l'expérience utilisateur.</p>

<p> ? Explorez la démo en direct et essayez-la pour votre prochain projet :<br>
Mur de texte - Glassmorphisme redéfini sur CodePen https://codepen.io/HanGPIIIErr/pen/BaXexPL</p>

<p>N'oubliez pas de consulter https://gladiatorsbattle.com/ pour plus d'inspiration et un gameplay épique ! Entrez dans le monde de la Rome antique, collectionnez des cartes exclusives et participez à des batailles palpitantes. Suivez-nous sur Twitter à @GladiatorsBT ! ?</p>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!