立体卡片滑块

十二月 22, 2023 / Mr.x / 6阅读 / 0评论/ 分类: 卡片类
立体卡片滑块 — 荣小站
前端 Swiper 视差效果 立体卡片

立体卡片滑块

使用 Swiper.js 实现带有视差效果的垂直立体卡片滑块，滑动时产生depth感。

▼ 上下滑动查看效果

第一章，第十五页

一位先知坐在市场上，为所有愿意为他服务的人算命。突然，一个人跑了过来告诉他，他的房子被小偷破门而入，偷走了所有能找到的东西。

第二章，第七页

一只口渴的乌鸦发现了一个水罐，里面装着一些水，但是水太少了，她用尽力气也够不到，她的嘴似乎在看到水的时候就会渴死。

第三章，第十一页

每个人都随身带着两个袋子，一个在前，一个在后，两个都装满了缺点。前面的袋子装的是邻居的过错，后面的袋子装的是自己的过错。因此，人们看不见自己的缺点，但总是看不见别人的。

使用 Swiper.js 实现带有视差效果的垂直立体卡片滑块，滑动时产生depth感。

这是一个精美的立体卡片滑块效果。使用 Swiper.js 的视差（Parallax）功能，配合垂直滚动，产生了极具depth感的立体效果。左右两部分以不同的速度移动，创造出丰富的层次感。

核心特性

  • 视差效果：利用 Swiper 的 parallax 选项实现深度感
  • 垂直滚动：支持上下滑动切换
  • 循环播放：支持无缝循环
  • 响应式：适配移动端显示

完整代码

以下是完整的单文件代码，你可以直接保存为 .html 文件运行：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>立体卡片滑块</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
  <style>
    /* 容器样式 */
    .page-wrap {
      width: 100%;
      height: 600px;
    }

    #home-slider {
      width: 100%;
      height: 100%;
    }

    .swiper-container {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    /* 三个不同的背景 */
    .swiper-slide-one { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
    .swiper-slide-two { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
    .swiper-slide-three { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }

    /* 视差图片容器 */
    .swiper-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 100%;
      overflow: hidden;
    }

    .swiper-image[data-swiper-parallax-y="-20%"] {
      top: -20%;
      height: 140%;
    }

    .swiper-image[data-swiper-parallax-y="35%"] {
      top: 35%;
      height: 130%;
    }

    .swiper-image-inner {
      width: 200%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .swiper-image-left { margin-left: -50%; }
    .swiper-image-right { margin-left: -100%; }

    /* 内容样式 */
    .swiper-image-inner h1 {
      font-size: 3.5rem;
      color: #fff;
      line-height: 1.2;
    }

    .swiper-image-inner h1 .emphasis {
      font-style: italic;
      opacity: 0.8;
    }

    .paragraph {
      padding: 2rem;
      color: #fff;
      font-size: 1.1rem;
      line-height: 1.8;
    }

    /* 分页器 */
    .swiper-pagination {
      right: 20px !important;
      top: 50% !important;
      transform: translateY(-50%);
    }

    .swiper-pagination-bullet {
      background: rgba(255,255,255,0.4);
      border: 2px solid rgba(255,255,255,0.6);
    }

    .swiper-pagination-bullet-active {
      background: #fff;
    }
  </style>
</head>
<body>
  <div class="page-wrap">
    <div id="home-slider">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide swiper-slide-one">
            <div class="swiper-image" data-swiper-parallax-y="-20%">
              <div class="swiper-image-inner swiper-image-left swiper-image-one">
                <p>第一章</p>
              </div>
            </div>
            <div class="swiper-image" data-swiper-parallax-y="35%">
              <div class="swiper-image-inner swiper-image-right swiper-image-two">
                <p class="paragraph">内容...</p>
              </div>
            </div>
          </div>
          <!-- 更多幻灯片 -->
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  <script>
    var mySwiper = new Swiper(".swiper-container", {
      direction: "vertical",  // 垂直滚动
      loop: true,            // 循环
      pagination: ".swiper-pagination",
      grabCursor: true,
      speed: 1000,
      parallax: true,        // 视差效果
      effect: "slide"
    });
  </script>
</body>
</html>

技术要点

技术点说明
Swiper.js强大的触摸滑块库
Parallax视差效果，产生深度感
垂直方向direction: "vertical"
循环模式loop: true

使用说明

  1. 将完整代码保存为 .html 文件
  2. 用浏览器打开
  3. 上下滑动查看视差效果
  4. 点击右侧分页器可快速跳转

评论