blakedotvegas/vidbg GitHub HTML5動画を背景にできるjQueryプラグイン「vidbg.js」 背景に動画をつかっているサイトはよく見かけるようになりましたが、それをお手軽に実現できるプラグインです 関連エントリ 動画を画像に変換して連続再生させて動画風に見せられる「Frame Player」 画像を並べて動画プレイヤーで動画っぽく表示できる「Jquery image player」 商用利用もフリーの動画素材投稿サイト「Distill」
Smoke Bootstrapにモダンな機能を追加してくれるjQueryプラグイン「Smoke」 フォームのバリデートや通知、モダンなプログレスバー、フルスクリーン機能、パネル等の機能を追加できます。 より今っぽいサイトを作るのに役立ちそうなプラグインなのでBootstrapを使う人は知っておいて損は無いと思います 関連エントリ Bootstrapのポップアップを強化する「WebUI Popover」 Bootstrapのポップアップ風デザインのモーダルを作成「Stackbox.js」 Bootstrapなサイトでレスポンシブなタブナビゲーションを実現する「Responsive Tabs」 Bootstrapのように多数のコンポーネントが詰まったUIツールキット「Titon Toolkit」 BootstrapのDropdownを使うなら必ず知っておきたい「Bootstrap Enhanc
Full Screen Vertical Scroller | CSS3 | jQuery | Luke Snowden フルスクリーンのスライドを簡単に作れるjQueryプラグイン「FSVS」 divを並べて初期化するだけの簡単実装。オプションで挙動やコールバック指定でカスタマイズ性も高いようです マークアップ 関連エントリ レスポンシブなフルスクリーンでスクロールするページが作れる「brock scroll」 画像をフルスクリーンに拡大できるギャラリー作成jQueryプラグイン「fullsizable」 動画をフルスクリーン背景にすることができるjQueryプラグイン「Vide」 タイトルヘッダーをフルスクリーンにしてクールにするチュートリアル
scrollReveal.js スクロールで表示範囲に入った際のアニメーションをコードレスで簡単に記述できる「scrollReveal」 デモページでは、スクロールしていくと要素がそれぞれにアニメーションするクールなデモが見れます 実装には次のように、data-scrollrevelにルールに沿った文字列を渡すだけで、複雑なJSコードは不要です。 関連エントリ スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」 スクロールに連動するパララックスな星空背景を実装できるjQueryプラグイン「Starscroll」 ページを水平にパララックスしつつスクロールさせられるjQueryプラグイン「jInvertScroll」 スクロールしてもブロックを固定位置に表示させられるjQueryプラグイン「Sticky-Kit」 要素をスクロール中に自動で固定する「
Addepar | Ember Charts シンプルだけどカスタマイズが簡単でインタラクティブなグラフが色々描ける「Ember Charts」。 シンプルなグラフを基本として色々とカスタマイズ可能。 デザインがシンプルでフラットなので色々な場面で使うことが出来そう。 関連エントリ フラットデザインがクールな円グラフ描画jQueryプラグイン「Pie Chart」 クールでアニメーションするグラフを描画できるHTML5チャートライブラリ「Chart.js」 水量・温度・メーター等、産業用のグラフを描画できるjQueryプラグイン「Industrial.js」 どんなデータもリアルタイムなグラフにできるフレームワーク「FnordMetric」
Exclusive Vector Freebie: 250 Ultimate World Monuments Icon Pack by Freepik - noupe 世界のモニュメントのアイコン250個セット 自由の女神や、エッフェルタワー有名な建物等がセットになったものがダウンロード可能です 旅行サイトなんかにつかるかもしれませんね。 関連エントリ 200種類のフリーな汎用ベクターアイコンセット フラットな62種類のファイル・タイプアイコンセット「File Type Icons」 ピュアCSSで描かれたアイコンセット「Cikonss」 ハイクオリティなソーシャル向けのフラットアイコンセット フリーな1262種類のフラットアイコン「COSMO MINI」
10 Best Free HTML And CSS Website Templats Of June 2011 超使えそうな新しめでフリーのHTML/CSSデザインテンプレート集がまとまっていました。 種類は色々でコーポレートサイトやキャンペーンサイト等色々使うことができそうです。 ちょこっと変えることで開発者さんでも比較的容易かつ高速にプロモサイトが作れますね 関連エントリ 34のフリーで綺麗なXHTML/CSSテンプレート ほんとにフリー?というクオリティのXHTML/CSSテンプレート20 綺麗にデザインされたフリーのHTML/CSSテンプレート10 フリーの(X)HTML/CSSテンプレート50 クールなデザイン満載のXHTML/CSSテンプレート40種
Best jQuery plugins for Twitter integration | AjaxLine サイトにTwitterの機能を組み込むためのjQueryプラグイン集。 Twitterの勢いがまだまだ衰えませんが、それにともなってサイトにTwitterの機能を実装したいというニーズも高まってきているのではないでしょうか? そんな際に便利に使えるプラグイン集です。 Twitterのサイトが落ちた時にサイトが重くなってしまうという点に注意して使いたいですね。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集 ajaxファイルアップロードに使えるjQueryプラグインいろいろ 拡大の仕方がクールなLightBox実装jQueryプラグイン「YoxView」
Sexy Music Album Overlays Komodo Media これは楽しい!どんな画像もCDのアルバム風にできるCSSテクニック。 どんなサイズの画像も、次のようなジュエルケースに押し込んでしまえるCSSのテクニックです。 CSSが無い状態だと次のような殺風景な状態ですが、CSSとPNGのオーバーレイによって美しいジュエルケースに入った状態になってますね。 他にもスタイルが容易されていて、CDのディスク風にする例 同じようにレコード風にする例も紹介されています。 これはすばらしいですね。応用して、ゲームソフトのパッケージ風にしてみたり、色々できそうです。 関連エントリ CSSリストに関する5つのテクニック集 CSSとdivを使った画像先読みテクニック 便利なCSSテクニック30選 本の目次部分のようなリストをCSSでデザインするテクニック
50 Insanely Good Vector-based Web Designs - VECTORTUTS ベクターベースのダイナミックWEBデザイン集。 次のようなダイナミックなデザインが特集されていて、ちょっと迫力のあるサイトを作ってみようという方にはよい見本になりそうです。 Mirasim Next2Friends Toucouleur Navigant Consulting George Lazaros 全部見る 数年前にこんなサイトが1つでもあったら話題を集めていそうですが、今ではこういうサイトを見つけるのは難しくなくなってしまいましたね。 デザインで注目を集めるサイトを作るのはますます難しくなっているような気がします。 関連エントリ 2008年のCSSベストデザインサイト集 サイトデザインをオシャレにする背景画像パターン集 ウェブデザイン用超便利ツール集 Web2.0デザイン
100 Free High-Quality XHTML/CSS Templates | Developer's Toolbox | Smashing Magazine プロレベルでハイクオリティなXHTML/CSSテンプレート集。 本当にフリーなのか?というクオリティのテンプレート集が色々。 Package Consultant Environmental Brand Internet Jobs Internet Music Greefies Squick Design Harvest 全部見る 毎回驚きですが、今回もすごいです。 デザインの仕事も減ってしまいそうで怖い。 関連エントリ CSSテンプレート配布サイト色々まとめ デザインされたフリーのCSSテンプレート集 フリーのビューティフルなCSSテンプレート沢山「Css 4 Free」
MooTools 1.2 Image Protector: dwProtector Image protection is a hot topic on the net these days, and why shouldn't it be? 自サイトの画像の保存をプロテクションする仕組み サイトの画像は、次の方法で保存できますが、それを全部禁止する方法です。 ・右クリック→名前をつけて保存 ・デスクトップにドラッグ&ドロップで保存 ・右クリックで名前をつけて背景を保存 ・背景画像を表示 dwProtect.js をダウンロードして、JavaScriptで以下のように書くだけです。 window.addEvent('domready', function() { var protector = new dwProtector({ image: '/blank.gif', elements:
BlueShoes: JavaScript Collection Get all the above components in one package. There is an example that uses most of the components.忘れてはいけない超絶JavaScriptライブラリ「BlueShoes:JavaScript Collection」。 既に紹介したと思っていたJavaScriptライブラリであるBlueShoesの紹介。 ご存知の方も多いと思いますが、知らない人も多いようですね。 ライブラリ、というより、リッチなコンポーネント集といったイメージで、次のような様々なコントロールが使えます。 WYSIWYGエディタ Excel風スプレッドシート ツリービュー スライダーコントロール 他にも下記の様々なリッチコンポーネントが使えます。 入力系コンポーネ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く