MarkdownifyはシンプルなMarkdownエディタを実装する為のスクリプトです。jQueryに依存しています。シンタックス等はcodemirror.jsを使用し、Markdownのパースはmarked.jsを使用しているようです。ライセンスはMITとの事。 Markdownify

Animsitionはページ遷移時にアニメーションエフェクトを加える事ができるJavaScriptです。jQueryに依存しています。エフェクトのセッティングはカスタムデータ属性で出来るので手軽に導入できそうですね。多用したりコンテンツ次第では逆効果になりそう、というか個人的にはあまり好きじゃないので使わないと思いますけど、未だによく見かけるので需要はあるのでしょう。ライセンスはMIT。尚、余談ですが同開発者さんは他にもユニークな物を作って公開されているのでページ下部のOther projectsも是非ご覧ください。 Animsition

snabbt.jsはミニマル設計なアニメーションJSライブラリです。手軽にアニメーションオブジェクトを作成することが出来ます。またjQueryと併用することも可能のようです。設定も簡単で良いですね。ライセンスはMITとの事。 snabbt.js

Js Tutorialは配布されているJSライブラリやjQuery等のプラグインの使い方をまとめているWebサイトです。と言っても、配布元で書かれているオプションや簡単な解説のみなのでチュートリアルとはあまり言えない印象です。それでも、ソース元やその場で確認出来る動作デモ、各ライブラリのカテゴリ分けもされているので探しものの時は便利かなぁと思います。尚、ライセンスは書かれていないので直接見に行く必要があります。 Js Tutorial

jquery.matchHeight.jsは様々な状況に対応可能な、エレメントの高さを揃えるスクリプトです。jQueryに依存しています。グルーピングされた要素やネストされた要素内のエレメントの高さの統一、レスポンシブWebデザイン等にも対応可能で、要素間で異なった値のmarginやpadding、borderが設定されていても高さを均一処理してくれます。まだあまり試していませんけど凄く便利そうですねー。早速利用させて頂きます。ライセンスはMITとの事。 jquery.matchHeight.js

Open Iconicは223ものアイコンをOSSとして公開されているアイコンフォントです。EOTやWOFF、OTFだけでなく、PNG、SVGなどのフォーマットも用意されています。また、マルチカラー化や用意された複数サイズのフォントを利用してRWDに対応する、等も可能のようです。シンプルで汎用性の高そうなデザインですね。ライセンスはMIT、フォントはOFLとして公開されています。 Open Iconic

Flat InspireはフラットなデザインのWebサイトのギャラリーサイトです。コンテンツ別、色別、使用フォント、デザインスタイル等でカテゴライズされています。よくあるデザインギャラリーですが、フラットデザイン特化なので覚えておいても損はなさそうですね。 Flat Inspire

HTML+JSのスライドを実装できる jQueryのプラグイン・Ascensor というのを以前ご紹介したので すが、これがWordPressテーマに なって配布されていましたので ご紹介。使う機会が、というよ りコードを参考にしたい。 jQuery・Ascensorに関しては以前の記事(キーボードで画面操作するスライド系jQueryプラグイン・Ascensor)をご参照下さい。

派生と言っていいかどうか分かり ませんけど、Plusstrapは、より 迅速にWeb開発を可能にしたフレー ムワークとのことです。アプデ したBootstrapをちゃんと把握 していないので詳細は触れない でおきます。 Twitter Bootstrapを元に、より迅速にWeb開発が可能になる、というフレームワークだそうです。派生の定義が良く分かってないので違っていたらごめんなさい。 正直な話、時間作れてなくてソース殆ど見てません。ナード向けだそうです。自分は一般人なのでギークとの違いが良く分からないですが凄い人向けって事なんじゃないでしょうか。 各種コンポーネントも揃ってます。 カスタマイズも可能。不要なものをチェックから外せば軽く出来ます。 今の仕事が落ち着いたら触りたい。 Plusstrap

使いどころもありそうだったので 備忘録。文字をアニメーションし ながら少しずつ表示させていく様 なエフェクトを実装できるjQuery プラグイン・Lettering Animate です。 プロダクトのキャッチコピーなんかもこの方法でユーザーの視点を誘導出来るかもしれないですね。Flashでは昔からよく見かける表現かもしれません。 lettering.jsにアニメーションエフェクトを追加したものになります。8種類のアニメーションエフェクトが用意されていました。 以下動作サンプルです。 Sample コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type="text/javascript" sr

ちょっとうまい説明が思いつかなかった んですけど、複数並べられた画像など を同時にスライドさせるjQueryプラグイン。 省スペースに多くのコンテンツを表示 させる事が出来るのはちょっといいかも 知れません。 あんまり見かけないタイプのスライダーですね・・省スペースに沢山の情報を表示させたい、という時に使えそうな使わなそうな。たまに似たようなインターフェース見かけますね。 これらの8つのコンテンツ部分が同時にスライドします。オプションで数を減らしたり速度を変えたり。 デモ見たほうが早いですね。説明下手ですみません。 Demo js<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"> </script> <script src="jquery.eas

羅列された要素をフェードイン しながら徐々にランダムで表示 させるエフェクトをjQueryで実装 出来る、というプラグインの ご紹介。割と短いコードで作れる エフェクトなので覚えておきたい ですね。 要素をフェードインさせながらランダム表示させるjQueryのプラグイン・champagne.jsです。 champagne.js とても軽量で、テキストでも画像でもOKです。シンプルなので色々応用が利きそう。 以下動作サンプルです。※再生ボタンで動作します。 コード <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.champagne.m

Youtubeのソーシャルサービスへの 投稿ボタンっぽいUIをjQueryで実装 したYoutube Style Share Buttonの ご紹介です。クリックするとソーシャル サービスへの投稿ボタンが入ったbox が表示されるアレです。同様に短縮 URL機能もPHPで再現されています。 Youtubeのソーシャルボタン、と言われても僕はあまりピンと来ないんですが、便利は便利なのでご紹介。短縮URL機能はPHPでやってるみたいです。 上記はYoutubeの共有ボタンです。これそっくりの共有ボタンをjQueryで実装します。 サンプル 日本向けに内容を変更してサンプルを実装しました。IE6~8でも動作しますがcssの調整が必要です。サンプルは調整していませんので動作はIE以外でのご確認をおすすめします。 サンプル 短縮URLは可能ですが、Twitterの投稿ボタンでそのURLを投げる等は出

どこかで使うかもしれないと思って メモがてらシェア。スマートフォンに サクッと対応させるjQueryプラグイン のjquery-mobileに960グリッドシス テムを取り入れることが出来るcss、 jquery-mobile-960です。 なんだかタイトルが謎ですが語彙が無いだけなので気にしないでください。jquery-mobile-960はライセンスがMIT。商用もOKで無料で配布してくれています。 jquery-mobile-960は、960.gsをjQuery-Mobileを使ったレイアウトにも使うためのcssです。2カラム、3カラム、イメージギャラリーなどに使えそうな4カラムレイアウトなどもも思いのまま。 少し大きいですけど全画面キャプチャ↓ 実際にiPhoneで確認 縦の場合。 横の場合。 使い方<link href="http://code.jquery.com/mobile

最近かなり見かけるようになった印象の、 大量のコンテンツを格納するメガメニュー の横に飛び出すタイプ。jQueryで実装して います。メガメニューはECサイトやポータル サイトなどなど、階層の深いWebサイトにて ユーザビリティ向上に貢献してくれます。 何度もクリックしないと目的の場所に到達できない、という設計はユーザーに取って不便ですし、離脱率も上げてしまいがちですので、大量のコンテンツを保有するWebサイトではこういったメガメニューの導入を検討するのも良いかも知れません。 メガメニューはドロップダウン形式が多いのですが、今日ご紹介するスクリプトはサイドメニュータイプです。 見た目はよくあるサイドナビゲーションメニューですが、マウスを乗せると横に関連ページなどが整理された状態で飛び出しますので視覚的にもコンテンツを探しやすそうです。 画像を含めてあげるのもなかなか効果高そうですな。 コー

結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。 いろいろ

昨日に続き今日も似たような内容 ですが。グリッドレイアウトの レスポンシブWebデザイン対応の CSSフレームワークですが、こちら はグリッドのカラム数やマージン を指定できます。 どんどん便利になりますね。最近同じ内容の記事ばかり書いてて自分がスパマーみたいな気分になってきましたが気にしないようにします。 グリッドレイアウト x レスポンシブなフレームワーク。DL前にカラム数などをカスタマイズ可能です。 カラム数などを入力してダウンロードします。逆に、数値を入れないとダウンロードできない様になっています。 デモファイルです。ウィンドウをリサイズするとそのサイズを上部に表示してくれますので調整しやすいのでは。 以下より利用できます。 34Grid

テキストをドラッグすると アイコンが表示されて、ク リックすると辞書サイト等 で検索結果を表示する、と いうjQueryプラグインです。 用途は多くは無いかもしれませんけど、ちょっと面白かったので備忘録。ドラッグしたテキストに任意のサイトで検索結果を表示するリンクを表示させる、というもの。 動作サンプル見たほうが早そうですね。サンプルはGoo辞書で検索出来るように、アイコンは任意の画像に変更して有ります。 確認出来ましたでしょうか。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <script type='text/javascript' src='wordsmith.js'></script>コアとプラグイン

コンテンツのスライドイン・ アウトと簡易的なスライダー を実装する、というスクリ プト。うまく説明できません が、目を惹くことは出来そう です。 デモを見てもらったほうが早そうなので見た目の解説は割愛します。語彙が欲しい。 動作サンプルご覧頂いたほうがいいっぽいです。 Sample 素敵な動きですね。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="custom.js"></script>サンプルのようにする