页面参考区域卡片的进入触发式半幅波浪动画实现求助

要实现你需要的效果，我们需要把原有的hover触发全屏覆盖，改成滚动进入视口触发半幅波浪覆盖，具体修改如下：

步骤1：调整HTML结构 #

给目标卡片添加一个自定义类（比如wave-card），方便后续JS监听：

<div class="row">
    <div class="col-sm-4 col-12" data-aos="fade-right">
        <div class="card wave-card">
            <div class="layer"></div>
            <div class="content">
                <div class="image">
                    <a target="_blank" href="http://www.example.com">
                        <img src="img/logo.png" alt="alt" class="img-fluid">
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

步骤2：修改CSS样式 #

把原来的矩形layer改成波浪形状，并设置动画触发规则：

.card { 
    position: relative;
    overflow: hidden;
    width: 350px;
    margin: 0 auto;
    background: white;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 10px 40px grey;
}

/* 波浪形状的覆盖层，初始隐藏在卡片底部 */
.card .layer {
    z-index: 1;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--main-color);
    /* 用clip-path创建波浪路径，可调整顶点坐标优化波浪形态 */
    clip-path: polygon(0 100%, 100% 100%, 100% 70%, 80% 80%, 60% 70%, 40% 80%, 20% 70%, 0 80%);
    transition: top 0.8s ease-out;
}

/* 进入视口时触发动画：波浪层上移到半幅位置 */
.card.wave-card.animate-wave .layer {
    top: 50%;
}

.card .content {
    z-index: 2; 
    position: relative;
}  

.card .content .image {
    margin: 0 auto;
    overflow: hidden;    
}

.card .content .image:hover {
    filter: none;
    transition: 0.5s;    
}

如果需要更逼真的波浪效果，可以把clip-path替换为SVG背景：

.card .layer {
    z-index: 1;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    /* SVG波浪背景，替换%23yourcolor为你的主色十六进制值（比如%23ff5722） */
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="%23yourcolor"/></svg>');
    background-size: cover;
    background-position: bottom;
    transition: top 0.8s ease-out;
}

步骤3：添加视口监听JS #

用Intersection Observer API监听卡片是否进入视口，触发动画：

// 选择所有需要添加波浪动画的卡片
const waveCards = document.querySelectorAll('.wave-card');

// 创建观察者实例
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            // 进入视口时添加动画类
            entry.target.classList.add('animate-wave');
            // 只触发一次动画，避免重复触发
            observer.unobserve(entry.target);
        }
    });
}, {
    threshold: 0.1 // 当卡片10%进入视口时触发动画
});

// 开始监听每个卡片
waveCards.forEach(card => {
    observer.observe(card);
});

效果说明 #

• 当卡片滚动进入视口（10%可见）时，波浪覆盖层会从底部平滑上移，最终覆盖卡片的下半部分，和你附图的效果一致。
• 可以通过调整transition的时长（比如0.8s）和threshold的值，来优化动画触发时机和流畅度。

内容的提问来源于stack exchange，提问作者czcryst