como animar mi web al bajar el scroll

futusystem · #1 (**permalink**) 30/09/2014, 12:49

quiero darle animación a mi web mientas bajo el scroll, mi pagina principal tiene aproximadamente un alto de 1500 px, lo que quiero es que la capa que esta mas o menos por el px 700 se mantenga invisible al cargar la pagina y luego cuando baje un poco el scroll hasta llegar a donde esta la capa haga un efecto de aparición.

Alexis88 · #2 (**permalink**) 30/09/2014, 13:24

Es un tema del que ya se ha tratado en el foro. Dale un vistazo a esto.

Saludos

futusystem · #3 (**permalink**) 30/09/2014, 13:57

Cita:

Iniciado por Alexis88

Es un tema del que ya se ha tratado en el foro. Dale un vistazo a esto.

Saludos

hola Alexiss88, gracias por responder, la verdad es que no entendi el codigo

en el ejemplo aparece solo con <div></div> yo quiero es que lo haga a un div en especifico. y no entendi como aplicarlo a mi ejemplo.

te paso mi codigo:

Código PHP:

Ver original<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    <body>
        <?php
            include "inc/cabecera.html";
        ?>
        <div id="cuerpo">
<div class="container1">
    <div id="capa">
        <h4>titulo</h4>
        <p>
            descripcion
        </p>
    </div>
 
    <div id="capa" style="margin-left:30px; margin-right:30px;">
                    <h4>titulo</h4>
                    <p>
                        descripcion 
                    </p>
                </div>
 
 
                <div id="capa">
                    <h4>titulo</h4>
                    <p>
                        descripcion
                    </p>
                </div>
            </div>
        </div>
        <?php
            include "inc/footer.html";
        ?>
    </body>
</html>

solo quiero aplicar el efecto al id llamado capa

Alexis88 · #4 (**permalink**) 30/09/2014, 15:43

Si viste el código del ejemplo que puse en el enlace que adjunté en la primera respuesta que hice, notarás que tomo a varios elementos <div> y aplico el efecto a cada uno de ellos. En tu caso, basta con que lo tomes por el id que me indicas, para lo cual puedes usar el método getElementById y, al tratarse de un elemento, ya no tendrías la necesidad de usar el bucle que utilizo en el ejemplo.

Saludos