前端炫酷展开效果

效果图

因为图片大小的问题换成了手机尺寸录制
.vue

bash 复制代码
<template>
  <div class="expand">
    <div class="expand-main" @wheel="handleWheel"
      :style="`--location:${location}%;--load-location:${location * -1}%;`">
      <!-- <video class="expand-media expand-left" autoplay loop muted playsinline src="/src/assets/瑶-大耳狗之梦-动态海报.mp4" />
      <video class="expand-media expand-right" autoplay loop muted playsinline src="/src/assets/瑶-大耳狗之梦-动态海报.mp4" /> -->
      <img class="expand-media expand-left" :src="media" />
      <img class="expand-media expand-right" :src="media" />
      <div class="expand-container">
        <div class="expand-content">
          <h1 class="expand-content-title">独行道</h1>
          <div v-html="text"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const media = 'https://get.hnzmsz.com/gw/swiper-4.jpg'
const heightMax = 50
const location = ref(0)
const text = `<p>我清楚地知道人与人的路是不可复制的，我走在我自己的人生路上，哪怕路途的风雨再大，大到我举步维艰，哪怕荆棘丛生，刺得我伤痕遍布，我也仍旧痴痴笑笑体会此中滋味。</p>
<p>人的一生之精彩，在于自己追逐梦想的过程。不必苛求旁人的不失望或者喜欢。走自己的路，让旁人失望和不喜欢去吧。</p>
<p>人啊，走在自己的人生路上，就不要怕肮脏！踩着白骨和血肉，一步步走向辉煌！人啊，走在自己的人生路上，就不要怕悲伤！岂不闻 "天无绝人之路"！只要我想走，路就在脚下！</p>`
const handleWheel = (event) => {
  if (event.deltaY > 0) location.value = heightMax <= location.value ? heightMax : location.value + 10
  else location.value = 0 < location.value ? location.value - 10 : 0
};
</script>

<style scoped lang='scss'>
.expand{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;

  &-main{
    width: 100%;
    height: calc(100% + 1px);
    position: absolute;
    left:0;
    top: 0;
    overflow: hidden;
  }

  &-media{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    object-fit: cover;
    transition: transform 0.2s ease; 
    will-change: transform;
  }

  &-left{
    clip-path: polygon(0 0, 0 100%, 100% 100%);
    top: -.5px;
    left: 0;
    transform: translate3d(var(--load-location), var(--location), 0);
  }

  &-right{
    clip-path: polygon(0 0, 100% 100%, 100% 0);
    top:0;
    right: 0;
    transform: translate3d(var(--location), var(--load-location), 0);
  }

  &-container{
    position: absolute;
    top: calc(100% - (var(--location) * 2));
    width: 100%;
    transition: top 0.2s ease;
  }

  &-content{
    max-width: 90%;
    width: max-content;
    margin: 0 auto;
    line-height: 30px;

    &-title{
      text-align: center;
    }
  }
}
</style>
遇到问题可以看我主页加我，很少看博客，对你有帮助别忘记点赞收藏。