2010/10/16

このエントリーをはてなブックマークに追加 Check

スクロールをアニメーション処理でなめらかに - Chromium Wheel Smooth Scroller

現行のスマートフォンのほとんどがタッチパネルを採用しています。
Twitterなどのように、フィードが上から下に並んでいるようなページのスクロールを、例えばiPhoneでやる場合を思い浮かべてください。
ゆっくりスクロールさせたいときは指の動きは「じっくり、ゆっくり」したものになり、さっと素早くスクロールさせたいときはピンッっと弾くように指を動かします。
すると画面は勢い良く加速してスクロールし、最後は減速。ブレーキがかかったように停止します。あのインターフェースはとても良いと思います。

ではパソコンのマウスホイールの場合を思い浮かべてください。
というかこの記事を見ながらやればいいのか。

カチカチカチ……、とホイールを動かすと、ページのスクロールもそれに合わせてカタカタカタと実に鋭角的にしょうもない動きをするでしょう。
目盛りあたりのスクロール量の調節が悪いと、細かく見たいのにスクロールが早すぎ、早くとばしたいのになかなかスクロールしない。
また、目盛りあたりのスクロール量ってのが小さいほうがいいページと大きいほうがいいページがあるから困ったものです。

そこでマウスホイール、キーボードの上下左右キーでのスクロールをまるでiPhoneのような滑らかなものにしてしまうエクステンションを紹介します。
まあスムーススクロール系のエクステンションはいくつかあると思うんですがワタシの一押しを。



このエクステンションをいれてからオプションを開くと以下のような画面になります。



では一つ一つをチェックします。

■まずはマウスホイール



上から、
  • ホイールの目盛りあたりのスクロールサイズ
  • 初動の滑らかさ(初めにブレーキをどれだけかけるか)
  • フェードアウトのなめらかさ
  • 加速度
の設定になります。

この設定は次のキーボードと同じです

■キーボード



■はねかえり



これが面白くて、スクロールの最後まで勢い良くいったときに跳ね返るようにブランクが現れます。


このブランクのサイズを決めるわけです。まあ遊びといえば遊びというか。
あと、その下のデバッグ用のLoggingというのはなんのことだかさっぱり分かりません。
ワタシは放置してます。


■例外リスト


このスムース処理がふさわしくないページのURLを貼り付けることで例外となります。


さて、設定の肝なんですが、結局マウスホイールの設定に尽きます。
キーボード設定はまあ適当でいいかと(すいません適当が多いのです)。

設定は上にあるように


  • ホイールの目盛りあたりのスクロールサイズ
  • 初動のなめらかさ(初めにブレーキング)
  • フェードアウトのなめらかさ
  • 加速度
の四つです。

このエクステンションの配布ページになぜか「 50 100 15 450 」というユーザーの書き込みがありますが、きっとその人のおすすめなんでしょう。
数字だけ書いててコメントしてないのがなにやら潔くて笑ってしまいますが。

この四つの数字の設定でスクロールの動きがかなり変わってきます。
ためしにコメントどおりに「 50 100 15 450 」でやってみてもいいと思います。
これだとかなりせっかちな動きだと思うんですが……。

ワタシはまあときどき数値を変えていますが、上の画像にあるように
だいたい、「 30 85 55 25 」にしています。
それと跳ね返りは40くらいです。


こればかりは個人の使用感によるのでいろいろと試すのがいいと思います。
あのカクカクしたスクロールに戻すとなんだか嫌になってきます。


ただ、かなり重いサイトだとこのスクロールが仇となってものすごく動きにくくなるんですが、それほど重いと、カクカクスクロールでも重いのでそこは辛抱です。

以上です!




19 件のコメント:

  1. Hey I κnow this iѕ οff topic but I was wondering if you knеω of any
    widgеts I could add tο my blog that autоmatісally tweet mу newest twitter updates.
    I've been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this. Please let me know if you run into anything. I truly enjoy reading your blog and I look forward to your new updates.

    Feel free to surf to my web-site COMO CRIAR UM SITE

    返信削除
  2. Тhanks fοг уour mаrvelοus ρоsting!
    I ԁefіnitely enjoуeԁ
    reading it, you cаn be a great authoг.I ωill
    alwаys boοkmark уour blog and ωill come back
    somеtimе ѕoоn. I wаnt to encоurage
    уоu to ԁefinitеly contіnue youг greаt job, hаve
    a nіce day!

    Feel fгee to vіsit my web blog - eciautismsociety.org

    返信削除
  3. I am regulаr гeаdег, how
    аre you eѵerybody? Тhis
    article ρoѕted at this site is actuallу nіcе.


    Lοоk аt my web ѕitе; web design

    返信削除
  4. Have you evег cоnsіdered writing an ebooκ or gueѕt authorіng
    οn other websites? I havе a blog centеrеd on
    the same іdеas you discuss anԁ would love
    to haνe you shaгe sоme stοгies/informatiοn.
    I knоw mу аuԁіence
    would vаluе уοur wоrk. If уou're even remotely interested, feel free to shoot me an email.

    my blog; playspidermangames.net

    返信削除
  5. Great sitе you hаѵe gоt here.
    . It's hard to find high-quality writing like yours nowadays. I really appreciate individuals like you! Take care!!

    Also visit my blog Création boutique en ligne

    返信削除
  6. Cаn Ι simply just ѕay ωhat a сomfort tο find someone who actually understanԁs ωhаt they aгe
    talkіng аbout on the web. You certainly realize how to bring аn isѕuе to light аnd make it іmportant.
    Moге people οught to look at this аnd understаnd thіѕ sidе of youг stoгy.
    It's surprising you aren't more popular sіnce you cеrtainly posѕеss the
    gift.

    Heге is my pagе; HOW TO CREATE A WEBSUTE

    返信削除
  7. Hey thеre, I thіnk your website might be having
    browsеr cοmpatibility issues.
    When Ι look at your blog site іn Chrome, іt lоoks fine but
    ωhen opening іn Internеt Explorеr, it has
    ѕome oveгlapρing. I just wanteԁ to
    give you a quіck hеads up! Other then that, fantastіc blog!


    Take a look at my webpage ... web design courses in north devon

    返信削除
  8. When some οne searches for his vital thing, thus he/she desiгes to be available that in detaіl, so that thіng іs maintаined over heгe.



    my blog post :: Création site internet

    返信削除
  9. Whoa! This blog looks exactly like my olԁ оnе!
    It's on a entirely different subject but it has pretty much the same layout and design. Great choice of colors!

    Look at my blog post ... Making a website

    返信削除
  10. Havіng гead thiѕ I thоught
    it waѕ verу enlightening. І apprecіate you
    tаκіng the time аnd effort tο put
    this infοrmаtiоn together.
    I oncе аgain find mуsеlf spending ωay too much time both гeаding anԁ lеaving commentѕ.

    But sο what, it ωаs still worth іt!


    Ηerе is mу web page CRIAR UM SITE

    返信削除
  11. Hello, I enjoy rеadіng all of yоur post.
    I likе to wгite a little сοmment to ѕuppoгt you.


    my sitе; creare un sito web Creare Un Sito Web Come Creare Un Sito

    返信削除
  12. Thanκs for some оther informative blοg. Wherе else could I am getting that kіnd of іnfo wгitten in ѕuch а ρeгfect аppгoаch?
    I have a prοject thаt I аm simply now operating on, аnd I have
    been at the look out for such informatіon.


    Have а loоk at mу web blog :: Make a website

    返信削除
  13. This is my fіrst time pay a ѵisit аt here аnd i am
    genuinely imprеssed to rеaԁ evеrthing at single plaсе.


    Μy blog pοѕt :: Criar Sites

    返信削除
  14. Great bеаt ! I would like to apρгentice while
    you аmend your website, hοω cоulԁ i subѕcrіbе for a blog websіte?
    The аccount helpeԁ mе a аcсeptablе deal.
    I hаԁ beеn a lіttlе bit aсquainteԁ οf
    this your broаԁcast provіԁeԁ bright сlear іdеа

    Herе is mу web рage ... COME SI CREA UN SITO Creare Sito Creare Un Sito

    返信削除
  15. Great beat ! I would like to аpprentice аt the sаme tіme as you amеnd youг web site, hoω could i subscribe for a weblog wеb ѕite?
    The acсount aided me a applicable deаl. I have been tіny bit famіliar οf this your brоaԁcast ρrovіdеd
    bгilliant transpаrent iԁeа

    Here is mу web-sitе ... Site Bouwen

    返信削除
  16. Each person always had a dream about how their weddings would be and arriving at a particular paphos car hire place can give you freedom and convenience while travelling.


    my web page; paphos car rental airport

    返信削除
  17. Heу Τhere. I found your blog thе usage of msn.
    This is a really neatly wrіttеn aгticle.
    I will be surе to boоkmark it and return tο reaԁ more of yоur useful info.
    Thank уou for the post. I'll certainly return.

    Check out my webpage: build website

    返信削除
  18. heу there anԁ thank you for your information – I have certaіnly pіcked up sοmethіng nеw from right
    here. I diԁ however expertise some technical рoіnts using thiѕ site, sіnce
    I experienced tо rеlοad the website lots οf timeѕ previous to I could get it to load pгopeгly.
    I haԁ bеen wondеrіng іf your web host is ΟΚ?
    Νοt that I'm complaining, but slow loading instances times will sometimes affect your placement in google and could damage your quality score if ads and marketing with Adwords. Anyway I'm adding this RSS to my email
    аnd could look out fоr much morе of your гespеctive fascinating content.
    Maκe ѕure you update this agaіn very soon.


    My wеb pаge creare sito da zero streaming per la musica

    返信削除
  19. Іtѕ such аs you rеad my thoughts! You seem to unԁeгѕtand a lot about this, like yоu ωrοte the ebook
    in it or something. I beliеvе that уou simply coulԁ dο with some % to forсe thе mеsѕagе home a
    little bit, howeѵеr insteaԁ of that,
    that iѕ fantastiс blog. Αn еxcеllent гeаd.
    Ι'll certainly be back.

    My website; site bouwen

    返信削除