Как скользить всю веб-страницу? - PullRequest
Новая
       23

Как скользить всю веб-страницу?

3 голосов
/ 28 декабря 2011

Например - http://www.tumblr.com

Выйдите из системы и попробуйте нажать кнопки «Войти», «Зарегистрироваться», «30 причин, почему вы полюбите Tumblr» (особенно интересно).

Как создать этот эффект слайда?

П.С .: Я не прошу предоставить мне рабочий код, просто рекомендации и советы.

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)
  );
}

Ответы [ 3 ]

3 голосов
/ 28 декабря 2011

Здесь вы найдете рабочую демонстрацию полностраничного слайда: http://acarna.com/full-page-slide.php

Просмотрите исходный код и CSS, так как они необходимы для работы.Основные ключи, на которые следует обратить внимание: ...

  • Вам нужен контейнер, в котором содержатся 2 (или более) страниц размером с экран (в моем демоверсии #wrapper)
  • Этот контейнерего свойство переполнения должно быть скрыто
  • Вы должны определять высоту экрана при каждом запуске анимации (в случае, если размер окна изменился)
2 голосов
/ 28 декабря 2011

Я сделал этот эффект и на своем собственном сайте.Я не знаю, как это сделал Tumblr, но я нашел свой собственный способ сделать это (например, для эффекта Tumblr):

шаг 1. перед перенаправлением на новый URL, сдвиньте нижнюю частьвверх текущей страницы
шаг 2. сдвиньте верхнюю часть, когда новый URL-адрес документа. Уже

Обновите годы спустя:

Поскольку я только что получил новое голосованиеЯ обнаружил этот старый ответ, который сейчас немного устарел.

В современном javascript вам просто нужно использовать history.pushstate, все эффекты выполняются на одной странице.После изменения содержимого страницы с помощью js, вы можете использовать pushstate для изменения URL, что делает его похожим на навигацию с эффектами.

Чтобы узнать больше о pushstate, пожалуйста, обратитесь к https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

2 голосов
/ 28 декабря 2011

Вы проверяли сценарии и CSS, которые они использовали на своих страницах?просто проверьте это, и вы поймете, как это сделать.

...