Усиление эффекта в чистом javascript

Я работаю над функцией, которая будет прокручивать окно до заданной позиции. Мой скрипт работает, но я хотел бы сделать эффект ослабления более плавным.Усиление эффекта в чистом javascript

Как я могу сделать эффект ослабления в javascript (я не хочу использовать плагины, такие как jquery или другие)?

Вот мое ослабление функции:

function myScrollFunction(yPositionToScrollTo){ 

    setTimeout(function(){ 
     if(window.pageYOffset < yPositionToScrollTo - 640){window.scroll(0, window.pageYOffset+64)} 
     else if(window.pageYOffset < yPositionToScrollTo - 320){window.scroll(0, window.pageYOffset+32)} 
     else if(window.pageYOffset < yPositionToScrollTo - 160){window.scroll(0, window.pageYOffset+16)} 
     else if(window.pageYOffset < yPositionToScrollTo - 80){window.scroll(0, window.pageYOffset+8)} 
     else if(window.pageYOffset < yPositionToScrollTo - 40){window.scroll(0, window.pageYOffset+4)} 
     else if(window.pageYOffset < yPositionToScrollTo - 10){window.scroll(0, window.pageYOffset+2)} 
     else{window.scroll(0, window.pageYOffset+1)} 
     if(window.pageYOffset < yPositionToScrollTo){ 
      myScrollFunction(yPositionToScrollTo); 
     } 
    },20) 

}

Update:

function myScrollFunction(yPositionToScrollTo){ 

var differens = yPositionToScrollTo - window.pageYOffset; 

    setTimeout(function(){ 
     window.scroll(0, yPositionToScrollTo + differens/2); 
     if(window.pageYOffset < yPositionToScrollTo){ 
      myScrollFunction(yPositionToScrollTo); 
     } 
    },20) 

}

источник

2013-12-09 user1087110

Возможно, вместо того, чтобы иметь только предустановленные номера, как сейчас, вы создаете еще один динамический скрипт, который автоматически генерирует эти числа, и больше из них? – Markasoftware

Thanks Markasoftware. Я добавил скрипт, который каждый раз выделяет оставшуюся прокрутку по два. Любая идея, как рассчитать его более плавно? – user1087110

за yPositionToScrollTo - 10 исключением случая, ваш код аппроксимирующих это:

var scrollDistance = yPositionToScrollTo - window.pageYOffset; 
var scrollSpeed = scrollDistance/10; 
if (scrollSpeed > 64) { 
    scrollSpeed = 64; 
} 
window.scroll(0,window.pageYOffset+scrollSpeed);

Первая линия просто переупорядочивая повторение ifs:

if (window.pageYOffset < yPositionToScrollTo - 640) ... 

// Take out the expression: 

window.pageYOffset < yPositionToScrollTo - 640 

// Replace hardcoded value with a variable: 

window.pageYOffset < yPositionToScrollTo - scrollDistance 

// Rearrange expression: 

window.pageYOffset + scrollDistance < yPositionToScrollTo 

// Rearrange some more: 

scrollDistance < yPositionToScrollTo - window.pageYOffset 

// Restate equation in the form of an assignment to calculate scrollDistance: 

var scrollDistance = yPositionToScrollTo - window.pageYOffset

Вторая строка выводится из того, что жёстко число прокрутки всегда 1/10 значение закодированного числа в выражениях, если это:

64 is 640/10 
32 is 320/10 ... etc

Условный выражение просто со ссылкой на тот факт, что для всех расстояний больше 640 скорость прокрутки равна 64. Положите это другим способом, максимальная скорость равна 64.

Теперь вы можете плавно прокручивать, используя рассчитанную, а не жестко скорректированную скорость прокрутки.

С помощью этого кода гораздо проще играть с переменными, чтобы получить правильную скорость ослабления. Например, для большинства моих проектов я лично предпочитаю устанавливать scrollSpeed на scrollDistance/2, который быстрее, чем scrollDistance/10, и не ограничивает его максимальной скоростью. Измените делитель и максимальные константы скорости, чтобы получить ослабление, которое вы хотите.

На самом деле, вы можете сделать код более читаемым, если вы даете имена констант:

var INERTIA = 10; // lower = faster, higher = slower 
var MAX_SPEED = 64; 

var scrollDistance = yPositionToScrollTo - window.pageYOffset; 
var scrollSpeed = scrollDistance/INERTIA; 
if (scrollSpeed > MAX_SPEED) { 
    scrollSpeed = MAX_SPEED; 
} 
window.scroll(0,window.pageYOffset+scrollSpeed);

источник

2013-12-09 03:38:13 slebetman

Я должен отметить, что для моих собственных проектов я использую несколько иной код, а не этот. Это не мой код, это ваш код, просто переформулированный. – slebetman

Вы могли бы хотеть проверить это гладкое решение прокрутки из: http://cferdinandi.github.io/smooth-scroll/

Он работает (почти) из поле - см. инструкции на странице - и очень очень легкий (особенно если вы разделите код до минимума, который вам действительно нужен, а затем уменьшите и сжимайте). В хорошо прокомментированном коде у него есть хорошая кривая ослабления. Это должно быть идеально для вас :)

источник

2014-02-18 20:33:25 Sheraff

Усиление эффекта в чистом javascript

ответ

Смежные вопросы