Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: Javascript

[Web Design] Scrollanim – スクロール芸のJSライブラリ

  • Pocket
  • このエントリーをはてなブックマークに追加

スクロールイベントをきっかけに、何かしらの動きとともにコンテンツが出現する、いわゆるスクロール芸を行うJSライブラリ。配布ページ自体がデモページになっていて、スクロールすると色々動きます。ライブラリはCSS3とJSからできているようで、サイズが9kbと軽いのが特徴。導入も適用したい要素に属性を追加するだけのようなので、簡単に使えそうです。詳細とソースコードはGithubで公開されています。

[Javascript] Chart.js 2.0 – データから動的にグラフ生成を行うJS

  • Pocket
  • このエントリーをはてなブックマークに追加

用意したデータから、Web上に動的にグラフ生成を行うJavascript、Chatr.jsの2.0がリリースされていました。2.0になって複数グラフのミックスや、新しいタイプのグラフのサポート、グラフのアニメーションなどが機能追加されたようです。導入やカスタマイズについてはこちらのページから確認することができます。

[Javascript] Unslider, the simplest carousel slider for jQuery – シンプルなjQueryスライダー

  • Pocket
  • このエントリーをはてなブックマークに追加

シンプルな作りのjQueryスライダー。サイトを見ると導入はかなり簡単で、script行を挿入して、マークアップは1つのスライダー項目を1つのliで囲うというもののようです。この手のスライダーではごく一般的な手法ですね。Methods & Optionsの項目を見ると、シンプルなわりにオプションについては豊富に用意されているようで、カスタマイズもしやすそうな印象。スライダー用のjQueryプラグインって山ほどあるけど、選択肢のひとつとしてなかなか良さそうな感じ。

[Javascript] matchHeight – 横に並んだ複数要素の高さを揃えてくれるjQueryプラグイン

  • Pocket
  • このエントリーをはてなブックマークに追加

水平方向に並んだ複数要素のHeight(高さ)を揃えてくれるjQueryプラグイン。こちらでデモを確認することができます。ソースダウンロードして挙動を確認してみたんですが、横方向に同じ位置にある要素の内、最も大きいHeightを参照しているようです。かゆところに手が届くとはまさにこの事で、たまーにこうしたいって時あるんですよね。レスポンシブレイアウトにも対応しているようで、使い勝手が良さそうです。

[Misc] PCE.js Mac Plus emulator running Mac OS System 7 – ブラウザ内で動くSystem 7

  • Pocket
  • このエントリーをはてなブックマークに追加

ブラウザ内で実行できるSystem 7。早い話しが古いMacOSです(昔はSystemなんとか、日本語環境だと漢字Talkと言われてました。懐かしい)。JSで作られているらしく、ホントに動くのが信じられないくらい色々ちゃんと動きます。例えばTeachTextを立ち上げればちゃんとテキスト入力ができるし(日本語は無理っぽい。まぁSystemだから当然か)、MacDrawを立ち上げればちゃんとドローイングが出来ます。About This Macintoshを開けば、メモリーが4MBで動いてる事まで確認できます。いやこれスゴいっすね。これが使えたからって今の時代何も便利になるわけじゃないですが、オールドMacファンにはこのモノクロのインターフェースだけでも十分ハァハァできると思います。ちなみに自分のファーストMacはPowerBook 160cで、漢字Talk 7.1でした。ネットもない時代Mac使って何してたんでしょうね。懐かしいですな。

[Javascript] fullPage.js – 全画面スクローラー

  • Pocket
  • このエントリーをはてなブックマークに追加

ブラウザウィンドウ全体を1ページ単位にして、画面単位でスクロールできるJS。スクロールホイール回すと全画面単位で切り替わる、最近よく見る形のスクロール方式です。Appleなんかも商品によっては使ってますね。このJavascriptは、縦方向だけでなく横方向にもスクロールできる点が特徴。2ページ目だけ横方向にカルーセルっぽく見せたいという場合に使えます。また各ページはアンカーリンクにも対応しているので、ナビゲーションを使ったスクロールにも使えます。個人的にはPage up / downのキーでもちゃんと操作できる点がナイスでした。

[Web Design] CodeMyUI.com – Web制作に便利なコードスニペットを集めたサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

Webデザインで使える様々なコードスニペットを集めたサイト。チェックボックス装飾やModalウィンドウ、マウスオーバーアニメーション、イメージスライダー、グリッドレイアウト、CSSボタン、イメージギャラリーなど、色々な場面で使えるコードが紹介されています。各作例はアニメーションGifを使って一覧されているので、動きの確認まで確認できる点がとってもナイスです。

[Web Design] wwwhere – Web制作に必要な各種リソースをまとめたサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

Web制作に必要な様々なリソースをまとめたサイト。あらゆるカテゴリの情報リソースやツール類がまとめられてます。各情報はカテゴリに分けて整理されており、例えば「Coding」→「Code Editor」と進めば、Webコーディングにおけるツール類(この場合は主にローカルアプリケーション)をまとめて見る事ができます。あとはその中から自分に必要なツールを選ぶだけ。Webの制作って以前に比べるとこうした既存のツールを組み合わせて使う機会がグっと増えたので、日常的に使うツールがまだ固まってない人なんかにはこういうサイトは便利かもしれません。新しいツールの発掘にもイイですね。