19

CSS3でスクロールをアニメーション化する方法はありますか？

このようなもの？

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

アニメーションの開始点はどこにあるのですか？

4

5 に答える 5

15

ここで説明するように、トリックを使用してmargin-topスクロール位置を動的に更新することでそれを行うことができます。デモを確認できます。コードは単純です：

// 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は、このアイデアに基づいた優れた実例を提供しました

于 2013-06-19T11:57:41.693 に答える
9

css3アニメーションは、cssプロパティでのみ機能します。これは、cssの範囲内では不可能です。

于 2012-04-21T22:10:01.533 に答える
4

スクロールをアニメーション化するためのより良い方法を発見しました。それは、JavaScriptを使用してドキュメントの本文を翻訳することです。マージンや位置よりも変換を使用してアニメーション化することの利点は、十分に文書化されています。肝心なのは、要素をアニメーション化するとき、GPUは常により良い仕事をするということです。

これは、ウィンドウの上部からユーザーの現在の位置を計算し、ウィンドウの上部にスムーズに戻る例です。ユーザーのクリックまたはタッチイベントがbackToTop関数をトリガーしたと想定します。

実際の動作をご覧ください：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);
}
于 2014-12-18T07:30:46.810 に答える
0

これはcss3では不可能だと思いますが、あなたの質問を正しく理解していれば、jqueryを使用すると非常に簡単です。

チェックアウト：

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

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

于 2012-04-21T17:22:17.023 に答える
0

これは、Webページをアニメーション化してスクロールするために作成した非常に単純な.js関数です。

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
于 2016-06-27T15:34:20.387 に答える