1
personal someone has how to explain to me how it does this effect when it descends the scroll appears a white backgrond slowly
https://blackrockdigital.github.io/startbootstrap-creative/
would be done with Transition ?
1
personal someone has how to explain to me how it does this effect when it descends the scroll appears a white backgrond slowly
https://blackrockdigital.github.io/startbootstrap-creative/
would be done with Transition ?
2
I made an example here using jQuery, which when detecting the movement of the scroll bar, checks its positioning with .scrollTop()
and change the menu property as the bar moves.
Note that the transition effect is in css in the following line:
transition: 0.5s ease-in;
See the result:
$(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
If it is only in css, try a "Transition: 1s; " where 1s refers to 1 second
Browser other questions tagged html5 css3
You are not signed in. Login or sign up in order to post.