Checkboxes and radio buttons customization (jQuery and Zepto) plugin
super customized checkboxes and radio buttons for jQuery & Zepto iCheck v1.0.3 @Fronteed Plugin features Identical inputs across different browsers and devices — both desktop and mobile Touch devices support — iOS, Android, BlackBerry, Windows Phone, Amazon Kindle Keyboard accessible inputs — Tab, Spacebar, Arrow up/down and other shortcuts Screenreader accessible inputs — ARIA attributes for Voic
100 Tiny CSS Tools & Apps for Web Designers – Speckyboy
Each of these free web-based tools and apps have been built by web designers for web designers. They all offer a time-saving solution to some of those monotonous or even complex CSS tasks you may need to perform from time to time. Without needing to install anything, all you have to do is bookmark, and save them for that day when required. From assessing your website’s accessibility to generating
横幅の可変にも対応したPinterest風デザインライブラリ·Freetile.js MOONGIFT
Freetile.jsはカラム幅も可変なPinterest風デザインを実現するライブラリです。 2012年前半の話題を一気にかっさらっていったPinterestはその奇抜なデザインもあり、色々な類似デザインを実現するライブラリを登場させるに至っています。Freetile.jsもその一つですが、高さだけでなく幅も自由に設定できるのが特徴になります。 サンプルです。かなり複雑なデザインでもこなします。 実例です。斬新なデザインがきちっと決まります。 フィルタリングしました。並び変わる時のアニメーションが格好いいです。 要素がない部分もできてしまうのは致し方ありません。 Freetile.jsを使うとかなり自由度の高いデザインが実現できます。とは言え表示はFreetile.jsに任せきりなので、思った通りのデザインになるとは限りません。なおフィルタリング機能があり、絞り込む時にはアニメーションが
ページ遷移不要の、シンプルな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.js" type="text/javascript"></script>jQuery本体とプラグインを読み込みます。 $(do
Wookmark
高さの異なる要素をグリッドに沿って、レンガ状に隙間なく並べるjQueryのプラグインを紹介します。 同種の有名スクリプト「Masonry」はアニメーションを使ってダイナミックにレイアウトを変更しますが、このWookmarkはシンプルに並べなおすだけです。 デモ:幅800pxで表示 [ad#ad-2] Wookmarkの使い方 実装はいたってシンプルです。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.wookmark.js"></script> HTML デモを例にHTMLはリスト要素など、並列に配置しま
Pinterestっぽいレイアウトを作ってみる
以前、レンガ風に要素を配列するレイ アウトを凄くよく見かけるようになり、 それから一種のブームのように様々な リソースが出回りました。最近はあま り見かけなかったのですが、Pinterest の登場で、また似たようなレイアウト のリソースが出てきている印象です。 Pinterestのように時系列を崩さず、ボックスを配置するスクリプトにjquery masonryっていうプラグインがあるのですが、同じようなプラグインでWookmark-jQueryというのを昨日見かけましたので、空いた時間になんとなくPinterestっぽいレイアウトを作ってみる事にしてみました。 Sample ソース調べるほど真面目な記事でもないので見た目を勘に頼って似せただけ。 ※あくまで「っぽい」です。 Sample コード<script src="js/jquery-1.7.1.min.js"></script> <
[JS]高性能で設置も簡単、ブラウザ枠いっぱいに背景画像を配置するスクリプト -bgStretcher
デモページ：Super Slider スライドのスーパー版で、斜め方向のスライドで画像を切り替えます。 bgStretcherの主な特徴 セットアップはシンプル 全てのモダンブラウザをサポート 画像は一枚だけでなく、複数枚にも対応 対応ブラウザ Internet Explorer 6, 7, 8, 9 Firefox 2, 3, 4 Opera 9+ Safari Chrome bgStretcherの使い方 Step 1: ファイルのダウンロード サイトの「Download」よりファイル一式をダウンロードします。 一式には必要なファイル全て（jqeury.jsも）が含まれています。 Step 2: 外部ファイル 外部ファイルを下記のように<head>～</head>に記述します。 <script type="text/javascript" src="../jquery-1.5.2.mi
TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 ２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 ３．プラグインのダウンロード githubのjQue
[JS]異なる高さのdiv要素の高さを揃えるだけのシンプルなスクリプト -Equalbox | コリス
Equalbox.js デモページ [ad#ad-2] Equalbox.jsの実装 HTML 各div要素はjQueryのセレクタで指定できるように、idなどを指定します。 <div id="box-container"> <div id="box1" class="box"> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> </div> <div id="box2" class="box"> <p>dsfsdfsdfsdf</p> </div> <div id="box3" class="box"> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdf
Twitterのようにスマートな通知バーを一瞬で実装できるjQueryプラグイン「jQuery Notify bar」:phpspot開発日誌
Twitterのようにスマートな通知バーを一瞬で実装できるjQueryプラグイン「jQuery Notify bar」 2010年01月08日- jQuery 'Notify bar' Twitterのようにスマートな通知バーを一瞬で実装できるjQueryプラグイン「jQuery Notify bar」。 ページの上部にアニメーションされながら表示されるあの通知バーです。 時間がたつとアニメーションしながらスマートに消えてくれます。ページデザインがどんなものであろうと影響を受けません。 色を変えて、エラーモードにしてみたり、成功モードにしてみたり自由にできます。 実装は超簡単で、次のように初期化するだけです。 $(function () { $.notifyBar({ html: "メッセージ", delay: 2000, // 表示するミリ秒数 animationSpeed: "norm
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」:phpspot開発日誌
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 2011年04月07日- Google image search style image alignment with jQuery Atteeeeention plugin | DreamersLab 異なる幅・高さの画像も超綺麗に並べられるjQueryプラグイン「Atteeeeention plugin」。 <img>でただ単に画像を並べると、幅、高さの違いから、ページがごちゃごちゃしてしまいますが、このプラグインを使うことでGoogle の画像検索のように綺麗にピッチリ並べられます。 普通に並べるとちょっと残念なことに。空白ができちゃいます。 プラグインを使うことで、あら綺麗。となります。 Firefox は 2以上、IEは6以上ということで殆どのブラウザに対応。 まず、必要な
jQueryモバイルを使ったスマートフォンサイトギャラリー – creamu
「jQuery Mobile Gallery」というサイトで、jQuery Mobileを使ったサイトやアプリがたくさん紹介されています。 スマートフォン用のサイトやアプリの参考に、一度見てみてください。 jQuery Mobile Gallery オフィスのことで頭がいっぱいですが、急に案件が立て込んできたのでがんばります。
Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」:phpspot開発日誌
Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」 2011年04月05日- Custom YouTube Player Reload ? Scripts and Code Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」 Youtubeの通常のembedタグを埋めこむと、再生ボタンやらなにやらが付いていたりしますが、次のように、再生ボタンなしに出来ます。 これだけでも、デザインされたサイトには馴染みそうですね。バーがあるとデザイン全体が台なしというケースもありそう。 更に、カーソルを合わせると次のようにカスタマイズされたコントロールバーが現れます。 このコントロールバーは、JavaScript + CSS + 画像でデザインされており、
他のカラムに合わせて内容をスマートにスクロールさせられるjQueryプラグイン「SmartColumnScroller」:phpspot開発日誌
他のカラムに合わせて内容をスマートにスクロールさせられるjQueryプラグイン「SmartColumnScroller」 2010年12月09日- dhlavaty/jQuery-SmartColumnScroller - GitHub 他のカラムに合わせて内容をスマートにスクロールさせられるjQueryプラグイン「SmartColumnScroller」。 通常、複数のカラムがあると、どちらかの縦の長さが長いので、下の方にスクロールしていくとどちらかが見えなくなってしまいます。 たとえば、ブログ等だと左カラムの記事部分が長くなりがちです。メインである記事を読み終えた後は、スクロールしたことで右カラムの内容も綺麗になくなっていますね。 左カラムが縦長の場合、右カラムに空白が出来てしまう このプラグインを使えば、右カラムが見えなくならないよう、右カラムがうっとうしくない具合に付いてきてくれま
たった１行でIEでも使えるブロックの角丸を実現できるjQueryプラグイン「Pina」:phpspot開発日誌
Pina たった１行でIEでも使えるブロックの角丸を実現できるjQueryプラグイン「Pina」 pina(20, 'blue', 'classname1'); のようにするだけで角丸が実現できます。 IE6のような古いブラウザにも対応しているのが特徴。 CSS3になって対応ブラウザでは便利になったとはいえ、クロスブラウザ対応というと１行では実現できないので、利用を検討してみてもよさそうです。 pina 関数の第一引数の値で角丸のradiusサイズを指定できます。 関連エントリ CSSで角丸テクニック２５ IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」 CSS3で影付き角丸グラデーション付きのボタンを作成するサンプル
css-lecture.com - css lecture リソースおよび情報
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.
関連アイテムを出す場合等に使えそうなjQueryカルーセル「bxCarousel」:phpspot開発日誌
bxCarousel | jQuery Carousel Plugin 関連アイテムを出す場合等に使えそうなjQueryカルーセル「bxCarousel」 次のようなUIでamazonの関連商品を出すような場合に使えそうです。 個々のアイテム自体はulリストで定義するだけなので簡単。 ブログ記事の最後なんかに設置することもできそう 関連エントリ JavaScriptで実装するクルクル回転する3DカルーセルUI実装ライブラリ 高速に動作する画像カルーセルＵＩ実装用jQueryプラグイン「Agile Carousel」 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル カルーセルやページャ機能がついたYUI 2.6.0がリリース
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vide
スクロールに応じて要素がアニメーションする、視差効果（パララックス）を取り入れたWebデザイン例とTipsいろいろ - かちびと.net
