时间戳

首页 > 解决方案 > 使用 fullPage.js 在部分之间剪切路径转换

javascript - 使用 fullPage.js 在部分之间剪切路径转换

问题描述

我想要一个带有 SVG 剪辑路径的剪辑动画，它会在使用 fullPage.js 制作动画时隐藏第一部分并显示第二部分。

所以这类似于这个问题： fullpage JS animation on section

但是我想控制具有特定持续时间的动画（因此过渡很平滑）。

我现在知道或尝试过的：

  1. FullPage.js必须使用onLeave和afterLoad回调。如果我阻止在 onLeave 事件中滚动，我只能在 afterLoad 事件中调用silentMoveTo，但我需要接下来两点中的内容。
  2. 两个部分不能使用 fullPage.js处于活动状态（CSS 类）（例如，我会将第 2 部分的不透明度从 0 更改为 1，因为动画显示它，而第 1 部分将被隐藏，反之亦然，背景剪切路径将移动到顶部隐藏第 1 节图像 (SVG)。
  3. 我尝试为剪切路径设置动画（有类似的工作示例），但当然不会显示下面第 2 节的内容。在动画不可用后调用silentMoveTo以显示第 2 部分，因此它必须与动画持续时间的 50% 同步。

最好的方法是什么？我必须使用 fullPage.js（根据要求，使用内置的 WordPress 主题）。理想情况下，我计划在 GreenSock javascript 库中使用带有动画结束回调的时间线，以正确地向 fullPage.js 主对象发出活动部分现在应该是 #2 的信号。

添加：您可以在此处看到使用 GreenSock 转换的一种方法：

https://youtu.be/gE-Yuu2eEio?t=1694

然而，这是第二部分加载后的动画。我想要第一部分内容的动画，同时显示第二部分（我知道 Fading Effect fullPage.js 扩展，而不是解决方案）。

标签： javascripthtmlcsssvgfullpage.js

解决方案

所以我想我必须自己回答这个问题。

简短的回答：不可能使用 fullPage.js 设计的同时显示两个部分。

长答案：您至少可以在第一部分模仿某种互动，例如较长的动画，然后快速显示第二部分。像这样（由于删除了不必要的讨论部分，您无法运行此代码）：

        var fullPageOBj = new $('#fullpage').fullpage({
            ...
            onLeave: function (origin, destination, direction) {
            		dir = direction;
                    ...
            		if(origin == 1 && destination == 2){
                    $.fn.fullpage.setAutoScrolling(false);
                    document.body.style.overflow = "hidden";
                    ...
                    TweenMax.to(bSvg, 2.7, { }, "section1");
                    ...
                }
                $.fn.fullpage && $.fn.fullpage.setLockAnchors && $.fn.fullpage.setLockAnchors('false');
            },
            afterLoad: function (origin, destination) {
                console.log("aL - origin: " + origin + ", destination: " + destination + ", direction: " + dir);
              	if(destination == 1){
                    $("vc-section1").addClass("active");
                    ...
                }
                if(destination == 2){
              	  	TweenMax.to(bSvg, 0, { display: "block", onComplete: Delay2, delay: 3.2});            		
                	function Delay2() {
  	                	$.fn.fullpage.setAutoScrolling(true);
	                	$.fn.fullpage.silentMoveTo(2);
                    }
                }
            }
        }

上面的想法是 fullPage.js 中的 afterLoad 事件实际上是在 onLeave 事件之后立即产生的，因此您必须确保在 onLeave 事件函数中等待动画在 afterLoad 函数发生之前完成。因此，上面的代码包括生成在动画完成后运行的 Delay2 函数。afterLoad 函数中的时间设置为尊重 onLeave 函数中动画持续时间的时间。

你将不得不玩时间。fullPage.js 中各部分之前的默认转换时间似乎是 700 毫秒。

最后一个想法可能是将动画移动到第 2 节 - 但页面在第 1 节中已经没有对象（以动画过渡到第 2 节）。

欢迎您加入讨论。

推荐阅读