Webページを作る機会があり、その時に使って良いと思ったスクリプトがあっため掲載しておきます。
※実装するときは、公式ページからjsファイルをダウンロードしてください
私はダウンロードしたjsファイルを「js」というディレクトリの中に入れています
※ローカルでやりたい場合は、Jqueryをダウンロードしてください → http://jquery.com/download/
その際、<script src=”//code.jquery.com/jquery-1.11.3.min.js”></script> を <script type=”text/javascript” src=”js/jquery-2.2.0.min.js”></script> と書き換えてください
1.JQuery
http://jquery.com/
このライブラリは導入必須です。これを導入することにより、他のスクリプトが動きます。
JQueryってなんぞやってひと wiki(http://ja.wikipedia.org/wiki/JQuery)
簡単に文字や画像をフェードインやフェードアウト、クリックによる処理などを実装することが可能です。
詳しくは右を参照 jQuery日本語リファレンス
2.jquery.cheat-code.js
http://www.trovster.com/lab/plugins/cheat-code/
Webページ内に隠しコマンドを導入できるスクリプトです。
例えば「↑←↓→」と順に押された時にメッセージを表示する。または、違うWebページヘ遷移するなどが可能です。
(実装例)
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.cheat-code.js"></script>
<script>
$(function(){
$(document).cheatCode({
code :'38,37,40,39', //↑←↓→ 押される文字
activated:function(){ //押された後の処理
$('.hoge').text('world').css({'font-size': '50px','color': 'red'}); //とりあえずclassがhogeのテキストを変更している
}
});
});
</script>
<body>
<div class="hoge">Hello</div>
</body>(参考)
・PHPSPOT開発日誌 (http://phpspot.org/blog/archives/2009/05/jquerycheat_cod.html)
・skuare.net (http://www.skuare.net/test/jkonami.html)
3.jGravity-min.js
http://github.com/tinybigideas/jGravity
画像や文字に重力を追加するスクリプトです。
「Webページが崩れていく」表現をすることができるので、ホラー系のWebページ作りたい人におすすめです。
(実装例)
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jGravity-min.js"></script>
<script>
$(function(){
$('body').jGravity(); //bodyタグにあるものすべてに重力を追加
});
</script>
<body>
<div class="hoge1">Hello</div>
<div class="hoge2">world</div>
</body>(参考)
・tinyBIGideas (http://tinybigideas.com/plugins/jquery-gravity/)
4.jQueryRotate.js
http://jqueryrotate.com/
簡単に画像や文字を回転させるアニメーションを追加できるスクリプトです。
マウスオーバー(オブジェクトの上にマウスカーソルがきた)した時に、画像を回転させるアニメーションを導入することができます。
(実装例)
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jQueryRotate.js"></script>
<script>
$(function(){
$('.hoge').rotate({
bind:
{
mouseover:function() {
$(this).rotate({animateTo: 360});
//ココらへんに回転してる時に、同時に行いたいアニメーションを実装できます
},
mouseout:function(){
$(this).rotate({
animateTo:0
})
}
}
});
});
</script>
<body>
<img src="img/y0658.png" class="hoge">
</body>(参考)
・うずまきデザイン (http://uzmk.jp/blog/tips/entry-229.html)
5.t.min.js
http://mn.tn/dev/t.js/
タイプライター風のアニメーションを導入することができるスクリプトです。
Webページを開いた時に、文字を打ち込んでいるような表現をすることできます。
自動でタイプミスやバックスペースをするため、本当にタイピングしているようなアニメーションができるため面白いです。
(実装例)
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/t.min.js"></script>
<script>
$(function(){
$(".prog").t({
speed_vary : true, //人間が打っているようなタイプスピードになる
blink : true //カーソル点滅する
});
});
</script>
<body>
<div class="prog">
hello<br>
これはサンプルです<br>
</div>
</body>(参考)
・ASCII.jp (http://ascii.jp/elem/000/000/954/954307/)
(更新)
2016/01/12 ローカルでもJqueryを動かせる方法を記述
コメント