People would like to know how I make this header animation of this site link the effect of when I come down Does the header page change in size and color? Any help is welcome, thank you in advance!
People would like to know how I make this header animation of this site link the effect of when I come down Does the header page change in size and color? Any help is welcome, thank you in advance!
There are several methods, you can use a function that when scrolling the page add a class to the background that was transparent, in this class you can insert a transition in CSS to give this effect.
Please follow the Javascript for this:
$(window).scroll(function(){
var top = $(window).scrollTop();
$timeout(function() {
if(top > 0){
$(".menu_fixo").addClass('fundo_preto');
}else{
$(".menu_fixo").removeClass('fundo_preto');
}
});
});
On this black background, add css:
transition: all 0.2s ease;
background-color: #000;
For Logo to move sideways, add a class too and in that class of padding and transition for that padding.
Here is an answer to a similar question: link