Creating a Horizontal Scrollable Thumbnail View with Active Text Caption

In this blog post, we’ll delve into the world of responsive web design and explore how to create a horizontal scrollable thumbnail view with an active text caption. We’ll break down the technical aspects of achieving this effect and provide code examples to help you implement it in your own projects.

Understanding the Requirements

The problem statement presents a scenario where we need to display a group of images in a horizontal list view with a scrollbar, similar to an iPad index page. The twist is that when scrolling horizontally along the thumbnails, we want to show only one active caption at a time, highlighting the thumbnail that’s centered on the screen.

Technical Overview

To achieve this effect, we’ll need to employ several technical concepts:

1. Responsive Design: We’ll use responsive design principles to create a layout that adapts to different screen sizes and orientations.
2. CSS Grid: We’ll utilize CSS Grid to create a flexible grid system for arranging our thumbnails.
3. JavaScript: We’ll add interactivity with JavaScript, handling the animation of active captions and scrolling events.

Step 1: Setting up the HTML Structure

Let’s start by creating the basic HTML structure for our thumbnail view:

<div class="thumbnail-container">
  <div class="thumbnails">
    <li>
      <span>Thumbnail 1</span>
      <img src="image1.jpg" alt="Image 1">
    </li>
    <li>
      <span>Thumbnail 2</span>
      <img src="image2.jpg" alt="Image 2">
    </li>
    <!-- Add more thumbnails here -->
  </div>
</div>

In this example, we’re using a simple list of li elements to represent our thumbnails. Each thumbnail contains a span element for the caption and an img element for the image.

Step 2: Styling with CSS Grid

Next, we’ll style our thumbnails using CSS Grid:

.thumbnail-container {
  display: flex;
  justify-content: center;
}

.thumbnails {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: fit-content;
}

.thumbnail {
  position: relative;
  padding-bottom: 56.25%; /* Aspect ratio for images */
  background-size: cover;
  overflow: hidden;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Here, we’re using CSS Grid to create a responsive grid system that adapts to different screen sizes. We’ve set the grid-template-columns property to repeat three columns, with each column taking up an equal fraction of the available space. The gap property adds a 10px margin between thumbnails.

We’ve also styled our thumbnails using relative positioning and padding-bottom, which will be used later for scrolling and active caption effects.

Step 3: Adding Interactivity with JavaScript

Now it’s time to add interactivity with JavaScript:

const thumbnails = document.querySelectorAll('.thumbnails li');
const activeCaption = document.querySelector('.active-caption');

function updateActiveCaption(index) {
  // Get the current thumbnail element
  const thumbnail = thumbnails[index];

  // Update the active caption text
  activeCaption.textContent = thumbnail.querySelector('span').textContent;

  // Add animation for active caption
  activeCaption.classList.add('animate-active');
}

function handleScroll(event) {
  // Calculate the current scroll position
  const scrollPosition = event.clientX - event.target.offsetLeft;

  // Find the index of the centered thumbnail
  const centerIndex = Math.floor(scrollPosition / (thumbnails[0].offsetWidth + thumbnails[1].offsetWidth)) * 2;

  // Update the active caption
  updateActiveCaption(centerIndex);

  // Remove animation class for inactive captions
  Array.prototype.forEach.call(thumbnails, (thumbnail) => {
    if (thumbnail !== thumbnails[centerIndex]) {
      thumbnail.querySelector('.active-caption').classList.remove('animate-active');
    }
  });
}

// Add event listener for mousewheel scrolling
document.addEventListener('wheel', handleScroll);

In this example, we’re using the wheel event to detect when the user scrolls horizontally along the thumbnails. We calculate the current scroll position and find the index of the centered thumbnail by dividing the scroll position by the width of two adjacent thumbnails.

We then update the active caption text and add an animation class for the active caption using JavaScript.

Finally, we remove the animation class for inactive captions to create a clean and seamless scrolling effect.

Step 4: Adding Animation for Active Caption

To enhance the animation for our active caption, let’s add some CSS:

.active-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 18px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  padding: 10px;
}

Here, we’re styling our active caption with absolute positioning and animation properties.

We’ve also added a subtle fade effect by using the rgba function to create a semi-transparent background color.

Conclusion

In this blog post, we’ve explored how to create a horizontal scrollable thumbnail view with an active text caption. We’ve covered the technical aspects of responsive design, CSS Grid, and JavaScript, and provided code examples to help you implement this effect in your own projects.

By following these steps and adding interactivity with JavaScript, you can create a visually appealing and interactive thumbnail view that adapts to different screen sizes and orientations.

Last modified on 2024-09-01