uiGradientsは美しいグラデーションカラーをまとめているシンプルなWebサイトです。シンプルにグラデーションとCSSを纏めており、それ以上でも以下でも無いサイトです。単純ですがいいアイデアですね。インスピレーション向上に如何でしょう。 uiGradients
![美しいグラデーションカラーをまとめている・「uiGradients」](https://cdn-ak-scissors.b.st-hatena.com/image/square/abe082f90b88c14f678b0f62a1f3ff002d01b471/height=288;version=1;width=512/http%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2014%2F09%2Fgra01.jpg)
ユニークなサイトがあったのでご紹介。その日あったニュースをアイコンのデザインで伝える、というニュースサイト・icons timesです。アイコン作成のヒントになる・・かもしれない。 アイコンをサムネイルとして利用してその日のニュースを伝える、というもの。文章も勿論ありますが、アイコンのデザインをする際のインスピレーションに繋がるかもしれません。面白い事考えますね・・ アイコンのギャラリーのようなサイトですが、ニュースサイトです。英語が問題ない方なら面白いアイコンデザインギャラリーサイトとして利用出来そうですね。 例えばこのアイコンなら、北朝鮮が原子炉を再起動させた、というニュースです。リロードボタンと核のアイコンを使って表現しています。 こちらはGoogleとAppleのiWatchの話。 面白い事考えますね・・・件のニュースサイトは以下になります。 icons times
実際にコードを書いて学べる学習コンテンツ・Try jQueryのご紹介です。jQuery公式のオンライン学習サイトっぽいですね。英語ですけどこれから学ぼうという方にはうってつけかもしれません。 実践でjQueryを学べるサイトです。スライドも完備されています。英語が苦手な方にはちょっと難しいかもですけど・・ ドメインから察するに公式のものでいいと思います・・確認はしていませんけど。内容は基本的なものからスタートします。 スライドからスタートです。 他の学習サイト同様、指示通りに進めていきます。 正解ならSuccess!の文字が出て次に進みます。 これから始めたい、という方は如何でしょうか。 Try jQuery
ツールチップでメニューバーを実装する為のスクリプト・Toolbar.Jsのご紹介です。Webアプリ等でたまに見かけるやつ。省スペース化できていいですね。スマフォとの相性もいいかもしれません。 ツールチップでメニューを実装しよう、というもの。省スペース化できていいですね。 jQuery依存です。Webアプリなんかにどうでしょうか、との事。アイコンはtwitter bootstrapで使われているものを使用してるそうです。 こういうやつ。 デモではアイコンのみになっていますが、慣れてない方にとってはこのままだと分かりにくいのでもう一工夫必要かもですね。作ろうと思えば作れますけどアイデアが参考になったのでメモしました。ライブラリは以下に詳細があります。時間無いので詳細は割愛。 Toolbar.Js
タッチデバイスのスワイプ操作に 対応したイメージスライダーの ご紹介。ありそうであまり見かけ ないので一応備忘録・・・イメー ジスライダーと書きましたが、 基本何でもいけるみたいです。 スワイプ操作に対応したスライダーです。 実機でも確認したところ、問題なく動作しました。動作も軽量でなかなかいい感じです。 スライダーの中にスライダーをネストする事も出来ます。縦やグループごとにスライドさせる、など色々と応用が利きます。 時間が無いので使い方は割愛。元サイトに詳しく書かれているので問題ないかと思います。以下よりどうぞ。 Swiper
簡単なクイズコンテンツを作れる、というjQueryプラグインのご紹介です。クイズの回答次第で分岐する、みたいな細かい設定はできませんが、これはこれでシンプルでいいかも。 1問1問回答して進めていくような、簡易的なクイズを作れる、というスクリプトです。 選択肢を選んで進むと別の選択肢が出て正解/不正解を表示させる、という流れ。最後に正解数がとメッセージが出ます。 <script src="jquery-1.7.min.js"></script> <script src="slickQuiz-config.js"></script> <script src="slickQuiz.js"></script>回答やメッセージはJSONを使うみたいです。 $('#foo').slickQuiz();あとはクイズを表示させる場所を指定すれば完了 何かで使えるかも。という事で備忘録でした。 SlickQ
自分では多分使わないと思います けど、技術が凄いなーと感じたの でご紹介。よくあるスライドを、 YoutubeやVimeoなどの動画にシン クロさせる、というライブラリ だそうです。 自分で動作テストしたわけじゃないので紹介だけ。スライドと、そのスライドを紹介する動画をシンクロさせ、動画を再生すると同時にスライドを自動で進行させる、というライブラリ。うまく説明できませんのでデモを見たほうが早いです。 Webサービスになっていますが、ソースも公開されています。node.jsを使ってるみたいですね。 動画を再生すると、その動画中で紹介してる箇所をスライドも表示、動画が進むとスライドも次ページに移動してくれる、というもの。 将来、学校の授業もこんな感じになるんだろうか・・以下で動作デモを確認出来ます。ライブラリのライセンスはGPLとの事。使い方は確認してないので割愛します。 Presentz
JSライブラリのまとめサイトの ご紹介。既知の方も多いかもし れませんが、探すのに便利なの で改めてご紹介します。カテゴ リ分けもしてくれているので探 しやすいです。 様々なJSライブラリがまとめられています。探し物がある際は覗いてみるといいかも。 UIやメディア、グラフィック、ユーティリティなどのカテゴリに分けられています。現在は900ほどのライブラリがまとめられています。 シンプルで探しやすいのではないかと思います。ライブラリはそれぞれ簡単な説明もしてくれています。 パッと見たところ、評価の高い印象のライブラリに絞ってくれている・・・気がしました。(気がするだけかも 困ったら覗いてみようと思います。 Jster
個人的に必要になるかもと思ってメモ。 テキストや画像にエフェクトを与えて Webサイトを動きのあるサイトにする 手助けをしてくれるjQueryのプラグイン をいくつかご紹介します。 コンテンツに対するユーザーの興味を高めたり、画像を使用せずテキストを装飾したりと、使い方次第でいろいろ用途がありそうです。 Sliding Door Effect マウスオーバーで画像が4隅に開きます。動きも素敵。 Sliding Door Effect / デモ Rainbows テキストにグラデーションや影をつけます。これは凄いですね。 Rainbows / デモ Opacity to Show Focus マウスオーバーしたコンテンツ以外に半透明のエフェクトを掛けるjQueryプラグイン。テキストでも可能。 Opacity to Show Focus / デモ Color Changing Text an
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く