Maciej Chałapuk

W jednym z poprzednich wpisów zaprezentowałem metodę utworzenia elementu OVERLAY. Poniżej przedstawiam krótki kod JavaScript powodujący płynne przesuwanie warstwy overlay. Animacja startuje z małym opóźnieniem, a na końcu delikatnie zwalniania.

Aby uzyskać efekt płynnego przesuwania wystarczy dołączyć do strony z elementem overlay następujący kod (działa jedynie jako uzupełnienie do kodu z poprzedniego wpisu):

var FPS = 25; // frames per second
var PPS = 800; // pixels per second
var SDB = 200; // slow down boundary
var MTO = 250; // move timeout

var frameTime = 1000/FPS;
var frameJump = Math.ceil(PPS/FPS);

var overlay = document.getElementById("overlay");
var content = document.getElementById("content");

var contentScroll = 0;
var overlayPos = 0;
var moveTimeout = null;

function moveOverlay() {
  var absPos = Math.abs(overlayPos);
  var move = (absPos < SDB)? Math.ceil(absPos*frameJump/SDB): frameJump;
  overlayPos += (overlayPos>0?-1:1) * Math.min(move, absPos);
  overlay.style.top = overlayPos +"px";
  if (overlayPos) {
    moveTimeout = window.setTimeout(moveOverlay, frameTime);
  }
};

function onContentScroll(e) {
  overlayPos += contentScroll-content.scrollTop;
  overlay.style.top = overlayPos +"px";
  contentScroll = content.scrollTop;
  if (overlayPos) {
    if (moveTimeout) {
      window.clearTimeout(moveTimeout);
    }
    moveTimeout = window.setTimeout(moveOverlay, MTO);
  }
};

content.onscroll = onContentScroll;

Skrypt jest w pełni konfigurowalny. Zmienne konfiguracyjne to: ilość klatek na sekundę (FPS), szybkość w pikselach na sekundę (PPS), granica rozpoczęcia zwalniania w pikselach (SDB), opóźnienie animacji w milisekundach (MTO). A oto działający przykład.