¿Qué te parece? Un efecto interesante ¿No? Podría ser útil por ejemplo en una landing page para dar a conocer algún producto, o para crear una cronología en un portfolio. 

Una vez más, los controles para activar la transicion,  dependen del selector target de CSS3. En cuanto a su implementación, no te llevará más de 5 minutos tenerlo funcionando, sin necesidad de tener conocimientos de programación, puesto que es solo CSS. 

En primer lugar situaremos los div, que contendrán lo que sea que queramos mostrar en cada escena:

<div id="inicio">
    <p>SCROLL DESLIZANTE CON CSS</p>
    <p>(UNA FORMA SENCILLA Y ELEGANTE DE SCROLLEAR)</p>
    <img src="/batmanyrobinmeme3.jpg" alt="meme de batman y robin 1" />
    <a class="next" href="#escena1">COMENZAR...</a>
</div>
<div id="escena1" class="panel">
    <p>CREA UN SIMPLE EFECTO SCROLL CON UNAS POCAS LINEAS DE CSS Y SIN USAR JAVASCRIPT</p>
    <img src="/batmanyrobinmeme.jpg" alt="meme de batman y robin 2" />
    <a class="next" href="#escena2">SIGUE LEYENDO...</a>
         
</div>
<div id="escena2" class="panel"> 
    <p>LOS ENLACES ANIMAN EL CONTENIDO MEDIANTE TRANSICIONES CON AYUDA DEL SELECTOR TARGET</p>
    <img src="/batmanyrobinmeme4.jpg" alt="meme de batman y robin 1" />
    <a class="next" href="#escena3">CONTINUA...</a>
         
</div>
<div id="escena3" class="panel"> 
    <p>PARA MAS INFORMACION VISITA LA ENTRADA EN EL BLOG DE DESARROLLO WEB DE <a href="https://mmteam.controldedominios.com/entradaBlog.asp?blog=3&cod=55">MMTEAM.CONTROLDEDOMINIOS.COM</a></p>
    <a class="next" href="#escena1">VOLVER A EMPEZAR</a>
    <img src="/batmanyrobinmeme2.jpg" alt="meme de batman y robin 3" />  
</div>

Son 4 divs con sus respectivos contenidos, no parece que haya nada especial, salvo por los enlaces. Cada enlace apunta al div siguiente lo que nos va a permitir saltar de uno a otro.

Para que los cambios entre secciones se hagan con efecto deslizante tendremos que usar un poco de CSS:

html{      
    width:100%;
    height:100%;       
}
 
body{
    margin:0;
    width:100%;
    height:100%;
    background-color:#FA5858;
}
.panel{
    position:relative;
    width:100%;
    height:0;
    overflow:hidden;
    -webkit-transition: all 700ms ease-out;
    -moz-transition:all 700ms ease-out;
    transition: all 700ms ease-out;
}
#inicio{
    position:absolute;
    width:100%;
    height:100%;
    font-size:70px;
    overflow:hidden;
}
 
#escena1{
    background-color:#D7DF01;  
}
 
#escena2{
    background-color:#00BFFF;  
}
 
#escena3{
    background-color:#FF8000;  
}
 
.panel:target{
    height:100%;
}

La clave de la animación esta en ocultar todos los div con "height:0", para posteriormente devolverlos a su tamaño original, mediante una transición CSS. Esta transición es disparada por el selector target, el cual cambiara el estilo correspondiente, en este caso la altura, al div que contenga el enlace pulsado.

Para poder iniciar el efecto es necesario tener un div fijo que no se anime, ya que de lo contrario estarían todos contraídos y no tendríamos que pulsar, en este caso el div inicio. Al ser todo posiciones absolutas, este div quedara abajo cuando se muestren los demás, por lo que no se verá una vez iniciado el efecto.

También es importante aplicar el "overflow:hidden" a cada sección, para evitar las barras de scroll, y que el usuario pueda scrollear sin usar los enlaces.

Y eso es todo, podría seguir dándole vueltas pero es que no hay mas, son 4 enlaces, una transición y el selector target de CSS3. Si necesitas mas información, descarga el código fuente desde estos enlaces, o pregunta lo que quieras.