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

タグ jquery.js

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

(1 - 25 / 77件)

[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]コンテンツの区切り線を水面に見立てて、ぽちゃんたぷんっと波立たせる癒やし系スクリプト -Raindrops.js | コリス

2015/07/13 69 users ヘッダ Body Step コリススクリプト

コンテンツの区切りなどの線を水面に見立てて、滴を落としたように波立たせる素敵なアニメーションを簡単に実装できるスクリプトを紹介します。 ↓区切り線がぽちゃんたぷんっと波立ちます。 Raindrop.js ヘッダやフッタあたりに少し適用するのはいい感じですね。 Raindrops.jsの使い方 Step 1: 外部ファイル当スクリプトとjquery.jsを外部ファイルとして記述します。 <body... 続きを読む

jQueryでサイトのヘッダーなどを固定するプラグインClingifyの注意点

2015/06/23 27 users jQuery ヘッダー stylesheet href 一式

まずはClingifyのファイルを一式ダウンロードします。（jQueryがない人はこちらからダウンロード）様々な動きができますが、とりあえず一番簡単な要素を固定する方法です。バージョン1.7以上のjQuery.jsとjquery.clingify.js及びclingify.cssを読み込みます。 <link rel="stylesheet" href="style/clingify.css"... 続きを読む

[JS]縦長ページに実用性とデザイン性を兼ね備えたスクロールメニューを設置するスクリプト -ScrollMenu | コリス

2015/05/29 77 users コリス stylesheet スクリプトスクロールバー

デフォルトのスクロールバーも表示ブラウザのデフォルトのスクロールバーを併用することも可能です。 ScrollMenuの使い方 Step 1: 外部ファイル当スタイルシート・スクリプト、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" type="text/css" href="scrollmenu.css"> </head>... 続きを読む

[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]簡単で楽ちん！さまざまなタブコンテンツをシンプルなHTMLで実装できる軽量スクリプト -PWS Tabs | コリス

2015/01/26 64 users head コリス code.jquery.com Step

デモページ: Tabs Position: Vertical Left タブを配置する場所もオプションで簡単に変更できます。 PWS Tabsの使い方 Step 1: 外部ファイル当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <script src="//code.jquery.com/jquery-1.11.2.min.js"></sc... 続きを読む

[JS]縦長ページでデスクトップでもスマホでもデザインの邪魔をしないナビゲーションを実装するスクリプト -MenuItems | コリス

2014/12/09 70 users コリス stylesheet スクリプトナビゲーション邪魔

タップするとナビゲーションがスライド。 MenuItemsの使い方 Step 1: 外部ファイル当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="menuitems/menuitems.min.css" /> </head> <body> ... コンテンツ ... <script s... 続きを読む

[JS]フォームのさまざまなエレメントを異なるブラウザ・スクリーンで同じように美しく表示させるスクリプト -Formplate | コリス

2014/11/26 54 users Modernizr コリス head エレメント Step

デモ：Safari/OS Xで表示フォームの見た目はどのブラウザでも美しく表示されていました。スクリーンサイズを変更しても同様に美しく表示されます。 Formplateの使い方 Step 1: 外部ファイル当スクリプト・スタイルシートとjquery.jsとModernizrを外部ファイルとして記述します。 <head> // Required javascript <script src="j... 続きを読む

[JS]非常に簡単な実装で、ページ上のさまざまな要素にオーバーレイを表示できるスクリプト -Purplecoat.js | コリス

2014/11/12 44 users コリス jQuery Body Step スクリプト

画像にオーバーレイでテキストを表示したり、ボタンやテキストなどさまざまな要素にオーバーレイをアニメーションで表示できるjQueryのプラグインを紹介します。使い方も非常に簡単で、スクリプトを一行も記述しないで利用できます。デモページ：カスタマイズ Purplecoat.jsの使い方 Step 1: 外部ファイル当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> .... 続きを読む

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

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

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

[JS]簡単な実装でパネルを天地左右からアニメーションで表示するスクリプト -notifyMe | コリス

2014/10/31 50 users jQuery コリスポパー head link

表示ページの天地左右からアニメーションでスライド表示するパネルを実装するjQueryのプラグインを紹介します。デモページデモではボタンのクリックがトリガーになっていますが、画像やテキスト、ホバーなどに変更することも可能です。 notifyMeの使い方 Step 1: 外部ファイル当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <link... 続きを読む

[JS]エレメントやスライドにさまざまなアニメーションを適用できるスクリプト -Pogo Slider | コリス

2014/09/17 53 users コリス jQuery div head エレメント

divなどで実装したパネル、複数の画像やエレメントを配置したスライダーなどにさまざまなアニメーションを適用できるjQueryのプラグインを紹介します。 ↓は、エレメントのデモです。 demo: エレメントのエフェクト Pogo Sliderの使い方 Step 1: 外部ファイル当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 <head> ... <link re... 続きを読む

YoutubeやVimeoの動画を背景に指定できるjQueryプラグイン・OKFocus video - かちびと.net

2014/07/31 55 users YouTube jQuery Vimeo script 備忘録

YoutubeやVimeoの動画を手軽に背景指定できる、というスクリプトのご紹介。jQueryに依存しています。既に同等のものが存在しますが、使いやすそうだったので備忘録。動画を手軽に背景指定出来る、というもの。 OKFocus video 動作サンプルです。背景なので重ねたレイヤーの背景を透過すればマスクっぽく出来ますね。 <script src='jquery.js'></script> ... 続きを読む

スマホ用のブラウザ判別を行うための「 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]デスクトップ用に実装した表組みをスマフォでもいい感じに表示する超軽量のスクリプト -ReStable | コリス

2013/12/02 75 users jQuery コリス table Step スクリプト

デスクトップ用にtableで実装された表組みをスマフォでも最適に見えるよう変更するjQueryのプラグインを紹介します。既存のテーブルにも簡単に対応でき、しかも1KBと超軽量です。デモページ：幅480pxで表示左：ヘッダ有り、右：ヘッダ無し一つのアイテムに対して、それぞれ対応する項目が配置されるようになっています。 ReStableの使い方 Step 1: 外部ファイル jquery.js... 続きを読む

[JS]指定した要素内いっぱいに背景画像を最適に配置するシンプルなスクリプト -Wallpaper | コリス

2013/10/30 99 users WallPaper コリス script src text

幅480pxで表示 Wallpaperの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="js/jquery.bp.wallpaper.j... 続きを読む

[JS]スクロールして次に表示するコンテンツを引っ張り上げるように表示するスクリプト -pullupScroll | コリス

2013/10/22 61 users jQuery コリス Step エフェクトスクリプト

スマフォやタブレットのアプリでよく見かける、次に表示するコンテンツを引っ張り上げるように少しだけ遅らせて表示するjQueryのプラグインを紹介します。こういうちょっとしたエフェクトって、楽しいですね。デモページデモの動きだけでなく、左上のアイコンに3種類のエフェクトが仕込まれていて、面白いです。 pullupScrollの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト... 続きを読む

[JS]Pinterestやウォールなどの最近よく見かけるカードを使ったレイアウトを作成するスクリプト -Freewall | コリス

2013/10/14 85 users Pinterest Freewall コリス Demo src

Demo :Piterest Layout Pinterest風に高さの異なるカードをダイナミックにレイアウト。 Freewallの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.7.min.js"></script> ... 続きを読む

[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... 続きを読む

[JS]既存のナビゲーションを簡単にレスポンシブ対応のトグル型にするスクリプト -Naver | コリス

2013/08/28 81 users NAVER jQuery コリス script Step

水平型など、今使用しているナビゲーションをスマフォやタブレットで表示した際に、トグル型ナビゲーションに自動で変更するjQueryのプラグインを紹介します。スマフォ時の表示 Naverの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="jquery.min.js"></script> <link rel... 続きを読む

[JS]レスポンシブ対応の非常に美しい画像ギャラリーを実装する設置が簡単なスクリプト -least.js | コリス

2013/05/19 93 users コリス rel CSS href link

least.js -デモ：画像の拡大時 least.jsの使い方実装は非常にシンプルで、簡単です。 Step 1: 外部ファイル head内に「jquery.js」と当スクリプト・スタイルシートを記述します。画像の遅延読み込みには「lazyload.js」を使用します。  <link href="css/least.min.css" rel="... 続きを読む

いい加減、<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.... 続きを読む