CSS3 Sliding Banner/MENU

Note: This is a restored article from the original A thousand nodes blog (circa 2011).

Of course we have seen banners like this before, which can be done quite easily with JavaScript and even better with jQuery. But the challenge was to create it using pure CSS. To add some more flavor, I also added some rotating transformation to the text. This is something that I saw in one of those Flash banners.

I tested it on Firefox 4, Chrome, and Opera. It seemed to work fine. I didn't bother to test it out on IE at the time. I used the transform property to rotate the text.

The HTML Structure

First, we need a simple HTML structure:

<div class="sliding-menu">
  <ul>
    <li>
      <a href="#">
        <h3>First Slide</h3>
        <p>Description for the first slide item</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h3>Second Slide</h3>
        <p>Description for the second slide item</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h3>Third Slide</h3>
        <p>Description for the third slide item</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h3>Fourth Slide</h3>
        <p>Description for the fourth slide item</p>
      </a>
    </li>
  </ul>
</div>

The CSS Magic

Now for the CSS that creates the sliding effect:

.sliding-menu {
  width: 600px;
  height: 300px;
  position: relative;
  overflow: hidden;
  margin: 50px auto;
  border: 1px solid #ccc;
}

.sliding-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  width: 2400px; /* 600px × 4 slides */
  animation: slide 16s infinite;
}

.sliding-menu li {
  width: 600px;
  height: 300px;
  float: left;
  position: relative;
  overflow: hidden;
}

.sliding-menu a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: white;
  background: #333;
  transition: all 0.3s ease;
}

.sliding-menu a:hover {
  background: #444;
}

.sliding-menu h3 {
  position: absolute;
  top: 50px;
  left: 50px;
  margin: 0;
  font-size: 36px;
  transform: rotate(-5deg);
  transform-origin: left top;
  transition: all 0.5s ease;
}

.sliding-menu a:hover h3 {
  transform: rotate(0deg);
  color: #ff9900;
}

.sliding-menu p {
  position: absolute;
  bottom: 50px;
  left: 50px;
  right: 50px;
  margin: 0;
  opacity: 0.8;
  transform: rotate(3deg);
  transform-origin: left bottom;
  transition: all 0.5s ease;
}

.sliding-menu a:hover p {
  transform: rotate(0deg);
  opacity: 1;
}

@keyframes slide {
  0%, 20% {
    transform: translateX(0);
  }
  25%, 45% {
    transform: translateX(-600px);
  }
  50%, 70% {
    transform: translateX(-1200px);
  }
  75%, 95% {
    transform: translateX(-1800px);
  }
  100% {
    transform: translateX(0);
  }
}

How It Works

This sliding banner/menu works using several CSS techniques:

1. Animation with @keyframes: Creates the sliding motion from one panel to the next
2. Transformations: Rotates the text elements slightly to give them a dynamic feel
3. Transitions: Smoothly animates changes when hovering
4. Overflow: hidden: Ensures only one slide is visible at a time

The animation cycles through each slide, pausing for a moment before moving to the next one. When the user hovers over a slide, the text elements rotate to their normal position, creating an interactive effect.

Browser Compatibility (as of 2011)

• Firefox 4+
• Chrome 10+
• Safari 5+
• Opera 11+
• IE: Not tested (would likely require fallbacks)

Modern Enhancements

If implementing this today, you could enhance it with:

• Flexbox layout instead of floats
• CSS Variables for easier customization
• Feature queries (@supports) for better fallbacks
• Pause on hover using animation-play-state
• Reduced motion queries for accessibility

Usage Ideas

This technique can be used for:

1. Feature slideshows on a homepage
2. Navigation menus with visual elements
3. Product showcases
4. Image galleries with captions

This pure CSS approach eliminates the need for JavaScript libraries and reduces page load time, while still providing an engaging, interactive element to your site.