社交媒体图片轮播特效

十月 11, 2023 / Mr.x / 6阅读 / 0评论/ 分类: 实用创意
社交媒体图片轮播特效 — 荣小站
前端 CSS 动画

社交媒体图片轮播特效

使用 CSS Scroll-Driven Animations API 实现的高级轮播效果，带有分页指示器和自动隐藏的导航按钮。

这是一个模仿社交媒体（Instagram/Twitter）风格的图片轮播组件。使用了最新的 CSS Scroll-Driven Animations API，无需 JavaScript 即可实现基于滚动位置的分页指示器动画。

效果演示

HTML 结构

<section>
  <header>
    <img src="profile.png" alt="profile" />
    <div>
      <p>Buster</p>
      <i class="ri-verified-badge-fill"></i>
    </div>
  </header>
  
  <div class="card">
    <div id="carousel" class="visual">
      <img id="card1" src="img-01.webp" alt="Cute dogs" />
      <img id="card2" src="img-02.webp" alt="Cute dogs" />
      <!-- 更多图片 -->
      
      <div class="controls">
        <button onclick="carousel.scrollBy(-100, 0)">
          <i class="ri-arrow-left-circle-fill"></i>
        </button>
        <button onclick="carousel.scrollBy(100, 0)">
          <i class="ri-arrow-right-circle-fill"></i>
        </button>
      </div>
      
      <div id="pagination" class="pagination"></div>
    </div>
  </div>
  
  <div class="social">
    <div class="inter">
      <div>
        <button><i class="ri-heart-line"></i></button>
        <button><i class="ri-chat-3-line"></i></button>
        <button><i class="ri-share-line"></i></button>
      </div>
      <button><i class="ri-bookmark-line"></i></button>
    </div>
    <p>3,802 likes</p>
    <p>Getting ready to paw-ty!</p>
  </div>
</section>

CSS 样式

基础布局

.visual {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--size);
  inline-size: var(--size);
  block-size: var(--size);
  overflow-x: auto;
  
  /* 隐藏滚动条 */
  scrollbar-width: none;
  -webkit-scrollbar: display: none;
}

滚动捕捉

.visual {
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

.visual > * {
  scroll-snap-align: center;
}

分页指示器动画

/* 分页点缩放效果 */
@keyframes scale {
  0%, 100% { scale: 0.75; }
  50% { scale: 1; background-color: white; }
}

.pagination > button {
  animation: scale linear both;
}

/* 导航按钮自动隐藏 */
@keyframes prev {
  from { visibility: hidden; }
}
@keyframes next {
  to { visibility: hidden; }
}

.next {
  animation: auto next ease;
  animation-timeline: --carousel;
}
.previous {
  animation: auto prev ease;
  animation-timeline: --carousel;
}

JavaScript 逻辑

const images = document.querySelectorAll('#carousel img');
const pagination = document.querySelector('#pagination');

function createPaginationMarkers() {
  images.forEach((img) => {
    const imgViewName = `--${img.id}`;
    img.style.viewTimelineName = imgViewName;
    
    const marker = document.createElement('button');
    marker.type = 'button';
    marker.style.animationTimeline = imgViewName;
    marker.addEventListener('click', () => img.scrollIntoView());
    pagination.appendChild(marker);
  });
}

// 检查浏览器支持
if (CSS.supports('view-timeline-axis', 'inline')) {
  createPaginationMarkers();
}

核心技术点

1. Scroll-Driven Animations API

这是 CSS 的新特性，允许动画直接绑定到滚动位置：

属性说明
view-timeline定义滚动时间线
view-timeline-axis滚动轴向 (inline/block)
view-timeline-name时间线名称
animation-timeline将动画绑定到时间线

2. scroll-snap 滚动捕捉

scroll-snap-type: x mandatory;  /* 强制捕捉 */
scroll-snap-align: center;       /* 对齐到中心 */

3. 隐藏滚动条

/* Firefox */
scrollbar-width: none;

/* Chrome/Safari */
::-webkit-scrollbar { display: none; }

浏览器兼容性

  • Chrome/Edge：115+ 完全支持
  • Safari：正在支持中（需检查版本）
  • Firefox：默认关闭，需启用 flag

💡 提示：代码中使用了 CSS.supports() 来检测浏览器是否支持 Scroll-Driven Animations，不支持的浏览器会优雅降级。

使用注意

  • 需要引入 Remix Icon 图标库
  • 图片使用 WebP 格式以提升加载速度
  • 分页指示器需要 JavaScript 动态生成
  • 动画逻辑完全由 CSS 处理，JS 只负责生成 DOM

#社交媒体图片轮播特效(1)

评论