Reveal.jsでプレゼン画面にスポットライトを浴びせるよ

やりたいこと

logicoolの「SPOTLIGHT」を知っているかな？　レーザーポインタのようだけど、プレゼン画面の任意の箇所をソフトウェア的にスポットライトを浴びせることができるクールなガジェットなんだ。これを使えばプレゼンの内容に関係なく注目を集めることは間違いなし！
ただ、少々お値段がはるので、普段あまりプレゼンをしない人にとっては購入が難しいよね。
けど、Reveal.jsなら、同じことがデキるんだ。こんなふうにね！

やり方

JavaScrptでスポットライトを当てるCodePenのこちらの投稿を参考にするよ。そのままでは、背景が不透過だったり、スポットライトのオンオフができなかったりするので、少々手を加えるよ。

仕組み

手を加えるために、CodePenの例ではどのようにスポットライトが実現されているのか見てみたよ。まず、明るく照らされている部分は、背景を円形グラデーションで塗る「radial-gradient」で、中心に透明色を指定し、周囲に黒を指定したdivをJavaScriptでマウスに追従させることで実現しているようだ。ここまでは予想通りだよ。具体的には下のコードの部分だよ。

.spotlight.on {
background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 100%);
}

でも、この仕組みだけだと、div以外の箇所が下の図みたいに丸見えだね・・。

そこで、divの枠(border)を思いっきり太く描くことで、divの外側も黒で隠しているみたいだ。これを思いついたひとはスゴイね

.searchlight {
    border-width: 100vh 100vw !important;
}

試しに、枠を緑色にすると下のような感じだ。わかりやすいね。

手を加える

仕組みがわかったら、多少の修正は簡単だね。やりかたの結果だけ書いておくよ。まずはCSSだ。themeで読み込むCSS(solarized.cssとか)の最後にでも追記するよ。

.searchlight {
    position: absolute !important;
    z-index: 100 !important;
    height: 300px !important;
    width: 300px !important;
    border-width: 100vh 100vw !important;
    border-style: solid !important;
    border-color: rgba(0, 255, 0, 0.7) !important;
    top: -100vh !important;
    left: -100vw !important;
    background: #000 !important;
    -moz-box-sizing: content-box !important;
    -webkit-box-sizing: content-box !important;
    -ms-box-sizing: content-box !important;
    box-sizing: content-box !important;
    transition: opacity 500ms;
    opacity: 0;
}

.searchlight.on {
    background: -webkit-radial-gradient(center, ellipse cover,
    rgba(0,0,0,0) 0%,rgba(0,0,0,0) 59%,rgba(0,0,0,0.7) 60%,rgba(0,0,0,0.7) 100%) !important; /* Chrome10+,Safari5.1+ */
    background-repeat: no-repeat !important;
}

次はJavaScriptだ。Gistにコードをあげたので、index.htmlで下記を読み込めばOKだよ。久々にJQueryも使ったよ。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="https://gist.github.com/vimyum/d0c01a508b448da888b41084a0975db0.js"></script>

一応、コードも書いておくね。

var toggle = false;
$('.searchlight')
    .on('mousemove', function(event) {
        $(this).addClass('on').css({'margin-left': event.pageX -150, 'margin-top': event.pageY -150});
    })          
    .on('mouseout', function(event) {
        $(this).removeClass('on');
    })
    .on('click', function() {
        if (toggle) {
            $(this).css('opacity', '0').css('cursor', 'auto');
        } else {
            $(this).css('opacity', '1').css('cursor', 'none');;
        }
        toggle = !toggle;
    });

あとは、Reveal.jsのsection内にsearchlightクラスをもつ要素を配置すればOKだ。

 <section>
     <h3>それ、Reveal.jsでできるよ</h3>
     <div class="searchlight"></div>
</section>

以上！

Reveal.jsシェル芸なんかと組み合わせればちょっと目を引くプレゼンができるかも