Прокрутите до с пользовательским переходом CSS3

У меня есть фрагмент кода, который использует стандартную анимацию на основе jQuery для плавной прокрутки от одной части страницы к другой (чтобы избежать дезориентирующего перехода страницы для привязки страницы). Вот:

// Scroll to 
$('.scrollto').click(function() {
   var elementClicked = $(this).attr("href");
   var destination = $(elementClicked).offset().top;
   $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, 800 );
   return false;
});

Вместо использования анимации JQuery я хотел бы использовать собственный переход CSS3 следующим образом:

.scrollto {
  -webkit-transition-timing-function: cubic-bezier(.77,0,.175,1);
     -moz-transition-timing-function: cubic-bezier(.77,0,.175,1);
      -ms-transition-timing-function: cubic-bezier(.77,0,.175,1);
          transition-timing-function: cubic-bezier(.77,0,.175,1);
}

Как я могу объединить их вместе и убедиться, что переходы CSS3 используются вместо jquery?


jquery css scrollto
person egr103    schedule 14.04.2015    source источник
comment
Сомнительно, я не уверен, как будет анимироваться вся страница. Возможно, вам нужен плагин для смягчения, например JqueryUI/Easing или Special Easing. в свойстве анимации Jquery Animate   -  person Paulie_D    schedule 14.04.2015
comment
этот github.com/rdallasgray/bez позволяет использовать кривые Безье в анимации jquery   -  person Gaël    schedule 14.04.2015

Ответы (1)


arrow_upward
0
arrow_downward

Вы не можете использовать переходы CSS3 для управления функцией jQuery. Вы также не можете использовать CSS для прямой анимации полосы прокрутки, поскольку положение прокрутки не является стилем.

Существуют библиотеки, имитирующие прокрутку с помощью преобразований CSS3 (например, iScrollJS), но для перемещения встроенной полосы прокрутки необходимо вам нужно будет использовать строго JavaScript.

Решение состоит в том, чтобы использовать библиотеку jQuery Easing, которая позволяет создавать собственные функции плавности. Он также поставляется с репликами встроенных функций плавности CSS3.

person isick    schedule 14.04.2015
comment
Я дважды вижу здесь обратную логику... jQuery (гипотетически) будет управлять инициированием переходов - и его функции смягчения существуют намного дольше. - person Shikkediel; 14.04.2015
comment
В CSS нет возможности анимировать полосу прокрутки. Существуют библиотеки, использующие преобразования CSS3, создающие видимость прокрутки, но для того, чтобы анимировать scrollTop (как это требуется), вам нужно сделать это на JavaScript. - person isick; 14.04.2015
comment
С этим я должен согласиться (на самом деле, почему бы не указать это в ответе). - person Shikkediel; 14.04.2015
comment
Отличная идея. Я дополнительно уточнил ответ. - person isick; 14.04.2015
comment
Это позор, но это имеет смысл теперь, когда вы объясняете это. Я ценю ваши усилия, чтобы максимально приблизиться к тому, что я хочу. - person egr103; 14.04.2015