X inchide

Header animat on scroll window

In acest scurt articol vreau sa va arat cum am realizat cu aceste coduri simple dar eficiente un header animat atunci cand dai de scroll in jos pe un site. In primul rand identifici care sunt clasele din partea de sus a site-ului care doresti sa le fixezi la ascroll on window. Deasupra acestor clase se pune un id cu orice nume doriti, eu am ales sa il numesc fixed.

Exemplu:

Pentru partea de jQuery am folosit urmatoarele coduri (trebuie incarca in site libraria jQuery):

Pentru partea de animatie sa realizat urmatoarea declaratie: animation: smoothScroll 1s forwards;

Partea finala de css arata asa:

Daca aveti nelamuriri puteti intreba in sectiunea de comentarii.

Demo

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *