Animowany header

Dla specjalistów Webmastering
#1

Witam,

#2

Może to pomoże (to taka podstawka), bo opisanie tego by się pewnie ciągnęło :wink:

 

Ogółem, wymaganymi plikami z paczki, z drugiego linka, są:

  • cbpAnimatedHeader.js (lub cbpAnimatedHeader.min.js)

Reszta to napisanie kodu css i “html” i określenie odpowiednich klas w cbpAnimatedHeader do stworzonego css’a.

 

PS. Jak chcesz zobaczyć kod tego “pokazu”, to kliknij w “Kliknij mnie”…

PPS. W razie czego, poniżej przeróbka cbpAnimatedHeader.js, by działała tak jak na podanej przez Ciebie stronie (kod ten siedzi w “podstawce”, ale jest połączony z kodem pliku “classie”), ponieważ domyślny skrypt z paczki przywraca nagłówek do stanu początkowego (w tym wypadku zakrywania zawartości strony):

var cbpAnimatedHeader = (function() {
var docElem = document.documentElement,
  header = document.querySelector( '.cbp-af-header' ),
  didScroll = false,
  check = true,
  changeHeaderOn = 1;
function init() {
  window.addEventListener( 'scroll', function( event ) {
   if( !didScroll ) {
    didScroll = true;
    setTimeout( scrollPage, 50 );
   }
  }, false );
}
function scrollPage() {
  var sy = scrollY();
  if ( sy = changeHeaderOn ) {
   classie.add( header, 'cbp-af-header-shrink' );
  }
  else {
   check = false;
  }
  didScroll = false;
}
function scrollY() {
  return window.pageYOffset || docElem.scrollTop;
}
init();
})();
#3

Czy byłaby możliwość bardziej doraźnej pomocy, ponieważ widzę, że nie poradzę sobie z tym w pojedynkę… :wink:

#4

Możliwość raczej zawsze jest, a z czym masz problem?