知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １
パララックスサイトを簡単に作成できるjQueryプラグイン8選
twitter facebook hatena google pocket いまさらな気もしますが、パララックスなサイトを簡単に実現するためのjQueryプラグインを紹介します。 sponsors #1 Nikebetterworld Parallax Effect Demo | Ian Lunn 老舗な感じのところですね。 jQuery localscrollとか、jQuery scrollToを駆使しています。 URL：http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/ demo：http://ianlunn.co.uk/plugins/jquery-parallax/ #2 JoelBesada/scrollpath GitHub 見えないパスにそってスクロールしていって気持ちいい感じです。 こんな記述が必
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
米Stripe、JavaScriptで決済の全てを完了できる 「jQuery.payment」をリリース 【増田 @maskin】 | TechWave（テックウェーブ）
決済サービスを展開する米「Stripe」は2013年2月7日、ポピュラーなJavaScript用ライブラリ (プログラム郡がパッケージされたもの)「jQuery」と連携して仕様できる決済ライブラリ「jQuery.payment」をリリースしたと発表した。 「Stripe」は、面倒で時間のかかる決済機能の導入について、どこよりも簡単に実装できるAPIを提供する企業。大手決済サービスを展開する米PayPal 創業者や、大手有力VCから投資を受けるなど注目をあびている。 今回リリースされた「jQuery.payment」を使えば、数行のJavaScriptコードだけで決済機能を導入することができるようになる。 冒頭のスナップショットは、実際に「jQuery.payment」を使ってドネーションを受けられるようにしたサイト。決済者は面倒なユーザー登録作業などをする必要なく、この画面から利用すること
ブロック要素の高さを簡単に揃えられるjQueryプラグイン「equalize.js」:phpspot開発日誌
equalize.js ブロック要素の高さを簡単に揃えられるjQueryプラグイン「equalize.js」 $('#height-example').equalize(); などとすれば、幅や高さを瞬時に揃えることが出来ます。 ↓こんな感じに↓ 高さだけではなくて、 ↓幅も同様に全部揃えられます↓ カラムの高さを揃えることでスッキリできますが、簡単にできるのは有難いですね 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 コンテンツ幅に対してテキストを最大にして美しくレイアウトできる「BigText」
ページ遷移不要の、シンプルなWebサイトを作るための軽量jQueryプラグイン・Pagify - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 よく見かける、ページ遷移のない Webサイトを作る為のjQueryプラ グイン。ですが、高機能な物では なく、極めてシンプルで、ライブ ラリも軽量です。サクッと作りた い時のテンプレにもいいかも。 僕の語彙の無い説明よりサンプル見た方が早そうですね。 ※漢字も間違ってたので修正しました ページ遷移不要で、内容を書き換えた際もフラグメントURLにしてくれます。以下サンプル。 Sample コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7'></script> <script src="pagify
Webサイトの読み込み体感速度が2秒くらい上がるかも。SNSボタンは後から読み込め！ - Web学び
2012年 6月 13日 新しいサーバーでブログをリニューアルして気がついた、SNSボタンの有無でかなり読み込み速度に差がある。といっても2,3秒ほどですが、これは結構命取りだったりします。 まぁ私もそんなに詳しいわけではないので断言できませんが。 ・訪問者はその数秒でサイトから逃げる ・Googleはその数秒を評価基準に入れる たしか遅延ロード(Lazy Load)とかいう技術ですね。 わりとポピュラーなコードで何とかなったので書いときます。 ピュアなJavaScriptではなく、jQuery使いますね。 方法その１ 時限式読み込み body閉じタグの前あたりに書きます。 . . . <div id="snsbox"></div> <script type="text/javascript"> var snscode = 'ここに、SNSのコードを書く' + '一行でつなげても良いが見に
[JS]グリッドに沿ってさまざまな要素を互い違いにスライドさせるスクリプト -Grid Slide
Grid Slide Plugin [ad#ad-2] Grid Slideのデモ Grid Slideの使い方 Grid Slideのデモ デモは2つあります。 まずは、div要素をスライドさせるシンプルなデモから。 デモページ：Demo 2 Grid Slideの使い方 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 Demo 2のバウンドのエフェクトを使用する場合は「jQuery Easing Plugin」も記述します。 <link href="gridslide.css" type="text/css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascri
IEでzenbackとjQueryのコンフリクトによる不具合を回避する方法
IEでzenbackとjQueryのコンフリクトによる不具合を回避する方法を紹介します。 １．問題 IEでzenbackとjQueryプラグイン（例えばjQuery ligthboxプラグイン）を併用する場合、次のようなソースコードになると思います。（zenbackのコードは便宜上改行しています）。赤色がjQueryプラグイン、青色がzenbackです。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('#gallery a')
[JS]ふんわりとした美しい影をエレメントに与えるスクリプト -Real Shadow
デモページ [ad#ad-2] マウスの位置を変えると、それを光源としてアニメーションでシャドウが変化します。 ※アニメーション無しも設定できます。 マウスを上に動かすとシャドウが長くなります Real Shadowの使い方 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="realshadow.js"></script> JavaScript jQueryのセレクタで、シャドウを適用するエレメントを指定します。 <script type="text/javascript"> $(selector).rea
Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8
Enhancing IE's selector engine Selectivizr adds support for 19 CSS3 pseudo-classes, 2 pseudo-elements and every attribute selector to older versions of IE. It can also fix a few of the browsers native selector implementations. JavaScript-knowledge: none Selectivizr works automatically so you don't need any JavaScript knowledge to use it — you won't even have to modify your style sheets. Just start
chrome-life.com - このウェブサイトは販売用です！ - chrome life リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
[JS]div要素やリスト要素を折りたたんで配置するWAI-ARIA遵守のスクリプト -jQuery Collapse
実装は超簡単、カスタマイズ性にも優れ、IE6にも対応、クリックで開閉する折りたたみコンテンツを設置するjQueryのプラグインを紹介します。 jQuery Collapse jQuery Collapse -GitHub [ad#ad-2] jQuery Collapseの特徴 jQuery Collapseのデモ jQuery Collapseの使い方 jQuery Collapseの特徴 軽量 約600バイトの軽量スクリプト。 クロスブラウザ対応 IE6+, Firefox3+, chrome5+, Safari4+, Opera10+ でテスト済み。 カスタマイズ モジュール式で設計しているため、簡単にカスタマイズが可能。 開閉する要素の変更、callback関数も用意されています。 クッキーのサポート 「jquery-cookie」を利用してクッキーをサポート。 ARIA遵守 障害
画像やボックス要素にhoverするとエフェクト付きで別のボックス要素を表示するjQueryプラグイン・ContentHover - かちびと.net
画像やボックス要素にマウスホバーすると 別のボックス要素をフェードエフェクトや スライドアニメーションで表示させる事が 出来るjQueryプラグインです。昔は色々と これ系を見かけましたけど最近は全然無い ですね。 これくらいなら自作する、という方も多いのか、以前はかなり見かけたホバーエフェクトのjQueryプラグインは全然見かけなくなりましたが、プラグインの方が楽な場合も多々あると思いますのでこういうのも覚えておくと工数を減らせるかもしれません。 ボックス要素が画像の上にオーバーレイ込みで表示されます。マウスを乗せたらRead more、みたいなのも容易に出来ますね。 divの上にdiv的な事も出来ます。 IEでも問題ないです。 簡単に実装出来ました。 コード <script type='text/javascript' src='http://ajax.googleapis.com/a
要素の高さを揃える超軽量なjQueryプラグインjquery.tile.jsを公開 | URIN HACK
使用方法１―全ての要素の高さを揃える 指定した複数の要素の高さを、その中の最大の高さに揃えます。 各要素の幅が同じであれば、各要素のサイズ（高さ・幅）は全て同じになり、タイル状に要素が並びます。 各要素に対してheightを指定する必要はありません。 javascriptサンプル tile-sample1というclass属性を持つ要素の高さを、その中の最大の高さで揃えるには、以下のように記述します。 1 $(function(){ 2 $(".tile-sample1").tile(); 3 }); 実行結果 使用方法２―同じ行にある要素の高さを揃える タイルの列数を指定して、同じ行に並ぶ要素の中で最大の高さに揃えます。 javascriptサンプル tile-sample2というclass属性を持つ要素が横に４つ並んでいるとき、横に並んだ要素の高さを各行毎に揃えるには、その列数（＝４）を
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
定番機能をまとめて提供してくれるjQueryプラグインまとめ | バシャログ。
ゲームボーイアドバンスの名作「カルチョビット」が3DSで出ると聞いてテンションあがってきたminamiです。 jQuery便利ですよね。さらにその便利なjQueryを使ってコーディング時の定番機能を提供してくれているライブラリがたくさんあるので集めてみました。 Laquu.js http://laquu.com/ 注目の最新プラグインです。「HTMLコーディング作業量を極力減らすためのjQueryプラグイン」ということで、 基本的な機能もさることながら、ピックメニュー、タブ、ツールチップ、ティッカーといった、よく使うけど意外と手間のかかるUIが一つのプラグインでまかなえてしまうのがポイント高いです。個人的にはコナミコマンドが実装されてるのが熱いです！ 対応するjQueryのバージョンは1.5以上です。 simplelib.js http://lab.starryworks.jp/js/si
魔法のようなリスト要素で作られた無限に続くメニューを開閉できるようにする jQuery
物凄いたくさんのカテゴリがある時に開閉するようにした方が便利です。そのため開閉できるようにするシンプルなコードを作りました。 jQuery のコード jQuery を読み込んでから、このコードを適用に読み込むと自動的に開閉機能が付きます。id などは適宜書き換えてください。 jQuery(function(j$) { j$('#menu ul > li ul').hide(); j$('#menu ul > li a').click(function() { j$(this).siblings('ul').toggle(); }); }); HTML のコード 以下の HTML に反応します。#menu 内のリストに反応するように作っていますが、時と場合によってここは書き換えると良いと思います。id がついてるので開くとその場所まで行く仕様ですが、嫌なら id を無くす手もあります。 <d
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://design-spice.com/2012/06/13/responsive-web-design-image/
IEでpngを使った際に起きる不具合を防ぐプラグイン
