pessoal alguem tem como me explica como faz esse efeito quando desce o scroll aparece um backgrond branco lentamente
https://blackrockdigital.github.io/startbootstrap-creative/
seria feito com transition ?
pessoal alguem tem como me explica como faz esse efeito quando desce o scroll aparece um backgrond branco lentamente
https://blackrockdigital.github.io/startbootstrap-creative/
seria feito com transition ?
Fiz um exemplo aqui usando jQuery, que ao detectar o movimento da barra de rolagem, verifica o posicionamento dela com .scrollTop()
e mudo a propriedade do menu, conforme o movimento da barra.
Note que o efeito de transição esta no css na seguinte linha:
transition: 0.5s ease-in;
Veja o resultado:
$(document).ready(function() {
$(document).scroll(function() {
if ($(this).scrollTop() > 200) {
$("#menu").css("background-color","#fff");
} else {
$("#menu").css("background-color","#000");
}
});
});
* {
margin: 0;
padding: 0;
}
#menu {
position: fixed;
padding:20px;
background-color: #000;
width: 100%;
transition: 0.5s ease-in;
text-align:center;
}
#menu a{color:#0dc; font-family:Arial; font-size:18px}
#todo {
height: 1200px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
<a>Sou um menu</a>
</div>
<div id='todo'></div>
Se for somente no css, tenta um " transition: 1s; " onde 1s refere-se a 1 segundo