[JS]ボタンのクリック時にちょっと音をつけたい時に、イベントにサウンドを割り当てるスクリプト -Ion.Sound
ボタンをクリックした時に軽快な音をつけるなど、ページ上のさまざまなイベントにサウンドを割り当てることができるjQueryのプラグインを紹介します。 Ion.Sound Ion.Soundのデモ Ion.Soundの使い方 Ion.Soundのデモ デモはデスクトップはChrome, Firefox, Opera, Safari, IE9+、スマフォの各ブラウザにも対応しています。 デモではあらかじめダウンロードファイルに含まれている15のサウンドをボタンクリックで楽しむことができます。 デモ（14/15）のキャプチャ Ion.Soundの使い方 Step 1: 外部ファイル </body>の上あたりにjquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jque
画像のズーム効果、画像の一部を拡大表示｜jQuery plugin｜Ajax｜PHP & JavaScript Room
jQueryを使用して、簡単に画像にズーム効果を付ける方法が掲載されています。 使用する画像は原寸大の画像1枚。 img要素のwidth/height属性にサムネイル表示時のサイズを指定しておきます。 サムネイル画像にマウスがのった時に、画像をサムネイル表示時よりCSSで画像サイズを25%大きくするアニメーションを行い、z-indexをあげて他の要素より上に表示するようにしています。 マウスが離れた時に、CSSで画像サイズを元のサイズに戻すアニメーションを行い、z-indexを元に戻す方法がとられています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w
[JS]操作感が楽しい！左右にドラッグ・フリックしてコンテンツを表示するスクリプト -Snap.js
表示されているページを左右にドラッグ（フリック）して、アニメーションで左右にコンテンツをスライド表示するデスクトップにもスマフォにも対応したスクリプトを紹介します。 jQueryなどの他のライブラリには依存しません。 Snap.js -GitHub Snap.jsの特徴 Snap.jsのデモ Snap.jsの使い方 Snap.jsの特徴 jQueryなどの他のライブラリへの依存は無し CSS3を使った強力なアニメーション スライドは右・左に対応 ドラッグ操作のサポート ドラッグ操作禁止要素も定義可能 スマフォのフリック操作のサポート フックイベントのサポート イベントの有効・無効の設定 カスタマイズが簡単 対応ブラウザ IE10を含む全てのモダンブラウザに対応しています。 IE7/8/9はCSS3での一部の機能が制限されます。 Firefox 10+ Chrome, SafariなどのWe
一味違ったパララックスを実装するスクリプト -Parallax.js | コリス
シンプルな実装で、ウェブページに奥行きを与えるパララックスを実装するjQuery/Zeptoの軽量プラグインを紹介します。 スマフォやタブレットの傾きに対応しているだけでなく、摩擦係数なども設定できるので、一味違った面白いことができそうですね。 Parallax.js Parallax.js -GitHub Parallax.jsのデモ Parallax.jsの使い方 Parallax.jsのデモ パララックスは複数の画像を異なるタイミングで動かして視差効果を生み出すもので、デモは奥行きの表現がすごいので少し酔うかもしれないのでご注意ください。 iPadだと傾けるだけで、ゆらゆらと Parallax.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="js/jquery.min.js"></script>
[JS]最近のウェブサイトで見かける面白い仕掛けを実装するスクリプトのまとめ
fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。
Pinterest風のデザイン 「jQuery Masonry」を試してみた
Pinterestのデザインは、要素が敷き詰められた感じになっています。 これはなんていうデザインの通称かわからないので、ひとまず「Pinterest風」と言ってます。 これを実装してくれるJavaScriptプラグインのひとつが「jQuery Masonry」なのですが、どういうものか使って試してみました。 基本的には公式サイトに載ってることを自分なりにまとめた内容となっております。 ダウンロードはこちらから JSなどの必要なファイルは以下からダウンロードします。 jQuery Masonry 設置の仕方 設置も特に難しいことはなくJavaScript読み込んでCSSで調整する感じです。 サンプルは以下から サンプルサイト JavaScriptの記述例 <script type="text/javascript" src="https://ajax.googleapis.com/ajax
[JS]これはスゴイ！人の声でウェブページをコントールできるようにするスクリプト -annyang!
下部からアニメーションでエレメントを表示 annyang!の使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 jQueryなどの他のスクリプトは必要ありません。 <script type="text/javascript" src="annyang.min.js"></script> Step 2: JavaScript スクリプトの基本書式は、トリガーとなる言葉をコマンドとして指定し、実行するスクリプトを記述します。 下記は、最後のデモのエレメントをアニメーションで表示するスクリプトです。 <script type="text/javascript"> if (annyang) { // Let's define our first command. First the text we expect, and then the function it s
jQuery+CSSで実装するナビゲーションメニュー総集編 - かちびと.net
jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 という訳で、個人的なjQuery+cssメニューの総集編です。 全部で73個。複数ブラウザでの確認はしていません。順不同です。少し重いかも・・ Large Drop Down Menu スライド&ドロップダウンメニュー Search Box with Filter and Large Drop Down Menu Fly-out Menu with jQuery and CSS3 カッコいいですねー。反対側からスライドするフライアウトメニュー。css3を使っています。 Fly-out Menu with jQuery and CSS3 Rocking and Rol
ローンチまでのカウントダウンをするページのテンプレートファイル一式
ローンチするまでの日にちと時間をカウントダウンするページのテンプレートファイル一式をOurTutsから紹介します。 Free "Site Under Construction" Template demo デモサイトでは、ロゴ、メールアドレスや電話番号などがダミーで配置されており、ローンチするまでのカウントダウンとコンテンツスライダーが揃ったものとなっています。 主な特長は以下のとおり。 jQueryを使用したカウントダウン jQueryを使用したコンテンツスライダー PSDファイル付き モダンでクリーンなタイプフェイス テーブルを使用しない100%CSSベースのレイアウト validなXHTML 1.0 Transitional validなCSS 2.1 クロスブラウザ対応 IE6, Fx3, Safari2, Op
jQuery 1.9 and 2.0 — TL;DR Edition | Official jQuery Blog
It seems that many people had questions and misconceptions about the last post, so let’s try a short Q&A format to answer some of the comments left there. Why is the jQuery core team dropping support for oldIE (IE 6/7/8)? We’re not! jQuery 1.9 will support oldIE when it’s released next year. The jQuery team will continue to support and maintain version 1.9 even after jQuery 2.0 is released. Why ar
World Wide Deb
The first signs of mounts may appear in adolescence, with more severe development around 30-40 years. It is a deformity in the bone of the big toe, which deviates to the other toes and thus produces a prominent formation, in many cases being painful. It is not possible to say precisely what the cause is,…
GoogleカレンダーからJSONPで日本の祝日一覧を取得
コメントと更新履歴の参照はゼロと無限の間のログ » GCalendar Holidaysでどうぞ。 Google Calendar API V3から、日本の祝日データを取得して表示するJavaScriptです。 Googleカレンダーに登録されている祝日なので、ハッピーマンデーの時のように休日の制度が変わっても柔軟に対応できます。 ただしGoogleカレンダーに登録されている祝日が間違っている（あるいは最新でない）場合もそのまま表示されます。 Yahho CalendarまたはjQuery UI Datepickerと合わせて使うと便利です。 バージョン0.5.xまではGoogle Calendar API V2から取得していましたが、Google Calendar API V2の廃止にともない、バージョン0.6.0からはGoogle Calendar API V3から取得するようにしまし
カレンダーによる日付入力補助｜Javascript｜ホームページの素
こちらの意図した書式で入力してもらいたいとき、あるいはユーザーの入力を簡易にするため、カレンダーを表示して日付をクリックするとテキストボックスにセットされます。 手入力もできますので、日付チェックのスクリプトもあわせて使用すると良いでしょう。 日付チェックはこちらを参照してください。 これはToshirou Takahashi氏作成のスクリプトを元に自分の使い勝手の良いように改造したものです。 原本は http://www.fureai.or.jp/~tato/JS/BOOK/INDEX.HTM ダウンロード calendar.txt 上記calendar.txtをダウンロードし、拡張子を「js」に書き換えてください。 calendar.txt -> calendar.js 改造内容 NSの場合もクリックしたそばにウィンドウ表示されるようにする スクリーンの上にでる場合は下に、スクリーン右
サムネイル付スライドショーギャラリー jQueryプラグイン-Galleriffic
サムネイルが付いた画像スライドショーのjQueryプラグインです。サムネイルがフォーカスされた時に大きい画像を読み込む為、画像が大量にあっても読み込みに時間がかかりません。 オプションも豊富で、ページャー、画像タイトルやキャプションを同時に表示させることもできます。 スライドショーのオンオフやページ送りをつけることも可能です。 Galleriffic配布先 Galleriffic opacityrolloverが同包されておりサムネイル画像がフェードされるようになっています。 配布先の●Examplesのところよりサンプルが一式もダウンロードできます。 “サンプルデモ“も作りました。 使い方 head内またはbodyタグ直前でjQuery本体とgalleriffic.js、opacityrollover.jsを読み込みます。 <script src="https://code.jquery
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
設置サンプル
http://retinajs.com/
IDEA * IDEA
Simple jQuery Dropdown Menu | jQuery Tutorial
コンテンツ幅に対してテキストを最大にして美しくレイアウトできる「BigText」:phpspot開発日誌
http://magazine.nuefolio.com/2011/09/responsive-image-gallery-with-thumbnail-carousel-from-codrops/