おすすめしたいJQueryスクリプト

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

このライブラリは導入必須です。これを導入することにより、他のスクリプトが動きます。
JQueryってなんぞやってひと wiki(http://ja.wikipedia.org/wiki/JQuery)
簡単に文字や画像をフェードインやフェードアウト、クリックによる処理などを実装することが可能です。
詳しくは右を参照 jQuery日本語リファレンス
2.jquery.cheat-code.js
This is the personal website of Trevor Morris, a British web developer. This website is a fusion of my online identity, mainly movie ratings and an archive of m...
Webページ内に隠しコマンドを導入できるスクリプトです。
例えば「↑←↓→」と順に押された時にメッセージを表示する。または、違うWebページヘ遷移するなどが可能です。

(実装例)

(参考)
・PHPSPOT開発日誌 (http://phpspot.org/blog/archives/2009/05/jquerycheat_cod.html)
・skuare.net (http://www.skuare.net/test/jkonami.html)

3.jGravity-min.js

jQuery plugin to bring gravity to your site. Contribute to tinybigideas/jGravity development by creating an account on GitHub.
画像や文字に重力を追加するスクリプトです。
「Webページが崩れていく」表現をすることができるので、ホラー系のWebページ作りたい人におすすめです。

(実装例)

(参考)
・tinyBIGideas (http://tinybigideas.com/plugins/jquery-gravity/)

4.jQueryRotate.js

OpenSource Cross-browser jQuery plugin to rotate image by any-angle with an animation support.
簡単に画像や文字を回転させるアニメーションを追加できるスクリプトです。
マウスオーバー(オブジェクトの上にマウスカーソルがきた)した時に、画像を回転させるアニメーションを導入することができます。

(実装例)

(参考)
・うずまきデザイン (http://uzmk.jp/blog/tips/entry-229.html)

5.t.min.js

タイプライター風のアニメーションを導入することができるスクリプトです。
Webページを開いた時に、文字を打ち込んでいるような表現をすることできます。
自動でタイプミスやバックスペースをするため、本当にタイピングしているようなアニメーションができるため面白いです。

(実装例)

(参考)
・ASCII.jp (http://ascii.jp/elem/000/000/954/954307/)

(更新)

2016/01/12 ローカルでもJqueryを動かせる方法を記述

スポンサーリンク







フォローする

スポンサーリンク