1

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 ?

2 Respostas 2

2

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>

0

Se for somente no css, tenta um " transition: 1s; " onde 1s refere-se a 1 segundo

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .