2016-09-06

TweenMaxを使ってオープニングアニメーションをつくる。

日本でもTweenMax（トゥイーンライブラリ）を使用しているリッチサイトが大分増えてきた気がますねー。大体、動きがかっくいいサイトのソースを覗くと「TweenMax」の文字が見受けられます！

本記事は、TimelineMaxの基本的なアニメーション操作と記述方法のメモ書き。

オープニングアニメーションっぽい適当なDEMO| TimelineMax

See the Pen TweenMax sample by @paradox_tm (@takumaro-web) on CodePen.

以下、ソース抜粋

//TweenMaxを使用するための宣言
var timeLine = new TimelineMax();

//セレクターを指定
var elm1 =  document.getElementById("js-anim-01");
var elm2 =  document.getElementById("js-anim-02");
var elm3 =  document.getElementById("js-anim-03");
var elm4 =  document.getElementById("js-anim-04");
var elm5 =  document.getElementById("js-anim-05");
var elm6 =  document.getElementById("js-anim-06");

//第1引数：セレクター指定.
//第2引数：秒数指定（1000msではなく1秒単位）.
//第3引数：アニメーション指定.
//第4引数：オプション指定.

//.toでタイムラインをつくっていく。
//コールバックは、onComplete: function(){}を指定.

//詳しくは以下を参照
//https://greensock.com/get-started-js
//https://ihatetomatoes.net/wp-content/uploads/2016/07/GreenSock-Cheatsheet-4.pdf

timeLine.to(elm1, 1, {opacity: '1', x:0, rotation:360}, "blueGreenSpin")
        .to(elm1, 1, {opacity: '0'})
        .to(elm2, 1, {top: '50%',opacity: '1'})
        .to(elm2, 1, {opacity: '0'})
        .to(elm3, 1, {right: '40%',opacity: '1'})
        .to(elm3, 1, {opacity: '0'})
        .to(elm4, 1, {opacity: '1', width:"50%", top:"100px", ease:Power2.easeInOut})
        .to(elm4, 1, {opacity: '0'})
        .to(elm5, 1, {opacity: '1', x:0, y:0, rotation:1440})
        .to(elm5, 2, {opacity: '0',top:'60%', ease:Power2.easeOut, onComplete:
                      function(){
                        //アニメーションが終わった後の処理
                     }})
        .to(elm6, 1, {opacity: '1',scale:"2"});

CDNの利用

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

2016年7月16日に最新版の1.19.0をリリースされた模様。 greensock.com

Cheat Sheet

https://ihatetomatoes.net/wp-content/uploads/2016/07/GreenSock-Cheatsheet-4.pdf

触ってみての感想

直感的でわかりやすい！！
他にも色々なオプションがたくさんある！！
Canvas/WebGLなどの制御も可能！！
jQueryも使える！！

胸がワキワキしちゃいますね！

2016-08-09

facebookのOGPキャッシュをボタン1つで消せるBookmarkletを作製しました。

ページ公開直後のコンテンツに対してシェアボタンを押してもOGP情報をうまく取得できずシェアされない場合がありますよねー。これは公開前のURLにfacebookのクローラがアクセスしてしまうことによって、facebook側にキャッシュが残ってしまいそちらを参照してしまうのが原因だそう。（つまり、空ページをfacebook側がキャッシュしてしまっている。）

今まではページが公開されるとfacebook側が提供しているデバッグページにてキャッシュをクリアしていたけど少し煩わしさを感じていた。いちいちfacebookにログインしなきゃいけないし、対象のURLをコピーして貼り付けなきゃだし、ボタンを押さなきゃいけないわけで...

『なんとかこの作業について簡略化・自動化できないか』と調べたところAPIの「https://graph.facebook.com/?scrape=true&id=URL」にPOSTメソッドでアクセスすると、再クロールしてくれるという記事を発見！

公開ページそのものにこのスクリプトないしプログラムを組み込めば、完全に自動化できるけど閲覧する度にPOSTするのもパフォーマンス的にいかがなものか？と思いBookmarkletでポチッとボタンを押すだけでキャッシュを消すことができるものを作製することにした。

自分は普段使いのブラウザがChromeなのでこちらのBookmarkletで問題ないのだが、現場から「Firefoxで動かねぇーよ！」という声が上がってきた。実際に確認してみるとなぜか、FirefoxだとBookmarklet内でAjaxを使ってPOSTできない..（誰かエロい人教えてください。）

2016/9/8修正
実は圧縮でミスってることがわかりました。
YUI Compressorを使用していたのですが、圧縮に問題が...
他の圧縮ツールを使用したところ、問題なくできたのでこちらを使用ください。
こちらは、Firefox/Chromeでも使用できます。

Bookmarkletソース（Firefox/Chrome用）

javascript:(function(){!function(c,b,a){a=c.createElement("script");a.src="//j.mp/1bPoAXq";a.onload=function(){b(jQuery.noConflict(1))};c.body.appendChild(a)}(document,function(a){a.ajax({url:"https://graph.facebook.com/?scrape=true&id="+location.href,method:"post"}).done(function(){alert("OGPキャッシュを消しましたー。")})})})();

これで、facebook側が提供しているデバッグページを使わずに済むので煩わしさが無くなりそう。

ちなみにIEやsafariでは試してないです。

参考

web-tan.forum.impressrd.jp

developers.facebook.com

superuser.com

2016-07-28

【canvas】画像を回転させながら落とす

最近、インタラクティブな実装に興味を持ち始めました。
覚え書きとして、canvasで画像を用いて回転させながら落ちるアニメーションの実装方法を記しておきます。

DEMO

補足
- 画像を複数個使用することを想定して、配列を用いています。

JavaScriptコード

$(function(){
var canvas = document.getElementById ('canvas');
var ctx = canvas.getContext ('2d');

function canvasbg(pageY,pageX,flag){
  var counter1 = 0;
  var counter2 = 0;
  var TO_RADIANS = Math.PI/180;
  var SPEED = 5;
  var X = pageX;
  var Y = pageY;

  function start() {

    x = [];
    y = [];

    /*初期座標*/
    x[0] = X / 2;
    y[0] = 0;
    
    x[1] = 150;
    y[1] = 0;

    img = [];
    img[0] = new Image ();
    img[0].src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAxCAMAAACvdQotAAAABGdBTUEAALGPC/xhBQAAAwBQTFRFTS8SjHlse1Q4iXRisKCUtJmBlHVdkH5qmoVwqJF5iGNHZ0UpZ0csXC8SUSYTg2pUXjwgbU41g2xQYEAkVDYa1cKxdFRBl3Vbk3dkYz8giGpXZUYwj3ZippWDzbina00zsZ2Jbkouup6KdVc9a084n4h4nIdxgmpVmHxpf2JPhGdPeVpBwqmWeVlF1L+wqpeGvKubw7GhY0QpXzwkVjMWdVQ85dDB59jJUzMXrpiG49C/vKOQ4NDC2se13Mi1u6mYAAAAjmxYjmpIo56dsbe3k2BEl31uqI5ywMHCxK+QsZR7n5CD9/DeqWhKCg0RWllZaWVkNDMysKmlYmBhi4ySJyUk7dvGU1JUjWE9gVQucEkrilgtekkkfUwWnmREUCQLm2A0dEkSy7qpVRwC5uryx7qyHRwZbG1rd3d33+Xlg1lBhm5XimREyLOd5e3v6ufk08a8XSgNrJF2nGY8iE0mnGI3fkUjYjkRej8S4+LhAQABERAOCgoKfFk8FBQTgmFDyM3QLCwt5NbLbUQjooJtjWpNhWtP1sS3Z0ccfU0n+ff31c3MkVclWC0Kg0khbj0LlVw2lVowf0UTajYJnnle7N/T7+7t+Pv9r5iL2tjZjnBc/fjypYl0rpWCdEkft5+Kd1AylGAv+PXujVs4bEAU9Pb4SCQFZzQNZC0CcjwUdDgKFxga8efg397eaT8dkndfwKmUlm5RkVw0hFg2cUEahEwbTR8EdUgYlF84gUYZdUEUhVAkHh8e/P7/lWc9//73XSkBhVQui1EkWy4K1czG1dHRi1kxeEYTnGxGnGhBomhAeUQbYjMNdT4MbjwXVCQAgEITbjcNViwGc0ASbTsSkl4yazoOcT0PlmI2VCYIZTAITikLdD4TVigCTyQBi1cpeEIUe0YcfUgfbz4UeEQZfEIUfUgYe0kbXCwGe0UWmGM9aDoR6OrshlQnjlgsfUcbekgeekgWgk4hgEwffkociFMneUQYfkYYeEIXj1ovc0AWdkIaekUY////fEcbe0YaIEcY1AAAAEF0Uk5T+2Pd3mOanHZbgsa9xfr+wOzctefsL8OVPsWo3IF2PNVvundQ0G+IlJGlS8dgtA9CRErk6vnKBxPzVBsrBSYDVABZxbcMAAAFzUlEQVRIx5XWZVRbSRgGYNa1W3dvoVDcXXrOulW3Lrs16lRpCwVKBS1a3F2KuwSXBkkgFAghQiAhQILEPbnJToDdhW0p8J7kx3czz8y5mbnfuUp7Fh2lt65Y6mjqaC+OfPzN7SVGKtqLIZtL7vkh8Rs/t144MVke5ENnp2G1Vi+Y7FnRyfYrLh46v0pzoWS1KUZAJjO4snTi5oUR4zXY4WEmSS6TM9JSty2IaJZIpghDzsDhbRZC1uA4wyz5VARUffP5ifHKnlIWiyadzFn5ebUFrKIfVNo0IJTK5VKpvLT8jYHJfER7myGOy+WwKzgMqZTEFAzgdechZhuxZDRa1M/jyPhyOYkk4OPN3k8249vt7UV0HhvcugyEzBASPzF/H9FMPWUfqAD8SQAIhYDEL/vUYk5iYpATQJ/gcKWUaSETkwuSCotQq3TnIirYunt+JJrg/n3yyAhzhEwReyUlwSu4gtplVnOQDbVsEoIkl4I1RpgkipgykSDq57CaaOVEtTmIVjqNWZTz7FnyWRYDIaGwCxJ82LGxnsn8YtxWy7lWYeY8jg6PcfcsEiIm0L0iuBcowyOfUd7oG7+baKJyIi++zo5o/PVEf28v2J1Tk+WL8BO1H75zFeMPlEucPRwuuF65EBEDR8P7eeTCiw52rtnj2dG+S7R03iZWRthY54MOoYf2Hngdeut6XZ1fR1G4Q+glpyeuKY2R8LRvdv2fmCjfLqjOb/T+1nGv4/6qrGAJUzAUfyvloKOT49Gwm3cKRu//97hNk12pJ9ETwSFV+50yHx0ej/qljcWCuWdDl50yXSqzvfPgBYEEU6tZxGSluH+CHZwVtu9RpW1lBBTnz2J1XbsJHXKpzLSNgG7UweuLiV/MInp/lp/mItyyoEsulbYH7KCYHj4N8zgLuuxy2PbJFSjv+AR7pHPpLKKC7WgqFceHVH2XWfnoMhSV2zNAEF59Cv0EyktQ1HMmZ4SJXG48k3zW95JV2tSeB1X98WTfOHTEE8MIPHP95xpQHr0CHSlknWZxkcrWM4lN5xBFMjAYHwJB42FgVq/qltaW6nxQ2oVBNdFFwywWE7t79r00BLW/wmCQV5/WQFBi3Petzc0td+3huZPlnZzYYam8qGTHDGK12xRJqaurFwUk5cfdyAs+1tI6Ojram4A+7vxjXszjsdIRmVzYTTVQM/+H6BncLmwF87b+3txcXZZUKEpAlwUEggZQX8xKHgsaaGqSkqQwXv0ror7OFNli2t7S3Nra0tJy5m51dfPzH3JzcyPz8/Pd3Nyuu1/LvSqh0aRCAo9ez0ZQTbcoiLFR2t3q0an09h4L9mhsfAE+rxVpfOH6NLpdSIF18SZ7CKPWCPzRSrr4/r96y8rKwDcAjU4qjMnKujluNz6d0BuxXbAuPl3EY8tAm4bhwTJKm3x9fETToZ88WRf/PKQmJSXF2zsxMTEsKs7Tv43AptN5HC5oH/JhIjjQSksb6ut5E5OpqGBzuOSc+LzfaqCqKgiq8bj2wL9tuJ/Oq+DI5IqeW94JNkfpI18Ox4vDVQRMQxvq6MCMOd85d8vjXJz7A1xGxz0wniMT8vlC0NfLqRsAUe18KThFAt0R9BYpbWjo4UMCoQeHfIDEpeOC2gRchpxCkUgQCIQUzNZRogKITerASylDIBDQwC8SsVg8ONjd3T02NtadPAjjd4HAYGKJIhSZlGoAdlNJeyO1HADB0NAAGN4Ohve8UYQgHkwGfHCwC4MhiMWEhwOIVyhTvcmt1DNsEJIRFImY4I+rRRFRKFQtLiMjo62tDaNYbGysp7u9vSgjI70P+6XF9IHRVcb3NVCpVCLecOsK1U2bdmvoGzZ0ElF9nQ0N1L6+Pt+GTiwRa7hVVdf632NpbLN2u5HRdjUzq+mHSNtKx2zHLlWt7evXa2hofP2V1todZlaWs9qFtYW6mY26xcz+ZmlibrFOfedOGxsb9Z3rLMyt3/t2sfiXq3nzNyGTwPWnqzsiAAAAAElFTkSuQmCC";
    
     img[1] = new Image ();
     img[1].src = "data:image/png;base64,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";
    // img[2] = new Image ();
    // img[2].src = "";
    // img[3] = new Image ();
    // img[3].src = "";
    // img[4] = new Image ();
    // img[4].src = "";
    // img[5] = new Image ();
    // img[5].src = "";

    var time;
    time = setInterval(function(){
      draw(X,Y);
    },SPEED);

  }

  function draw(X,Y) {
    ctx.clearRect (0 , 0 , pageX , pageY);
    drawRotatedImage(img[0],x[0], y[0],counter1);
    drawRotatedImage(img[1],x[1], y[1],counter2);

    /*回転用 角度*/
    counter1 += 0.5;
    counter2 += 0.3; 

    /*落下スピード*/
    x[0] -= 1 * Math.random();
    y[0] += 2;
  
    x[1] -= 1 * Math.random();
    y[1] += 1;

    /*再描画判定座標*/
    if(y[0] > pageY + 20){
      x[0] = pageX / 2;
      y[0] = 0;
    }
    if(y[1] > pageY + 20){
      x[1] = pageX / 3;
      y[1] = 0;
    }
  }

  /*回転*/
  function drawRotatedImage(image, x, y, angle) {
    ctx.save(); 
    ctx.translate(x, y);
    ctx.rotate(angle * TO_RADIANS);
    ctx.drawImage(image, -(image.width/2), -(image.height/2));
    ctx.restore();
  }

  /*ループ*/
  window.requestAnimationFrame = (function(){
    return  window.requestAnimationFrame   ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        window.oRequestAnimationFrame      ||
        window.msRequestAnimationFrame     ||
        function(callback){
          window.setTimeout(callback, 1000 / 60);
        };
  })();

  requestAnimationFrame(start);
  sizing();
}

  function sizing(){
    $('#canvas').attr({height:$('#wrap').height()});
    $('#canvas').attr({width:$('#wrap').width()});
  }

  $(window).load(function(){
    pageY = $('#wrap').height();
    pageX = $('#wrap').width();
    canvasbg(pageY,pageX,0);
  });
  
});

初期座標、イメージパスを指定する。
画像を描画する際に回転用の関数を使用する。
角度をつける（インクリメント）
落下スピードを指定する。
最下部までいったら元の位置に戻す。

応用として、「雪」「落ち葉」「雨」などにも適応できそうです。

2016-07-12

配列の宣言で警告。

JSHintで警告が出ていた。

the array literal notation [] is preferable

日本語訳：“配列リテラルの表記が好ましいっすね。”

配列の初期化宣言にリテラルを使った方がよいらしい。

x = new Array ();

↓

x = [];

以上、覚書でした。

リテラルとは、プログラムのソースコードにおいて使用される、数値や文字列を直接に記述した定数のことである。変数の対義語であり、変更されないことを前提とした値である。プログラミング言語のコード中にリテラルが挿入される場合には、判別のために特定の書式を用いる必要がある。

www.weblio.jp

2016-06-22

最近よく使う、CSSプロパティ 3選(vw/vh,calc(),flex) - #レスポンシブwebデザイン

ここ最近よく使うなーと思うCSSプロパティの紹介。

Viewport units: vw, vh, vmin, vmax

ビューポートの縦・横に対する割合の単位ですが、
めっちゃ使えるなぁーと思う今日この頃です。

記事紹介

coliss.com

dev.classmethod.jp

Can I use 状況

Can I use... Support tables for HTML5, CSS3, etc

Android4.3以下は、フォールバックを用意しておけばガンガン使えんじゃん！って感じでガンガン使ってます。

特にお気に入りは、ビューポートに合わせて文字サイズが変更できるところですね。

coliss.com

※ 一部次に紹介するcalc()との組み合わせの内容が含まれております。

対象ブラウザや要件定義が合えば積極的に使っていきたいですね！

calc() as CSS unit value

calc()関数です。 calc = calculation(計算)の略でその名の通り、四則計算ができます。

レスポンシブwebデザインをやる上で今までは、Sass（SCSS）内で計算させて横幅等を指定していたのですが、これを使えば、そのまま「計算式」を「値」として指定できます。

もちろん、さらに洗練されたmixinにしても使えますね。

記事紹介

www.sassmeister.com

hyper-text.org

Can I use 状況

Can I use... Support tables for HTML5, CSS3, etc

Android4.3以下は、フォールバックを用意しておけばガンガン使えんじゃん！って感じでガンガン使ってます。

疑似要素で上下に画像を配置し、間の高さだけ背景を指定したい！といった場合に calc(高さ - 疑似要素で配置した大きさ*2 ) のように指定できたのに感動した記憶があります。

Flexible Box Layout Module

言わずもがなな感じがしていますが、便利ですねー。

記事紹介

coliss.com

css3のflexboxを使うとすごい簡単になるレイアウトを試してみた | スターフィールド株式会社

www.webcreatorbox.com

Can I use 状況

Can I use... Support tables for HTML5, CSS3, etc

ほぼ、接頭辞を付ければ問題なく使えます。今まで、JSで高さ揃えを実装し構築してたものについても、CSSのプロパティ1つで済む可能性があるというのはかなりでかい点ですね。

以上、最近よく使う、CSSプロパティ 3選でした。

2016-06-03

【自分メモ】cookieの値を取得する。

特定のcookieの値をだけを取得したい場合。

var getCookieValue = function(key) {
    var val = document.cookie.match(new RegExp('(^|\\s)'+key+'=([^;]+)'));
    return !!val && unescape(val[2]);
};

alert(getCookieValue("COOKIE名"));

参考URL blog.manaten.net

cookies.jsを使用した場合。

参考URL developer.mozilla.org

 /*\
 |*|
 |*|  :: cookies.js ::
 |*|
 |*|  A complete cookies reader/writer framework with full unicode support.
 |*|
 |*|  https://developer.mozilla.org/en-US/docs/DOM/document.cookie
 |*|
 |*|  Syntaxes:
 |*|
 |*|  * docCookies.setItem(name, value[, end[, path[, domain[, secure]]]])
 |*|  * docCookies.getItem(name)
 |*|  * docCookies.removeItem(name[, path])
 |*|  * docCookies.hasItem(name)
 |*|  * docCookies.keys()
 |*|
 \*/

var docCookies = {
  getItem: function (sKey) {
    if (!sKey || !this.hasItem(sKey)) { return null; }
    return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
  },
  setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
    if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return; }
    var sExpires = "";
    if (vEnd) {
      switch (vEnd.constructor) {
        case Number:
          sExpires = vEnd === Infinity ? "; expires=Tue, 19 Jan 2038 03:14:07 GMT" : "; max-age=" + vEnd;
          break;
        case String:
          sExpires = "; expires=" + vEnd;
          break;
        case Date:
          sExpires = "; expires=" + vEnd.toGMTString();
          break;
      }
    }
    document.cookie = escape(sKey) + "=" + escape(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
  },
  removeItem: function (sKey, sPath) {
    if (!sKey || !this.hasItem(sKey)) { return; }
    document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sPath ? "; path=" + sPath : "");
  },
  hasItem: function (sKey) {
    return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
  },
  keys: /* optional method: you can safely remove it! */ function () {
    var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
    for (var nIdx = 0; nIdx < aKeys.length; nIdx++) { aKeys[nIdx] = unescape(aKeys[nIdx]); }
    return aKeys;
  }
}


alert(docCookies.getItem("COOKIE名"));

2016-05-17

［jQuery]スクロールバーのデザインと実装方法と注意点 - 超軽量スクリプト Perfect Scrollbar

jQuery

一昔前だとスクロールバーのデザインモックを見ただけで吐きそうになっていましたが、今では便利なプラグインとCSS3といった技術を用いて比較的容易に実装できるようになりました。

本記事では、超軽量スクリプト Perfect Scrollbarを用いたデザイン性に富んだスクロールバーの実装方法を紹介したいと思います。

Perfect Scrollbarについて

Perfect Scrollbarについては、3年くらい前にcoliss様のサイトで紹介されていますのでそちらをご参照ください。

http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-perfect-scrollbar.html

ダウンロードはこちら

perfect-scrollbar

実装方法

準備するもの

jQuery
Perfect Scrollbar
HTML/CSS/JS
（あればデザインカンプ）

サンプルデモ

さっそくですが、今回自分が作ったサンプルを見ながら解説します。

これは線路を走る電車のつもりです...汗
サンプルデモのデザインについては、ご了承ください。

まずは、スクロールバーを出す部分を実装していきます。 f:id:paradox_tm:20160517154350p:plain

HTML

<div class="box">
 <div id="js-scroll" class="inner">
 <!-- スクロールさせるコンテンツ  -->
 </div>
</div>

.box：スクロールさせる部分を囲っています。
.inner:実際にスクロールさせる場所になります。

※ デザインによってマークアップは調整してください。

CSS

.box {
  height:320px;
  width: 320px;
  box-sizing: border-box;
  padding: 20px 30px 20px 20px;
  border: 1px dotted #333;
  margin: 50px auto;
  background-color: #fff;
}

/*こちらがスクロールさせる箇所 */
.inner {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  width: 280px;
  height: 280px;
}

それぞれのスタイルになります。こちらもデザインによって調整ください。
※ 但しスクロールさせたい箇所に「position: relative;とoverflow: hidden;」はつけるようにしてください。

JS

$(function() {
    $('#js-scroll').perfectScrollbar();
});

jQueryとperfectScrollbarを読み込ませた上で、指定してください。
GitHubを覗くと様々なオプションがありますが、今回はデフォルトの指定にしておきます。

気になる方は以下を参照してみてください。
https://github.com/noraesae/perfect-scrollbar

これで下準備完了です！

デザインの反映

ここでperfectScrollbar側から提供されているCSSを読み込ませると本家のサンプルデモと同じものができあがりますが、今回はオリジナルのデザインを反映させたいのでその提供されているCSSをカスタマイズしていきます。

以下、必要な箇所を抜粋したCSSになります。

.ps-container {
  -ms-touch-action: none;
  touch-action: none;
  overflow: hidden !important;
  -ms-overflow-style: none;
}
@supports (-ms-overflow-style: none) {
  .ps-container {
    overflow: auto !important;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps-container {
    overflow: auto !important;
  }
}

/*スクロールバーのレールの背景指定*/
.ps-container.ps-active-y > .ps-scrollbar-y-rail {
  display: block;
  background: url(body.jpg) center center repeat; /*色でも可能*/
}

/*スクロールバーのレールの位置の指定*/
.ps-container > .ps-scrollbar-y-rail {
  position: absolute;
  right: 6px; /*位置調整*/
  width: 15px; /*デザイン幅の指定*/
}

/*スクロールバーの指定*/
.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
  position: absolute;
  background: 
  url(head.jpg) top center no-repeat, /*スクロールバーを三分割したうちの上矢印の部分*/
  url(foot.jpg) bottom center no-repeat, /*スクロールバーを三分割したうちの下矢印の部分*/
  url(body.jpg) center center repeat; /*スクロールバーを三分割したうちのお腹の部分（リピートできるもの）*/
  right: -2px; /*位置調整*/
  width: 19px; /*デザイン幅の指定*/
}

ポイントは、以下の通りです。

スクロールバーのレールの背景の切り出し（リピートできるもの）
スクロールバーのデザイン部分を三分割し、上矢印部分（固定）/下矢印部分（固定）/お腹の部分（リピート）に分けて3枚の背景画像を指定
それぞれの位置調整と幅調整

f:id:paradox_tm:20160517154359p:plain

この3点を守れば、素敵なスクロールバーが実装できます。
今回は、縦スクロールで実装しましたが、横スクロールの場合も同じです。

デザインの注意点

デザインを反映する上での注意ですが、スクロールバーは可変になります。スクロール量（コンテンツ量）が増えれば、当然スクロールバーの長さも変わります。

実装できない（厳密には、不自然になる）デザインは、スクロールバーの大きさが固定のものです。またスクロールバーのお腹のリピート部分が不規則な形になると繋ぎ目が美しくなくなってしまいます...（今回のデモサンプルのように...）

以上です！

デザイン次第でかなり素敵なものができそうですね！

Fly higher! Sky is the limit!

webの現場で働く人のブログ

TweenMaxを使ってオープニングアニメーションをつくる。

TweenMaxを使ってオープニングアニメーションをつくる。

オープニングアニメーションっぽい適当なDEMO| TimelineMax

CDNの利用

Cheat Sheet

触ってみての感想

facebookのOGPキャッシュをボタン1つで消せるBookmarkletを作製しました。

Bookmarkletソース（Firefox/Chrome用）

参考

【canvas】画像を回転させながら落とす

DEMO

JavaScriptコード

配列の宣言で警告。

the array literal notation [] is preferable

最近よく使う、CSSプロパティ 3選(vw/vh,calc(),flex) - #レスポンシブwebデザイン

Viewport units: vw, vh, vmin, vmax

記事紹介

Can I use 状況

calc() as CSS unit value

記事紹介

Can I use 状況

Flexible Box Layout Module

記事紹介

Can I use 状況

【自分メモ】cookieの値を取得する。

特定のcookieの値をだけを取得したい場合。

cookies.jsを使用した場合。

［jQuery]スクロールバーのデザインと実装方法と注意点 - 超軽量スクリプト Perfect Scrollbar

Perfect Scrollbarについて

ダウンロードはこちら

実装方法

準備するもの

サンプルデモ

HTML

CSS

JS

デザインの反映

デザインの注意点