Question

退出并尝试点击按钮“登录”，“注册”，“30个理由为什么你会爱Tumblr”（特别有趣）。

如何创建此幻灯片效果？

P.S：我不是要求我提供工作代码，只是指导和建议。

UP：似乎我找到了可能的解决方案。来自tumblr js文件的代码。

return new Effect.Move(element, {
x: initialMoveX,
y: initialMoveY,
duration: 0.01,
beforeSetup: function(effect) {
  effect.element.hide().makeClipping().makePositioned();
},
afterFinishInternal: function(effect) {
  new Effect.Parallel(
    [ new Effect.Opacity(effect.element, { sync: true, to: 1.0, from: 0.0, transition: options.opacityTransition }),
      new Effect.Move(effect.element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }),
      new Effect.Scale(effect.element, 100, {
        scaleMode: { originalHeight: dims.height, originalWidth: dims.width },
        sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restoreAfterFinish: true})
    ], Object.extend({
         beforeSetup: function(effect) {
           effect.effects[0].element.setStyle({height: '0px'}).show();
         },
         afterFinishInternal: function(effect) {
           effect.effects[0].element.undoClipping().undoPositioned().setStyle(oldStyle);
         }
       }, options)
  );
}

Answer 1

您可以在此处找到整页幻灯片的工作演示：http://acarna.com/full-page-slide.php

查看源代码和CSS，因为这两者都有效。需要注意的主要关键是......

您需要一个容器，其中包含2个（或更多）屏幕大小的页面（在我的演示中为#wrapper）
此容器需要将其overflow属性设置为隐藏
每次运行动画时都必须检测屏幕高度（如果窗口大小已更改）

Answer 2

您是否查看了他们在页面中使用的脚本和CSS？只要查看一下，你就会知道怎么做。

Answer 3

我也在自己的网站上发挥了这个效果。我不知道tumblr是怎么做到的，但我已经找到了自己的方法来做这件事（以tumblr的效果为例）：

步骤1.在重定向到新网址之前，将当前页面的底部向上滑动步骤2.在新的url document.ready时向下滑动顶部

多年后更新：

由于我刚刚获得新的投票，我发现这个旧的答案现在有点过时了。

使用现代javascript，您只需使用history.pushstate，所有效果都在一个页面中执行。使用js更改页面内容后，您可以使用pushstate更改URL，这样就可以像使用效果进行导航一样。

要了解有关pushstate的更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

如何滑动整个网页？

3 个答案: