タグ「jquery.js」 - はてブログ

タグ jquery.js

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 25 / 30件)

[JS]実装が簡単！要素にclassを加えるだけでCSS3アニメーションを自在に使えるスクリプト -CSS3 Animate It | コリス

2019/01/28 149 users コリス class stylesheet スクリプト Libs

アニメーションの一覧 CSS3 Animate Itの使い方 Step 1: 外部ファイル当スタイルシートとスクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/animations.css" type="text/css"> </head> <body> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jque... 続きを読む

[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js | コリス

2015/05/13 156 users コリス ESC boot Bootstrap スクリプト

デモのアニメーションGIF ここでは「Esc」キーを拡大画像から元画像に戻す際に使用していますが、スクロールしてコンテンツに戻る時のアニメーションも非常に軽快です。 Zoom.jsの使い方 Step 1: 外部ファイル当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。アニメーションのエフェクトはBootstrapのtransition.jsに依存しており、Boot... 続きを読む

[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js | コリス

2015/03/16 140 users コリス jQuery head Step スクリプト

マークアップは非常にシンプル、スクリプトの設置も簡単、スマホでもタブレットでもデスクトップでもすいすい快適に操作できる水平スクロールコンテンツを実装できるjQueryのプラグインを紹介します。デモのアニメーション horizonScroll.jsの使い方 Step 1: 外部ファイル当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type... 続きを読む

[JS]動画をブラウザいっぱいや指定サイズに背景として配置できる超軽量スクリプト -CoverVid | コリス

2014/11/10 110 users WebM コリス Body Step セクション

.mp4, .webm などの動画をブラウザいっぱいやセクションの背景として配置できるjQueryの超軽量（800bytes）プラグインを紹介します。デモページ単に要素内の背景として表示しているため、デモのようにスクロールエフェクトと組み合わせることも簡単です。 CoverVidの使い方 Step 1: 外部ファイル当スクリプトとjquery.jsを外部ファイルとして記述します。 <body... 続きを読む

スマホ用のブラウザ判別を行うための「 jquery.browser.sp.js 」 - to-R

2014/05/19 239 users GitHub scrip to-R script スマホ用

普段スマホ用のブラウザ判別を行うために利用しているjQueyプラグインを公開したのでご紹介します・ダウンロード / GitHub 利用方法 jQuery本体を読み込んだ後にダウンロードしたjquery.browser.sp.jsを読み込みます。 <script src="jquery.js"></script> <script src="jquery.browser.sp.js"></scrip... 続きを読む

[JS]スクリプト初心者でも簡単！レスポンシブ対応のナビゲーションやコンテンツを横から表示するスクリプト -Slidebars | コリス

2014/01/30 215 users jQuery コリス head Body Step

最近よく見かけるトレンドの一つ「Off Canvas」、コンテンツの横からナビゲーションやコンテンツをアニメーションでスライド表示するjQueryのプラグインを紹介します。デモページ：幅780pxで表示 Slidebarsの使い方 Step 1: 外部ファイル当スタイルシートをhead内に、jquery.jsと当スクリプトを</body>の上に記述します。 <head> ... <link r... 続きを読む

[JS]Appleのプロダクトページのような1ページのスクロールコンテンツを作成するスクリプト -One Page Scroll | コリス

2013/09/23 303 users コリス jQue src head text

デモページ：3番目のパネルを表示各パネルへの直リンクやURL表示にも対応しています。 One Page Scrollの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="http://code.jquery.com/jque... 続きを読む

いい加減、<script src="http://..　と書くのはやめましょう - DQNEO起業日記

2013/05/18 793 users script src DQNEO起業日記 http パク原因

JSファイルを読み込むときに、こういう書き方するのはやめましょう。 <script src="http://example.com/js/jquery.js"></script> 理由あなたのサイトが、いつの日かSSLに対応することになったとき、そのscriptタグがバグの原因になります。ご覧のとおり、HTTPSページの中でHTTP要素を読み込もうとすると、ブラウザによっては安全装置が働いて読... 続きを読む

[JS]ぷるぷるっとかわいいアニメーションでレイアウトを変更するレスポンシブ用のスクリプト -DyLay | コリス

2013/04/14 168 users jQuery easing コリス Step フィルタ

ダイナミックなかわいいアニメーションでパネルのレイアウトを変更する、レスポンシブ用のレイアウトを生成するjQueryのプラグインを紹介します。 DyLay! V2 DyLay -GitHub DyLayのデモ DyLayの使い方 DyLayのデモデモはフィルタとソートでレイアウトを変更します。デモページ DyLayの使い方 Step 1: 外部ファイル「jquery.js」と「easing.... 続きを読む

[JS]lightboxの進化形、レスポンシブ対応で画像を拡大表示するスクリプト -SuperBox | コリス

2013/04/07 256 users jQuery lightbox コリス CSS href

lightboxよりJavaScriptと画像ロードの依存を少なくした、レスポンシブ対応で画像を拡大表示するjQueryのプラグインを紹介します。デモページ：幅780pxで表示 SuperBoxの使い方 Step 1: 外部ファイル「<a hrefp://jquery.com/">jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="css... 続きを読む

[JS]画像ホバーで、さまざまな要素を配置した半透明のパネルをアニメーションで表示するスクリプト -HCaptions | コリス

2013/03/10 120 users jQuery コリスフェード Step 半透明

画像をホバーすると、スライドやフェードのアニメーションで表示する半透明のパネルを実装するjQueryのプラグインを紹介します。パネルは実装もカスタマイズも簡単です。 HCaptions -GitHub HCaptionsの準備 HCaptionsのデモと実装 HCaptionsの設定 HCaptionsの準備まずは、スクリプトを使う準備から。 Step 1: 外部ファイル「jquery.js... 続きを読む

[JS]スクロールに追従するページの先頭へアニメーションで戻るボタンが簡単に設置できるスクリプト -scrollUp | コリス

2013/02/03 147 users jQuery コリス src text Step

HTMLは一切変更せずに、スクロールに追従するページの先頭へ戻るボタンが簡単に設置できるjQueryのプラグインを紹介します。デモページ：タブ scrollUpの使い方実装は非常に簡単です。 Step 1: 外部ファイル「jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="js/jquery-1.8.3.m... 続きを読む

[JS]スクロールするのが楽しくなる！多彩なパララックスのエフェクトを簡単に実装できるオープンソースのスクリプト -Jarallax | コリス

2012/10/16 326 users パララックス script src コリス text

Loodsmedia ディスプレイ内のコンテンツもパララックスします。 Jarallaxの使い方「Demo 3」を例に、実装方法を簡単に紹介します。外部ファイル「jquery.js」と当スクリプトをhead内に外部スクリプトとして記述します。 <script type="text/javascript" src="jquery.js"></script> <script type="text... 続きを読む

[JS]実装も超シンプル、高さや幅が異なるエレメントを揃えるシンプルなスクリプト -equalize.js | コリス

2012/09/11 212 users コリス jQuery height width エレメント

エレメントの高さ（height）、幅（width）だけでなく、outerHeight, innerHeight, outerWidth, innerWidthのサイズを揃えるjQueryのプラグインを紹介します。デモ：幅 equalize.jsの使い方 Step 1: 外部ファイル「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.go... 続きを読む

[JS]エレメントをグリッド状にランダムに配置したり、Pinterest風に配置するスクリプト – BlocksIt.js | コリス

2012/08/21 111 users コリスエレメント Libs Ajax スクリプト

BlocksIt.jsの使い方 Step 1: 外部ファイル「jquery.js」と当スクリプトをhead内に記述します。 ※jQueryは1.7.1で開発。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> <script type... 続きを読む

[JS]ちょっとかっこいい円グラフをウェブページに簡単に設置できるスクリプト -EASY PIE CHART | コリス

2012/07/10 215 users コリス jQuery text ウェブページ Step

シンプルなHTMLで、さまざまなデザインの円グラフが簡単に作成できるjQueryのプラグインを紹介します。 EASY PIE CHART EASY PIE CHARTの使い方実装は、3ステップです。 Step 1: 外部ファイル「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。外部ファイルはhead内に記述してください。 <script type="text... 続きを読む

[JS]レスポンシブデザインもOK、水平タイプのナビゲーションをいい感じにするスクリプト -HorizontalNav | コリス

2012/06/20 215 users コリス Libs Ajax スクリプトナビゲーション

デモ：480pxで表示上：未適用はが成り行きで二段になってしまう幅になっても、下：適用の見た目は損なわれません。 HorizontalNavの使い方実装は4ステップです。 Step 1: 外部ファイル「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery... 続きを読む

[JS]IE6/7/8でアクセスしたユーザーに新しいブラウザのインストールを促すスクリプト -IE Alert js | コリス

2012/06/17 148 users コリス Opera Step Safari Firefox

IE Alert jsのデモ IE Alert jsの使い方 IE Alert jsのデモデモはIE6/7/8でご覧ください。 IE9、Firefox, Chrome, Safari, Operaでは、下記のように通常通りに表示されるだけです。 IE Alert jsの使い方使い方は簡単で、2ステップです。 Step 1: 外部ファイル「jquery.js」と当スクリプト・スタイルシートを外... 続きを読む

[JS]実装は簡単、機能は最小限、Responsiveデザイン対応の超シンプルなスライダーのスクリプト -Blueberry | コリス

2012/05/28 121 users jQuery コリススライダーブルーベリースクリプト

表示サイズに合わせて最適なサイズで表示する、幅が固定ではないレイアウト用の超シンプルなスライダーを実装するjQueryのプラグインを紹介します。「Blueberry」という名前は、開発時に使った画像がブルーベリーだったからだそうです。 Blueberryの使い方実装はいたってシンプルです。外部ファイル「jquery.js」と当スクリプト、あと当スタイルシートを外部ファイルとして記述します。... 続きを読む

[JS]Responsiveデザインでサイズ可変の画像でもクリッカブルマップ対応にするスクリプト -RWD Image Maps | コリス

2012/05/22 129 users コリス Libs Responsiveデザイン Ajax 画像

RWD Image Mapsの使い方外部ファイル「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="jquery.rwdImageMaps.min.js"></script> ... 続きを読む

[JS]高さの異なる要素をレンガ状に隙間なく並べるだけのシンプルなスクリプト -Wookmark | コリス

2012/03/26 476 users コリス Libs Ajax スクリプト src

Wookmarkの使い方実装はいたってシンプルです。外部ファイル「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.wook... 続きを読む

[JS]洗練されたかわいらしいデザインのツールチップを簡単に実装できるスクリプト -Sweet Tooltip | コリス

2012/03/05 128 users コリス stylesheet スクリプトツールチップ src

デモページ：Big Yellow Sweet Tooltipの使い方外部ファイルスタイルシートをhead内に、スクリプトをページの下部に外部ファイルとして記述します。 <link rel="stylesheet" href="sweet-tooltip.css"> <script type="text/javascript" src="jquery.js"></script> <script ... 続きを読む

[JS]直感的な操作性がたのしい、画像ギャラリーのスクリプト -Fotorama | コリス

2011/12/04 126 users コリス script text href link

Fotoramaのデモ：デザイン変更背景・矢印のカラー、サムネイルのサイズ・カラーなど Fotoramaの実装外部ファイル「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして指定します。 <script src="jquery-1.7.min.js" type="text/javascript"></script> <link href="fotorama.css" ty... 続きを読む

[JS]jQueryを使って、超スムーズなCSS3アニメーションを実装する -jQuery Transit | コリス

2011/11/15 145 users jQuery コリス jQueryとCSS3アニメーション

昨日に続いて、jQueryとCSS3アニメーションのコラボです。今回紹介するのは、jQueryでCSS3アニメーションを超スムーズにするように助けるプラグインです。 jQuery Transitの使い方 jQuery Transitのデモ jQuery Transitの対応ブラウザ jQuery Transitの使い方「jquery.js」の後に当スクリプトを外部ファイルとして記述します。外... 続きを読む

[JS]超軽量、設置も簡単、オプションも豊富なスライドショーのスクリプト -Orbit | コリス

2011/08/10 272 users Orbit jQuery コリス jquery.min.js

実装も簡単で、オプションも豊富に揃った、使い勝手のよい画像スライドショー用のjQueryのプラグインを紹介します。約4KBと超軽量なのもいいですね。右上のオートプレイは状況も表示します。 Orbitの実装外部ファイル「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script src="js/jquery.min.js" type="text/javascript"... 続きを読む