Simple Animated Banner Display

INFORMATION & CODE

Simple Animated Banner Display

What The Code Does

This code creates a responsive, retro-styled promotional banner designed for a website, specifically themed around bathroom designs and a company call-to-action. Visually, the banner features retro pixel-art fonts ("Press Start 2P"), a grayscale aesthetic, and a striking green accent ribbon that bisects the display.

The core interactive feature of this component is a hover effect. When a user moves their mouse over the banner, an angled green ribbon straightens out. This reveals more of the underlying layout or creates a dynamic visual transition, which is handled in tandem by CSS transitions and JavaScript event listeners.

How It Works

The functionality is divided into three standard web development layers: HTML, CSS, and JavaScript.

The HTML Structure: The markup establishes a main container (.banner) holding text elements (<h3> and >h4<), a call-to-action link (<a class="shop">), a background product image (<img>), and a decorative element (<div class="ribbon">). It also links to external resources, including Google Fonts for the retro typography and FontAwesome for icons.
The CSS Styling: CSS handles the layout and visual presentation. It uses Flexbox to center the banner on the screen, applies a global grayscale filter to give the banner a muted, vintage look, and sets up absolute positioning to layer the text, image, and ribbon correctly. The .ribbon class is initially styled with a 15-degree rotation and a smooth transition duration, which creates a sliding/rotating animation when its transform property changes.
The JavaScript Logic: JavaScript enhances the interactivity by targeting the .banner and .ribbon elements. It listens for onmouseover and onmouseout events (triggered when the user hovers over or leaves the banner area) and dynamically updates the CSS transform property to rotate the ribbon between 15 degrees and 0 degrees. (Note: The JavaScript code also includes event listeners for an img variable, though an explicit const img declaration is missing from the provided snippet).

How to Use The Code

To implement and use this code on your own website, follow these steps:

Separate the Files: Create three separate files in the same directory on your computer: name them index.html, styles.css, and scripts.js.
Paste the Code: Copy the respective HTML, CSS, and JavaScript code blocks provided above and paste into their corresponding files.
Host or Open: Open the index.html file in any modern web browser by double- clicking it, or run it through a local development server (like the Live Server extension in Visual Studio Code).
Customize Content: You can easily adapt the banner for your own brand by changing the text inside the <h3> and <h4> tags, updating the href attribute on the "SHOP NOW" link, and replacing the image URL in the <img> tag with a link to your own product photo.

HTML


                <!doctype html>
<html lang="en/US">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Animated Banner Display</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/d9cf1148e3.js" crossorigin></script>
  </head>
  <body>
    <div class="banner">
      <h3>BATHROOMS DESIGNS</h3>
		  <h4>By COMPANY NAME</h4>
      <a href="#" class="shop">SHOP NOW</a>
      <img src ="https://e-nash.net/photos/bathroom-1982011_1920.jpg" class="image" alt="Stylish moderm antique look wash basin">
      <div class="ribbon"></div>
    </div>
    <script src="scripts.js"></script>
  </body>
</html>

CSS


                * {
  box-sizing: border-box;
  font-family: "Press Start 2P", VT323, cursive;
}

body {
  height: 98.5vh;
  width: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  font-size: 16px;
  line-height: 1.5;
}
                  
.banner {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 20vh;
  max-height: 150px;
  margin: 40px auto;
  background: #e0e0e0;
  filter: grayscale(100%);
  box-shadow: 2px 2px 10px #777;
  overflow: hidden;
}
      
.image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display:inline-block;
  height: 20vh;
  width: 50%;
}
                  
h3 {
  position: absolute;
  width: 45%;
  font-size: 16px;
  margin-left: 20px;
}
                  
h4 {
  position: relative;
  top: 20px;
	margin: 50px 0 0 20px;
  color: #0c0;
  font-size: 14px;
  z-index: 1;
}
      
a.shop {
  position: relative;
  top: 30px;
  left: 20px;
  font-size: 13px;
}
                  
.ribbon {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translatex(-50%) rotate(15deg);
  width: 50px;
  height: 150%;
  background: #0c0;
  transition-duration: 0.3s
}
                  
.ribbon:hover,
.ribbon:active {
  transform: translatex(-50%) rotate(0deg);
}

JAVASCRIPT


                const banner = document.querySelector(".banner");
const cover = document.querySelector(".ribbon");

banner.onmouseover = function() {
  cover.style.transform = "translatex(-50%) rotate(0deg)";
}
banner.onmouseout = function() {
  cover.style.transform = "translatex(-50%) rotate(15deg)";
}
img.onmouseover = function() {
  cover.style.transform = "translatex(-50%) rotate(0deg)";
}
img.onmouseout = function() {
  cover.style.transform = "translatex(-50%) rotate(15deg)";
}

MENU

INFORMATION & CODE