Blinds Effect

The code

A glimpse of the source:

<div class="transition-preview" id="blindsEffect">
    <div class="transition-content old-content">Page A</div>
    <div class="transition-content new-content">Page B</div>
    <div class="blinds-container">
      <div class="blind-strip" style="animation-delay: 0s;">
      </div>
      <div class="blind-strip" style="animation-delay: 0.05s;">
      </div>
      <div class="blind-strip" style="animation-delay: 0.1s;">
      </div>

Concrete use cases

A few real contexts where Blinds Effect shines:

• A checkout funnel step change
• A scroll-triggered content reveal
• Moving between two landing sections

How it works

CSS + a lightweight vanilla JavaScript script (no dependency). It relies on a @keyframes animation and CSS transforms.

Make it yours

You can tweak:

• animation speed (currently 1.2s)

Add it in 3 steps

1. Paste the HTML where you want the effect on your page.
2. Add the CSS to your stylesheet (or in a <style> tag).
3. Add the small JavaScript snippet before </body> — done.

Browser support

Works in every modern browser (Chrome, Firefox, Safari, Edge). Responsive, with graceful degradation.

More Transitions effects

FAQ