web-dev-qa-db-fra.com

animer le défilement avec CSS3

Est-il possible d'animer le défilement avec CSS3?

Quelque chose comme ça?

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

Comment mettre dans le css où est le point de départ de l'animation?

javascripthtmlcsshtml5css3
18
Spiff

les animations CSS3 ne fonctionnent qu'avec les propriétés CSS. ce n'est pas possible dans les limites de CSS.

9
David Wick

Comme expliqué ci-dessus here vous pouvez le faire en utilisant margin-top astuce et en mettant à jour la position de défilement de manière dynamique. Vous pouvez vérifier le demo . Le code est simple:

// 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 a fourni un Nice exemple de travail basé sur cette idée

15
mente

J'ai découvert un meilleur moyen d'animer le défilement, qui consiste à utiliser JavaScript pour traduire le corps du document. Les avantages de l'animation avec translation sur marge ou position sont jolis bien documentés . En fin de compte, lors de l'animation d'éléments, le processeur graphique fera toujours un meilleur travail.

Voici un exemple qui calcule la position actuelle de l'utilisateur à partir du haut de la fenêtre, puis convertit en douceur vers le haut de la fenêtre. Supposons qu'un utilisateur clique ou touche l'événement déclenche la fonction backToTop.

Voir en action: https://antibland.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);
}
4
Andy Hoffman

C’est une fonction .js très simple que j’ai créée pour animer + faire défiler une page 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
1
Really Nice Code

Je ne pense pas que ce soit possible avec CSS3, mais si je comprends bien votre question, c’est très facile avec JQuery.

Check-out:

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

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

0
Connor