HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」:phpspot開発日誌
turn.js - The page flip effect for HTML5 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ドラッグ＆ドロップでべらっとめくるあのインタフェースがHTML5で実現でき、iPadやiPhoneなどでも動作します。 電子書籍ビューアとして使えそうですね ページに立体感を出すために影なんかも描画されてます。 マークアップや初期化も超簡単です。<div>を並べて初期化するだけ。 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル モバイルブラウザでのHTML5対応状況が一目瞭然の「Mobile HTML5」 HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」
画面上で誰かがタイピングしているようにアニメーションできるjQueryプラグイン「jticker」:phpspot開発日誌
画面上で誰かがタイピングしているようにアニメーションできるjQueryプラグイン「jticker」 2011年11月01日- webdev.stephband.info | jticker 画面上で誰かがタイピングしているようにアニメーションできるjQueryプラグイン「jticker」 タイピングしているようにアニメーションさせて動きを作ることで利用者の注目を集められます。 文書を読んでもらいたい場合なんかにも効果があるかもしれません。 流れる様にテキストアニメーション。 複数の文書を続けてスライドショーっぽくすることも出来るみたいです。 これはなかなか使えそうですね 関連エントリ テキストをCSS3でぼやけさせてアニメーションできたりするjQueryプラグイン「TextBlur」 カスタマイズ可能なアニメーションスクロールが実現できるjQueryプラグイン「PageScroll」 テキ
HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル:phpspot開発日誌
Create a page flip effect with HTML5 canvas | Tutorial | .net magazine HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル。 canvasなんかも活用しつつ次のようにリアルに実現できちゃってます。Chromeなんかでは超なめらかでした。 Flashじゃなくてもできちゃうんですね。 ライブデモ 実装のためのコードがチュートリアル形式で解説されていますが、このテクニックは色々と使えそうですね。 関連エントリ CSS3を使った驚きのデモいろいろ２５種類 画面をスワイプさせてページ送りができるWordPressプラグイン「iPad Swipe」 iPadのブラウザ上で電子書籍風のめくる操作を可能にするJavaScript
PHPでWEBサイトのスクリーンショットを作成するチュートリアル:phpspot開発日誌
Taking screenshots of websites in PHP PHPでWEBサイトのスクリーンショットを作成するチュートリアルが紹介されています。 スクリーンショットの撮影には wkhtmltopdf というオープンソースソフトウェアを利用します。 このソフト自体がMac OS XやWindows、Linuxで動作するコマンドラインツールとなっているようなのでクロスプラットフォームで動作します。 このツールを使えば、「wkhtmltoimage --quality 50 //phpspot.org/blog/ snap.jpg」のようにコマンドを打つことでスナップショットが撮れます。 コマンドラインオプションが多数あるのでPHPerじゃない方も覚えておいて損はなさそうです。 例えば、 JavaScriptをオフにした状態でスクリーンショットを撮ったり、高さや幅の指定、切抜きの
IKEAの家具紹介画像っぽくイメージに注釈を入れるjQueryチュートリアル:phpspot開発日誌
Making an Interactive Picture with jQuery | Build Internet IKEAの家具紹介画像っぽくイメージに注釈を入れるjQueryチュートリアル 室内のいい感じの写真をベースに家具を紹介するあのIKEAサイトのUIをjQueryを使ってクールに再現しているチュートリアルです。 単純な商品の紹介よりも、より商品を魅力的にみせることに成功していると思うのですが、これを自分でもやりたいという時に参考にできます デモページはこちら ECサイトを構築する際等に、いい仕事ができるかもしれませんね。 関連エントリ オシャレなECサイト構築用のWordPressテーマ３０ PR: 全部入りECサイトを安価に構築できる「Live Commerce」が素晴らしい！ Ajaxスタイルのローディングも画像を使わずピュアCSSで実現するデモ
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」:phpspot開発日誌
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 2011年04月12日- Slider Kit, sliding contents with jQuery 画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 このプラグインを使うことで実に様々なスライダーが実現出来ます。以下にサンプルを。 一見普通の画像 カーソルを合わせるとページ送りが出るUI。これだけでもシンプルでかなり使えそう。無駄なUIは不要という方に。 ページインデックスを次のように○で表示したスライダーも作れます。 ページ番号がついたもの サムネイルがついた物 サムネイル＋ラベル付き サムネイルを横に配置したもの シンプルにサムネイルを敷き詰めた例 何らかの製品等の特徴を表示するようなおなじみのタブUI型スライダーも。 画像だけでなくHTMLも使える タ
GUIパーツやアイコンがセットになったイラストレーター用UIデザインフレームワーク:phpspot開発日誌
User Interface Design Framework | 260 free vectors icons, GUI graphic library for web design GUIパーツやアイコンがセットになったイラストレーター用UIデザインフレームワーク。 次のようなGUIパーツやアイコン、グラデーションスタイルの３つがセットになった素材集です。 GUIパーツとアイコンを使って、ユーザインタフェースのモックを作る際に役立ちそうです。 次のようにパーツが非常に豊富なので、イメージを作る分には困らなさそう。 アイコンも種類豊富 関連エントリ ブラウザ上でサイトのモックアップを光速で作成できるサービス「Lumzy」 WEBレイアウト作成用のモック作成ツールキット WEBデザインのモック作成時に役立つ手書き用PDFテンプレート集 サイトのモック等に使えるダミーのイメージを簡単に作れる
WordPressにFAQ管理機能を追加するプラグイン「FAQ Manager」:phpspot開発日誌
WordPress ? FAQ Manager WordPress Plugins WordPressにFAQ管理機能を追加するプラグイン「FAQ Manager」。 プラグインをインストールすると管理メニューにFAQsメニューが追加され、FAQの追加、管理、FAQのカテゴリ、タグ等の設定が出来ます。 この機能によって、WordPressをベースとしたFAQサイトが作れそうです。 記事やページ以外の括りとして、FAQのページ管理したい場合に使えます。 作成したFAQのURLは、「http://example.com/question/質問タイトル」 のようになり、FAQ内で各々にカテゴリやタグの設定が可能。 /question/ 以下をgoogle カスタム検索などで対象にすれば検索機能も付けられますね。 お問い合わせを出来るだけ減らし、無駄なやりとりを防ぐFAQですが、別に用意するのでは
サーバ上で動いてるどのphpが重いか？を調べられる「phptop」:phpspot開発日誌
サーバ上で動いてるどのphpが重いか？を調べられる「PhpTop」。 「サーバ監視に超使える〜topコマンドのまとめ」というエントリで様々なtopコマンドを紹介したのですが、phptopなるものを新たに発見したのでご紹介。 具体的に出来ることは、今サーバで動いているものを指定した期間で、もっともアクセスが多いphp、CPUを多く消費しているphp、メモリを多く使っているphpといったものを降順にソートできるというものです。 サーバ上で多くのphpが動いており、どうも負荷が高いけどどれが重いのかよくわからないという場合に使えます。 top コマンドでは httpd が動いてるぐらいしか分からないので phper な方で負荷にお悩みの方は使ってみるのもよいかも。 たとえば、 $ phptop -t 15 -s mem のように実行すると、15分以内で、メモリを多く使っている順にソートが可能。
Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」:phpspot開発日誌
jGmaps | jQuery Plugins Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」 必要なライブラリを読み込んで、次のようにjgmapsメソッドを呼び出すとGoogleマップによる経路案内の地図と文字による案内情報が出ます。 $('#mapa').jgmaps( { width: 300, height: 300, directions:{ address: ['東京都新宿区', '東京都港区'], usePanel: true, panelId: 'panelDirections' } } ); 次のように、経路が地図に表示されます。 文字による案内情報も表示できます。 会社案内や会場案内なんかもこれで速攻実装できそうですね。 ダウンロードできるサンプルをいじくってみましょう。 地名に日本の場所を漢字で使う場合、文字コードはUTF-
軽量のイメージスライダー実装jQueryプラグイン「Orbit」:phpspot開発日誌
ZURB ? Interaction Design and Design Strategy 軽量のイメージスライダー実装jQueryプラグイン「Orbit」。 わずか2.8KBというサイズでクールな動作をするイメージスライダーの実装が可能です。 実装方法は必要なJS, CSSを読み込んだ後に、<div>の中に<img>タグを並べるだけです。title、altタグにキャプションを設定しておけば下に表示されます。 実装が超簡単かつ軽量ということでいい感じです。 関連エントリ Flickr風のイメージスライダーを作ってみよう JavaScript製の画像スライダー・ギャラリーいろいろ クールに動作するスライダーを実現するJSライブラリ「Start/Stop Slider」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
