desplazamiento animado con CSS3

Question

¿Hay alguna manera de animar el desplazamiento con CSS3?

¿Algo como esto?

@-webkit-keyframes scrolltoview 
{ 
    0% { scrollTop: 0; } 
    100% { scrollTop: 30%; } 
} 

Cómo poner en el CSS dónde está el punto fijo de la animación?

Answer 1

animaciones CSS3 trabajar con propiedades CSS solamente. esto no es posible dentro de los confines de css.

Answer 2

No creo que esto sea posible con css3, pero si entiendo su pregunta correctamente, es muy fácil con jquery.

Salida:

http://demos.flesler.com/jquery/scrollTo/

http://api.jquery.com/scroll/

Answer 3

Como se explicó here puede hacerlo usando margin-top truco y actualizando la posición de desplazamiento dinámicamente. Puede consultar el demo. Código es sencillo:

// Define the variables 
var easing, e, pos; 
$(function(){ 
    // Get the click event 
    $("#go-top").on("click", function(){ 
    // Get the scroll pos 
    pos= $(window).scrollTop(); 
    // Set the body top margin 
    $("body").css({ 
     "margin-top": -pos+"px", 
     "overflow-y": "scroll", // This property is posed for fix the blink of the window width change 
    }); 
    // Make the scroll handle on the position 0 
    $(window).scrollTop(0); 
    // Add the transition property to the body element 
    $("body").css("transition", "all 1s ease"); 
    // Apply the scroll effects 
    $("body").css("margin-top", "0"); 
    // Wait until the transition end 
    $("body").on("webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd", function(){ 
     // Remove the transition property 
     $("body").css("transition", "none"); 
    }); 
    }); 
}); 

@AndrewP nos proporcionó una buena working example basado en esta idea

Answer 4

he descubierto una mejor forma de animar el desplazamiento, que es el uso de JavaScript para traducir el cuerpo del documento. Las ventajas de animar con traducir sobre margen o posición están bastante bien documentadas (http://goo.gl/nA4ccd). La conclusión es que, al animar elementos, la GPU siempre hará un mejor trabajo.

Aquí hay un ejemplo que calcula la posición actual del usuario desde la parte superior de la ventana y luego vuelve a traducir suavemente a la parte superior de la ventana. Suponga que un usuario haga clic o toque evento activó la función backToTop.

verlo en acción: http://naayt.github.io/starting_point/

function whichTransitionEvent() { 
    var t, 
     el   = document.createElement('fakeelement'), 
     transitions = { 
     'transition':'transitionend', 
     'OTransition':'oTransitionEnd', 
     'MozTransition':'transitionend', 
     'WebkitTransition':'webkitTransitionEnd' 
    }; 

    for (t in transitions){ 
    if (el.style[t] !== undefined){ 
     return transitions[t]; 
    } 
    } 
} 

function backToTop() { 
    var pos_from_top = window.scrollY, 
     transitionend = whichTransitionEvent(), 
     body   = document.querySelector("body"); 

    function scrollEndHandler() { 
    window.scrollTo(0, 0); 
    body.removeAttribute("style"); 
    body.removeEventListener(transitionend, scrollEndHandler); 
    } 

    body.style.overflowY = "scroll"; 
    window.scrollTop = 0; 

    body.style.webkitTransition = 'all .5s ease'; 
    body.style.transition = 'all .5s ease'; 

    body.style.webkitTransform = "translateY(" + pos_from_top + "px)"; 
    body.style.transform = "translateY(" + pos_from_top + "px)"; 

    transitionend && body.addEventListener(transitionend, scrollEndHandler); 
} 

Answer 5

Ésta es una función muy simple Js que hice para animar + desplazarse por una página web.

var Current_scroll_Y=0; 
var Target_scroll_Y=0; 
var scroll_Speed = 15; 

function animate_Scroll(Y) 
{ 
    Target_scroll_Y = Y; 
    screen_Y = Math.floor(window.scrollY); 

    //Scroll Down 
    if(screen_Y<Y) 
    { 
    var myWindowScroll = setInterval(function(){ screen_Y = screen_Y+scroll_Speed; if(screen_Y>=Target_scroll_Y){ clearInterval(myWindowScroll); return;} window.scrollTo(0, screen_Y); }, 3); 
    } 
    //Scroll Up 
    if(screen_Y>Y) 
    { 
    var myWindowScroll = setInterval(function(){ screen_Y = screen_Y-scroll_Speed; if(screen_Y<=Target_scroll_Y){ clearInterval(myWindowScroll); return;} window.scrollTo(0, screen_Y); }, 3); 
    } 


}//End animate_Scroll