文字を隠すように貼るシールを表現するJavaScript

なんとも一風変わった遊び心。
その仕掛けは単純だけど、アイデア次第では面白い事が出来そうですね。

サンプルデモはこちら

使い方は以下に。

まずはダウンロードから

ダウンロードするものは下記の3つのJsファイルです。

ダウンロードはこちら





ダウンロードが終了してファイル名を見ると、妙な名前で保存されているので、今回は名前を変更して使います。

上記のファイル名より上部の名前をすべて消します。
その時、次のような下の部分だけを残し、消します。


下記のような呼び出しを付ける。

<script type='text/javascript' src='pack.js'>/* jquery core */</script>
<script type='text/javascript' src='min.js'></script>
<script type='text/javascript' src='jquery.js'>/* plugin code */</script>

下のコードもサンプルに書いてあったので書いておく。

<style type='text/css'>
body {
background-color: #fff;
}
pre {
background-color: #f0f0f0;
overflow: auto;
border: 1px dashed black;
padding: 0 1em 1em 1em;
}
</style>
<style type='text/css' id='EmbeddedStyleSheet'>
.jqSpoiler {
background-image:url(spoilers.png);
border:1px solid red;
color: green;
}
.jqSpoiler span {
visibility: hidden;
}
.jqSpoiler.reveal {
background-image: none;
border: none;
}
.jqSpoiler.reveal span {
visibility: visible;
}
</style>
<script type='text/javascript' id='DemoPageScriptSourceCode'>
$(document).ready(function(){
// On-hover spoiler:
$('.jqSpoiler').initSpoilers();
// On-hover spoiler using hoverIntent plugin:
$('.jqSpoilerIntent').initSpoilers({method:'hoverIntent'})
.addClass('jqSpoiler');
// Clickable spoiler:
$('.jqSpoilerClick').initSpoilers({method:'click'})
.addClass('jqSpoiler');
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$('#DemoPageScriptSourceCodePre').text( $('#DemoPageScriptSourceCode').text() );
$('#DemoPageStyleSheetSource').text( $('#EmbeddedStyleSheet').text() );
});
</script>

上のコードはもちろんbodyの前、に書いておく。
オレンジ色の部分はシールに使う画像の指定。

とりあえずサンプルデモページの下のほうにあるので拾ってきます。

最後にサンプルデモの１〜３までの記述方法。

１>>　
<span class='jqSpoiler'><span>This text should be hidden if you are not mouse-overing it.</span></span>

２>>　
<span class='jqSpoilerIntent'><span>This text should be hidden if you are not mouse-overing it.</span></span>

３>>　
<span class='jqSpoilerClick'><span>This text should be hidden until you click on it.</span></span>

以上です。