Home
Juan D. Cortorreal
Smooth Scale & Float Reveal

Smooth Scale & Float Reveal

An enhanced scroll interaction that combines a vertical slide with a subtle scaling effect. As elements enter the viewport, they smoothly float up and scale to their full size, creating a polished, modern depth effect without complex libraries.

This tailwind example is contributed by Juan D. Cortorreal, on 28-Nov-2025. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Juan D. Cortorreal

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Smooth Scale Reveal Demo</title>
  <link rel="stylesheet" href="styles.css">
  <style>
    /* Estilos demo */
    body { font-family: 'Segoe UI', sans-serif; margin: 0; background: #111; color: white; overflow-x: hidden; }
    h1 { text-align: center; margin-top: 50px; font-weight: 300; }
    
    /* Cajas para visualizar el efecto */
    .card {
        background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
        min-height: 400px;
        margin: 50px auto;
        width: 80%;
        max-width: 800px;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2rem;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }
  </style>
</head>
<body>

<h1>Scroll Down to see the Magic 👇</h1>

<div class="card reveal">
    <span>✨ Floating Card 1</span>
  </div>

<div class="card reveal">
    <span>🚀 Floating Card 2</span>
  </div>

<div class="card reveal">
    <span>🎨 Floating Card 3</span>
  </div>

Related Examples

Card with sale ribbon

Author:
Fagundo67

2 years ago

11.7k
delivary
using cars and carts

Author:
Bonimater

5 months ago

879
Thankyou Card

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

5.5k
Products card grid
Example of product card grid with product image and pricing

Author:
Noob

3 years ago

23.6k
item - product card

Author:
ABDO-SY

8 months ago

780
Elevated feature card

Author:
magersa

1 year ago

4.3k
What is Webby
Webby is a PHP Framework built on top of Codeigniter 3 for easy PHP web application development using both HMVC and MVC patterns.

Author:
Developer Kwame

1 year ago

2k
Brand Grid with Hover Effect

Author:
ariaw

8 months ago

1.2k
Premium Tailwind CSS Card Component
Discover this elegant premium card component built with Tailwind CSS featuring the Poppins font. This modern, responsive design features glassmorphism effects, gradient borders, smooth animations, and a sophisticated color scheme, making it ideal for showcasing premium products or services.

Author:
CodewithFaraz

2 months ago

172
Update Profile
Update profile page with basic informations

Author:
Sedat Kumcu

1 year ago

2.7k
Product Card

Author:
Maxim

8 months ago

1.4k
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

2 years ago

10.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components