シングルページなサイトをデザインする上で、知っておいて損は無いかもしれないプラグインとか色々！ | バンクーバーのうぇぶ屋
最近多いですねー、1ページで完結するタイプのサイト。One Page Loveのサイトなんかから、シングルページの事例も大量に見ることが出来ますし、パララックスやらフリップ型のコンテンツやら、なんか色々出てきてて着いて行くのがやっとです… でも実際シングルページをつくろうとすると、え？何これどうなってんの？って物も多くてビビることもしばし。 ってことで、今日は僕が知ってる中で『お、これ、シングルページ作る時に使えるんじゃね？』って物を幾つかご紹介させて頂きます！ 主にはシングルページデザインの表現の幅を広げるjQueryプラグインの紹介になるかなと思いますが、楽しい物も多いので、是非興味があれば試してみてくださいませ〜！ それではいってみましょー！ パララックススクローリング系プラグイン この辺は以前に紹介したことがあるものばかりなので、ぱぱーっと行きます。 jQuery Waypoint
[JS]指定した要素内いっぱいに背景画像を最適に配置するシンプルなスクリプト -Wallpaper
幅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.js"> Step 2: HTML HTMLは通常通りで、背景画像を配置する要素は指定できるようidなどを加えます。 <header id="element"> ヘッダ </header> 複数箇所を適用する時は、classの方が便利です。 Step 3: JavaScript jQueryのセレクタで要素を指定し、sourceに画像を指定し、スクリプトを実行します。 $("#element").w
ScaleOut | Supership
「ミライリアルの幸せを、デジタルの力で創る」ことを目指すSupershipグループの社内報です。日々の出来事、メンバーの働く様子や声、未来への想いなど、Supershipグループの”Be Super”なストーリーをみんなでシェアしていきます。
大きなPubSub、小さなPubSub。 - ぶれすとつーる
JavaScriptにおいてもそのほかの言語においても疎結合というのは結構大きなテーマの一つだと思います。 そんな疎結合を促す実装としてPubSubがにわかに脚光をあびてますね。 にわかというより定期的に盛り上がってる気がしますが。 僕はあまりデザインパターン厨ではないのであまり語れるようなことはないのですが疎結合なコードというのはコードの再利用性が高まり幸せ度がかなり高いものだと思います。 そんなPubSubを強力に後押しするライブラリは世の中星の数ほどあるわけですが、ほんの少しだけ融通が利かないなーって思うこともあって半年くらい前に自作しました。 そう、95%くらい車輪の再発明です。 その名もPubsubJS(https://github.com/nazomikan/PubsubJS)。 どこかですごく似た名前を聞いたことはあるわけですがまぁそのへんはおいといて何がいっぱいあるPubS
Bootstrap Tour
The easiest way to show people how to use your website. Not using Bootstrap? It works anyway! Start the demo Tweet Add the dependencies If you are using Bootstrap, include bootstrap-tour.min.css and bootstrap-tour.min.js: <link href="bootstrap.min.css" rel="stylesheet"> <link href="bootstrap-tour.min.css" rel="stylesheet"> ... <script src="jquery.min.js"></script> <script src="bootstrap.min.js"></
タッチデバイス対応、フォームのデザインをミニマルやフラットにしたり機能を強化するスクリプト -iCheck
フォームのラジオボタンとチェックボックスをミニマルやフラットやダークなど、今時のデザイン風に変更したり、コールバック関数や入力をコントロールできるjQueryのプラグインを紹介します。 iCheck iCheck -GitHub iCheckの特徴 iCheckのデモ iCheckの使い方 iCheckの特徴 1KBで超軽量 クロスブラウザ対応 IE7+, Firefox2+, Chrome, Safari3+, Opera9+ スマートフォン・タブレットなどのタッチデバイスをサポート iOS, Android, BlackBerry, Windows Phone キーボード操作をサポート タブ、スペース、矢印キー、他のショートカット HTML/CSSベースでカスタマイズが簡単 Retina対応のスタイルを6種類用意 チェックボックスとラジオボタンは15のオプションでカスタマイズ 8つのコ
Intro.js - Step-by-step guide and feature introduction for your website
No dependencies, fast and small 10KB JavaScript and 2.5KB CSS, that's all (minified, gzipped). User-friendly Navigate using keyboard or mouse. Easily change the themes for your website. Browser compatibility Works on Google Chrome, Mozilla Firefox, Opera, Safari and even Internet Explorer. Why using Intro.js? When new users visit your website or product you should demonstrate your product features
[JS]ページのデザインに影響を与えないパーフェクトなスクロールバーの超軽量スクリプト -Perfect Scrollbar
Perfect Scrollbar Perfect Scrollbar -GitHub 何をもってパーフェクトなのか Perfect Scrollbarのデモ Perfect Scrollbarの使い方 何をもってパーフェクトなのか このスクロールバーにパーフェクトとつけた理由は、下記の4つだそうです。 ページ上のあらゆる要素にCSSで影響を与えないこと スクロールバーがオリジナルのデザインに影響を与えないこと スクロールバーのデザインは完全にカスタマイズ可能であること コンテンツの大きさが変化したら、スクロールバーの大きさと位置がそれに合わせて変化すること Perfect Scrollbarのデモ デモではあずにゃんの画像をホバーすると、スクロールバーが表示されます。 デモ：領域を拡大 バーの長さが変化していることに注目してください！ Perfect Scrollbarの使い方 Step
Datepicker for Bootstrap, from Twitter
About Add datepicker picker to field or to any other element. can be used as a component formats: dd, d, mm, m, yyyy, yy separators: -, /, . Download Change log 12/3/2013 Fixed bug where date selection from previous and next year was wrong Fixed bug where a variable was polluting the namespace 10/3/2013 Changed so the value will not be set unless the user chooses a date 16/2/2013 Fixed it to work
ブロック要素の天地を揃えるのはjquery.tile.jsが一番便利でした | 1bit::memo
ある要素の天地を揃えたいという場面は頻繁に起こります。例えば商品名の高さを揃えるとか、バラバラなサムネイル画像の天地を揃えるとか。 いろいろなjQueryプラグインを使ってきましたが、個人的にjquery.tile.jsが一番便利でしたのでご紹介します。 SPONSORED LINK 設置方法 <script type="text/javascript" src="javascripts/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="javascripts/jquery.tile.js"></script> 指定の要素の天地を揃えたい場合 jQuery(function(){ jQuery(".youso").tile(); }); 指定の要素を「指定した数」単位で揃える 今まではいちいちプログラムを
コンテナに画像がぴったり収まるように画像のサイズを変更するjQueryプラグイン・imgLiquid
画像を包括したコンテナに その画像がぴったり収まる ようにサイズを調整する、 というjQueryプラグイン。 必要になるか分かりません が、需要はありそう。 コンテナ一杯に画像を表示させる、というもの。 上が使用した状態、下が未使用です。下はコンテナに隙間があるのに対し、上はコンテナに隙間無く画像が収まっています。画像をメインとしたコンテンツでグリッドレイアウトなWebサイトなどにも良さそうです。 コード<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <script src ="imgLiquid-min.js" type="text/javascript"></script>コアとプラグインを読み込みます。 $("
ボックスを綺麗に並べてくれるMasonryライクなjQueryプラグイン・Freetile.js
サイズの異なるボックスを綺麗 に配置してくれるスクリプト、 MasonryっぽいjQueryプラグイン、 Freetile.jsです。似たような スクリプトは結構ありますので 参考までに。 よく見かける、異なるボックスを綺麗に並べるスクリプトです。Masonryっぽいやつ。 こういうやつです。ウィンドウサイズが変わってもボックスを再配置してくれます。 $('#foo').freetile();本体とプラグインを読み込んでセレクタ指定します。アニメーションオプション等もありました。 ライセンスはBSDです。手抜きな記事ですけどちょい忙しいので今日はこれにて。 Freetile.js
幅が異なる要素にも対応可能なカルーセルを実装するjQueryプラグイン・Lemmon Slider
以前やろうと思ったカルーセルを 実装できるプラグインが配布されて いたので備忘録。幅の異なる要素 にも対応できるカルーセルです。 多くのカルーセルやスライダーは サイズ固定ですよね・・・ 多くのカルーセル系スクリプトは、一度に進む幅が一定の値にされているため、回す要素のサイズを統一する必要がありました。Lemmon Sliderは異なるサイズの要素を並べてもそれぞれの幅を判別して送ってくれます。 上記のように幅の異なるアイテムでも幅を解析してスライドさせたときにピッタリ揃えてくれます。また、IE6などのオールドブラウザにも対応しています。 動作サンプルです。 div等のボックス要素も対応可能、画像もサイズを指定する必要は無く、幅を解析して自動でそろえてくれます。 コード<script type='text/javascript' src='http://ajax.googleapis.co
jQuery 1.7、1.8 で非推奨になったイベントのメソッドと Ajax 関連のメソッドとイベント - Sarabande.jp
jQuery: 大半のブラウザにおいて ready は DOMContentLoaded を指すFunction.prototype.apply、bind と $.proxy の比較event.originalEvent、jQuery.event.props.push、jQuery.event.fixHooks について条件分岐からメソッドチェーンやマップによるコールバックにjQuery 1.7、1.8 で非推奨になったイベントのメソッドと Ajax 関連のメソッドとイベントメソッドチェーンもしくはプロパティ表記を使って複数のイベントハンドラを指定するホーバーで削除ボタンの表示をコントロールするmouseenter と mouseover のちがいjQuery のイベントメソッドのなかでの return false と e.preventDefault() のちがい9月1日追記: on メ
jQueryで遅延ロードを汎用的に実現する「ScrollTrigger」プラグイン
jQueryで遅延ロード（遅延読み込み）を汎用的に実現する「ScrollTrigger」プラグインを紹介します。スクロールで要素が表示されたときに任意の関数を実行できます。 当ブログでも、記事ページ本文下にあるソーシャルブックマークボタンとFacebookのLikeBoxの表示にこの仕組みを使っています。 １．目的 Facebookの「いいね！」ボタンなど、最近ソーシャル系のパーツをブログなどに表示している方が少なくないと思います。 ですが、パーツの表示にはJavaScriptを使っているものがほとんどで、そのまま設置するとページのロード時間が遅くなるケースが多く、結果的にページ表示時間に影響することになります。 本プラグインは、そういったソーシャル系のJavaScriptのロードを遅延させることができ、初回のロード時間を短縮したいときに効果があります。 ２．機能 ページをスクロールして、
jParallax - webdev.stephband.info
All who wander are not lost! Why this site This site describes the travel experience of myself and my traveling companion and photographer... Paul (aka: my husband). We tend to avoid the snazzy places... like to stay closer to the people. If you like staying in the big American hotels to rub shoulders with other Americans, you won't like our style of travel. Most of our trips are planned via the
placeholder 属性と jQuery で IE にもプレースホルダを
フォームの入力コントロール （input とか textarea） に対して、初期値として入力例などをうっすら表示し、ユーザーへのガイドとして使用するプレースホルダ。HTML5 では、placeholder 属性が新たに追加され、プレースホルダの提供が簡単に行えますが、この属性の値を活かして、未対応環境にもプレースホルダを提供する jQuery プラグインを紹介します。 フォームの入力コントロール （input とか textarea） に対して、初期値として入力例などをうっすら表示し、ユーザーへのガイドとして使用する （プレースホルダ） なんてことはよくやります。 HTML5 では、プレースホルダを指定する属性として、まさにそのままの名前が付いた、placeholder 属性が新たに追加され、ブラウザさえ対応していればとても簡単に実現可能になっていますが、今のところ IE が対応していな
jQueryをロードする際のナイス！と思った書き方
概要 ▶ 出典：Initializr - Start an HTML5 Boilerplate project in 15 seconds!先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。このブログも実はPC版は形式上HTML5のページになっているんです。見た目はほとんど変わって 出典：Initializr - Start an HTML5 Boilerplate project in 15 seconds! 先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。 このブログも実はPC版は形式上HTML5のページになっているんです。 見た目
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
BOOT_COMPLETEDが受信出来ない - Google グループ
jobyj.in