hola mi duda es como puedo hacer para que me aprezcan animaciones al hacer scroll a una pagina y en javascrip me jale una determinada animacion de una hoja de estilos este es mi codigo.
<!doctype html>
<html>
<head>
<title>Scroll Effect</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.cabecera{
height: 400px;
}
.cont-magia{
height: 450px;
width: 100%;
background: #ccc;
}
#magia
{
transition:all 1s;
}
.pie {
height: 700px;
}
.piee
{
height: 800px;
}
</style>
</head>
<body>
<div class="cabecera"></div>
<div class="cont-magia">
<h1 id="magia">hola mundo</h1>
</div>
<div class="pie">
</div>
<div class="piee">
</div>
<script type="text/javascript">
function Scroll(){
var top = document.getElementById('magia');
var ypos = window.pageYOffset;
if(ypos > 1) {
top.style.opacity = "1";
}
else{
top.style.opacity = "0";
}
}
window.addEventListener("scroll",Scroll);
</script>
</body>
</html>
