动画相册，打造动态视觉盛宴

2022-11-30 13:26:44

使用 CSS 和 jQuery 创建一个循环滚动相册集

在当今数字时代，视觉效果在吸引和吸引观众方面发挥着至关重要的作用。无论您是创建个人博客、企业网站还是社交媒体活动，引人注目的图片都能提升您的内容并与您的受众建立联系。为了更有效地展示您的照片，循环滚动相册集是一个出色的解决方案，它提供了动态且引人入胜的展示方式。

本指南将逐步指导您如何使用 CSS 和 jQuery 创建一个令人惊叹的循环滚动相册集，让您的图片栩栩如生，同时提升您的在线体验。

1. 构建相册结构

开始之前，您需要创建一个 HTML 结构来容纳您的相册。这是一个简单的 HTML 代码示例：

<div class="album">
  <div class="album-wrapper">
    <ul class="album-list">
      <li>
        <img src="image1.jpg" alt="Image 1">
      </li>
      <li>
        <img src="image2.jpg" alt="Image 2">
      </li>
      <li>
        <img src="image3.jpg" alt="Image 3">
      </li>
    </ul>
  </div>
</div>

这个 HTML 代码将创建包含三个图像的相册。要添加更多图像，只需添加更多 <li> 元素。

2. 添加 CSS 样式

接下来，是时候用 CSS 样式化您的相册了。使用以下 CSS 代码，您可以创建一种现代且时尚的外观：

.album {
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.album-wrapper {
  width: calc(100% + 100px);
  height: 100%;
  position: relative;
  animation: scroll 15s linear infinite;
  animation-play-state: paused;
}

.album-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.album-list li {
  width: 100px;
  height: 100%;
  overflow: hidden;
}

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

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.album:hover .album-wrapper {
  animation-play-state: running;
}

.album-wrapper.reverse {
  animation-direction: reverse;
}

此 CSS 代码将使您的相册水平滚动。当您将鼠标悬停在相册上时，它将自动开始滚动。您还可以添加 reverse 类来反向滚动动画。

3. 添加 jQuery 代码

最后，您需要使用 jQuery 代码使您的相册循环滚动。此代码将检测相册何时被悬停，然后启动滚动效果：

$(document).ready(function() {
  $(".album").each(function() {
    var $album = $(this);
    var $albumWrapper = $album.find(".album-wrapper");
    var $albumList = $album.find(".album-list");
    var $albumListItem = $albumList.find("li");
    var albumWidth = $album.width();
    var albumListWidth = $albumList.width();
    var albumListItemWidth = $albumListItem.width();

    $album.hover(function() {
      $albumWrapper.addClass("running");
    }, function() {
      $albumWrapper.removeClass("running");
    });

    $albumWrapper.on("animationiteration", function() {
      $albumWrapper.css("transform", "translateX(0)");
    });
  });
});