900+ reviews For Entrepreneurs
Digittrix logo

Home - Scripts - Website Development

  • 11 August 2025

Fade In/Out Text Animation with CSS and JS
by Rattanjot S – 3 minute read – 182 views
Web Design

Adding animated text can increase user engagement by 60%. A sleek, modern effect improves visuals and boosts attention spans on interactive websites.

Key Points

  • 3D text animations can boost content visibility and user engagement by up to 45%.
  • Pages with subtle animation have a 50% longer average visit duration from users.
  • 70% of users find animated UI elements more memorable than static text content.

Creating dynamic and interactive user interfaces is essential in modern custom website development. One engaging feature you can add is a fade-in/out text animation with a 3D rotation effect. This kind of animation works well on landing pages, tech portfolios, or splash screens and can be easily incorporated using HTML, CSS, and JavaScript.

This article walks you through creating this animation from scratch, helping you improve your website with futuristic text transitions while aligning with modern web development services.

HTML Structure

                                        <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Unique Fade Animation</title>
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="text-box">
    <div id="fade-text"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

Explanation:

  • The Orbitron font gives the animation a sci-fi aesthetic.
  • The main text-box contains the element where messages will appear and animate.
  • External CSS and JS files are linked for cleaner project structure.

This structure is ideal for web development companies building modular, maintainable front-end components.

CSS Styling and Animation

                                        body {
  margin: 0;
  height: 100vh;
  background: radial-gradient(circle at center, #0a0a0a, #000000);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', sans-serif;
  overflow: hidden;
}

.text-box {
  perspective: 1000px;
  position: relative;
  width: 300px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#fade-text {
  position: absolute;
  font-size: 1.8rem;
  color: #00ffe1;
  padding: 20px 40px;
  border-radius: 12px;
  background: rgba(0, 255, 225, 0.07);
  backdrop-filter: blur(6px);
  text-align: center;
  box-shadow: 0 0 20px #00ffe155, 0 0 60px #00ffe122;
  opacity: 0;
  transform: rotateX(90deg);
  transition: opacity 0.8s ease, transform 0.8s ease;
  white-space: nowrap;
}

Key Features:

  • Radial Gradient Background: Creates a dark, atmospheric backdrop.
  • Centring with Flexbox: Ensures the text box stays centred across all screen sizes.
  • 3D Rotation & Opacity: Makes the text appear as though it rotates into view.
  • Glassmorphism Effect: The backdrop filter and semi-transparent background create a frosted-glass appearance.

This level of styling showcases the power of CSS in custom website development and enhances the user experience through visual appeal.

JavaScript Logic

                                        const messages = [
  "Launching Experience",
  "Futuristic UI Concept",
  "Dynamic Cube Text",
  "Powered by CSS & JS",
  "Ready for Takeoff"
];

const textBox = document.getElementById('fade-text');
let i = 0;

function rotateFade() {
  textBox.style.opacity = 0;
  textBox.style.transform = "rotateX(90deg)";
  
  setTimeout(() => {
    textBox.textContent = messages[i];
    textBox.style.opacity = 1;
    textBox.style.transform = "rotateX(0deg)";
    i = (i + 1) % messages.length;
  }, 800);
}

rotateFade();
setInterval(rotateFade, 4000);

How It Works:

Message Array: Contains predefined text phrases to display.

rotateFade() Function:

  • Fades out and rotates the current message out of view.
  • After 800ms (matching the CSS transition time), a new message appears.
  • Loops through all messages using setInterval() every 4 seconds.

JavaScript is essential for dynamic behaviors like these and is heavily used by any modern web development company to enhance interactivity.

Final Output

When implemented, this project creates:

  • A glowing, glassy text box in the center of the screen.
  • Smooth fade-in and fade-out transitions between messages.
  • A stylish 3D rotating effect powered by rotateX().
  • An overall sci-fi aesthetic ideal for tech brands and startups.

Why Use This Animation?

This animation is perfect for:

  • Startup landing pages showcasing key messages.
  • Splash screens with branding or app loading messages.
  • Interactive headers on portfolios or product sites.
  • Promoting your capability in custom website development with unique UI effects.

By adding such animations, web development services can drastically improve engagement and create memorable user experiences.

Full Project File Structure

                                        /fade-animation
│
├── index.html       # Main HTML file
├── style.css        # All CSS styles
└── script.js        # JavaScript for animation

Additional Tips

  • Replace message text with your product benefits, services, or quotes.
  • Add a hover effect for extra interaction.
  • Make it responsive by adjusting font size and container width with media queries.

Final Words

This Fade In/Out Text Animation is a lightweight, visually attractive addition to any project. By combining HTML, CSS, and JavaScript, you can deliver professional and futuristic animations that add depth and engagement to your website.

Whether you’re a web development company or an individual offering web development services, animations like this demonstrate creativity, technical skill, and a polished user experience—key aspects of any custom website development strategy.

Tech Stack & Version

Frontend

  • HTML
  • CSS
  • JavaScript

Backend

  • Node.js
  • PHP
  • MySQL

Deployment

  • Vercel
  • Netlify

Recent Scripts

Website Development

Razorpay Payment Webhook: A Complete Guide

Author by Tarun C. – April 10, 2026 – 4 minute read

<p dir="ltr">Razorpay webhooks notify your server immediately of payment events, allowing secure, real-time updates and automatic transaction recording in your database.</p> <p>&nbsp;</p>

PHP
Website Development

Image Upload with Fixed Dimensions in ReactJS

Author by Parveen – April 6, 2026 – 4 minute read

<p>Over 70% of web apps use client-side image processing to ensure consistent UI, faster load times, and optimized performance with fixed dimensions in ReactJS.</p>

Website Development

Shopify Draft Orders: Convert Quotes into Paid Orders

Author by Bobin S. – April 2, 2026 – 3 minute read

<p>Convert quotes into paid orders using Shopify Draft Orders. Create custom pricing, send invoices, automate workflows, and boost order conversion rates.</p>