如何在Elementor的Fullpage JS横向幻灯片间添加滚动模糊过渡效果

嗨，我来帮你搞定这个横向幻灯片的模糊过渡效果！你提到的两种实现思路都可行，不过结合Fullpage.js的事件+CSS会更精准可控，我给你分两种方案详细讲讲，你可以按需选择：

Fullpage的onLeave和afterLoad事件能完美捕捉幻灯片切换的前后状态，配合CSS的模糊滤镜和过渡动画，就能实现流畅的切换效果。

需要定位的元素 #

你的Elementor区块里，带有类名.one、.two的元素（对应锚点section1、section2的幻灯片区块）就是我们要操作的目标，通过给它们添加/移除模糊类来实现过渡。

具体代码及添加位置 #

1. 添加CSS样式
   你可以直接在Elementor中打开对应的幻灯片区块，找到「高级」→「自定义CSS」粘贴以下代码；或者在WordPress后台「外观」→「自定义」→「额外CSS」里添加全局样式：

   /* 给幻灯片区块添加平滑过渡动画 */
   .one, .two {
       transition: filter 0.5s ease-in-out;
       /* 可选：防止过渡时布局抖动 */
       backface-visibility: hidden;
   }
   
   /* 模糊状态的类 */
   .section-blur {
       filter: blur(8px);
       pointer-events: none; /* 模糊时禁止交互，避免误操作 */
   }
   

   注：blur(8px)的数值和0.5s的过渡时长都可以根据你的需求调整。

2. 添加Fullpage.js事件监听代码
   在Elementor页面编辑器中添加一个「自定义HTML」模块，放在页面最底部（确保DOM加载完成后执行），把以下代码放在<script>标签里：

   document.addEventListener('DOMContentLoaded', function() {
       // 如果你已经通过其他方式初始化了Fullpage，直接用下面的事件监听即可
       if (typeof fullpage_api !== 'undefined') {
           fullpage_api.on('leave', function(origin, destination, direction) {
               // 离开当前幻灯片时，给它加上模糊类
               origin.item.classList.add('section-blur');
           });
   
           fullpage_api.on('afterLoad', function(origin, destination, direction) {
               // 切换到目标幻灯片后，移除所有幻灯片的模糊类
               document.querySelectorAll('.one, .two').forEach(section => {
                   section.classList.remove('section-blur');
               });
           });
       } else {
           // 如果还没初始化Fullpage，就先初始化并绑定事件
           new fullpage('#fullpage', {
               anchors: ['section1', 'section2'],
               onLeave: function(origin, destination, direction) {
                   origin.item.classList.add('section-blur');
               },
               afterLoad: function(origin, destination, direction) {
                   document.querySelectorAll('.one, .two').forEach(section => {
                       section.classList.remove('section-blur');
                   });
               }
           });
       }
   });
   

   注：如果你的Fullpage容器ID不是#fullpage，记得改成你页面中对应的ID。

如果不想写JS，也可以尝试用CSS的锚点触发效果，不过精准度稍弱，适合简单场景：

/* 给幻灯片添加过渡动画 */
.one, .two {
    transition: filter 0.6s ease;
}

/* 当某个幻灯片被激活为锚点时，其他幻灯片模糊 */
.one:target ~ .two,
.two:target ~ .one {
    filter: blur(8px);
}

⚠️ 注意：这个方案依赖你的HTML结构，如果幻灯片不是兄弟元素，可能需要调整选择器，所以兼容性和可控性不如方案一。

如果你的Elementor区块有嵌套结构，比如.one里面还有Elementor的内部容器，你可以用浏览器开发者工具（F12）定位到真正的幻灯片容器，把CSS选择器调整成对应的层级（比如.one .elementor-section）。

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