実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 - (ﾟ∀ﾟ)o彡 sasata299's blog
2013年05月08日18:21 JavaScript 実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 さて、先日簡単なチュートリアル作ろうと思ったんですが、どうやるのが良いのかなーと思って悩んでました。キャプチャ取ってそこに説明文を書いて…ってしてもいいんですけど、キャプチャだと一部分なのでサイト上のどの辺なのかわかりにくかったり、サイト側は変更したのにキャプチャが古いままとかになったりしちゃいますよね＞＜ とか思って探してみたらこちらの Intro.js が便利だったので紹介してみます。 さて、この Intro.js を使うとですね、サイト上で動作するチュートリアルを簡単に作れるんですよ。使い方も簡単で、動作させたい要素に対して data-intro (表示する説明文) と data-step (チュートリアルの何番目に表示するか) を指定します。チ
前後に移動する際にサムネイルがポップアップされるスライダー実装jQueryプラグイン「PhotoCradle.js」:phpspot開発日誌
前後に移動する際にサムネイルがポップアップされるスライダー実装jQueryプラグイン「PhotoCradle.js」 2013年05月02日- PhotoCradle.js. An elegant wrap of your photo collection. 前後に移動する際にサムネイルがポップアップされるスライダー実装jQueryプラグイン「PhotoCradle.js」。 次へ、前へでどんな画像が表示されるのか気になりますが、予めポップアップで表示してくれる親切なスライダーを実装できます。 更に、画像下に表示されているサムネイルにカーソルを合わせると、他の前後の画像がうっすら表示されます。 何度もボタンを押して切り替えるよりもカーソルを合わせるとより多くの画像が一覧できるというのはなかなか便利そう 関連エントリ マスクを使ったお洒落なスライダーが作れるjQueryプラグイン「Maski
親ボックス要素内に複数の要素を縮小して格納できる「VerticalShift」:phpspot開発日誌
VerticalShift jQuery Plugin 親ボックス要素内に複数の要素を縮小して格納できる「VerticalShift」 １つのdiv内に沢山のエレメントが格納されている場合もこのプラグインで初期化すると、幅を狭め、親エレメント内におさめてくれます ただ小さくするだけでなく、マウスオーバーで対象エレメントが拡大されます 本棚のようなインタフェースを実現する際に使えるかもしれませんね 関連エントリ 画像のレイアウトに使えるjQueryプラグイン「jQuery Photoset Grid」 テキストを新聞風のレイアウトにできるjQueryプラグイン「Columnizer」 アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 画像レイアウト関連で便利なjQueryプラグイン等まとめ
オーバーレイするグリッドの超クールなデモ:phpspot開発日誌
App Showcase with Grid Overlay オーバーレイするグリッドの超クールなデモ。 はじめてこういうのは見た気がしますが、なかなかクールなのでデモだけでも見ておくとよさそう。 見せ方として面白いデモになっていて、ソースも公開されているので応用してみると面白い物ができそう 有り物や流行りを使うだけではなく、こういう物を自分で考えて作れるデザイナーというのは価値が高そうですね 関連エントリ 垂直アイコンメニュー実装デモ＆サンプルプログラム「Vertical Icon Menu」 ブラウザ上でまるで美術館。3Dイメージギャラリーデモ PayPalの読込中アイコンをCSSで実現したデモ フルスクリーンでページめくりをするUI実装デモ レスポンシブ＆タッチフレンドリなWEBベースの音楽プレイヤー実装デモ これは新しい!パネルレイアウトが美しいスライドショー実装デモ 既にここまで
商品・おトク情報｜ローソン公式サイト
ポイントカード一覧 ポイントをためる お買上げポイント ボーナスポイント ポイントをつかう お試し引換券 特典コース 環境社会貢献コース JALマイルと交換 Pontaカードについて Pontaカードとは ローソンPontaカード入会 Ponta提携企業（Ponta.jpへ） dポイントカードについて dポイントカードとは（dpoint.docomo.ne.jpへ） dポイントカード入会 便利なサービス ポイント照会（ローソンIDログイン） ローソンモバイルPonta ローソン公式スマートフォンアプリ おさいふPonta おさいふPontaについて サービス一覧 銀行・金融サービス ローソンATM デビットカード ATM・保険の情報はこちら！ 支払い 利用できるお支払方法 レジチャージ 収納代行 Ticket Restaurant®（チケットレストラン） Apple Pay 郵便・宅配 デ
数値だけでなく、日付や時刻にも対応したスライダー・jQRangeSlider
D&Dで操作するスライダーを実装するjQuery依存のスクリプトです。数値のものが多いですが、こちらは日付や時刻などにも対応しています。使うシーンは多くは無いかもですけど、便利そうです。 日付にも対応のスライダーです。※ピッカーではありません
ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」:phpspot開発日誌
ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」 2012年11月22日- Responsive Img - a jQuery Plugin for Responsive Images ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」 単に画像をリサイズするだけではなくsrcも置き換えてくれるそう。 PC版を単に縮小するのではなくて、スマホでは別の画像を使う、といった場合にも使えそうですね ブラウザサイズに応じて別の画像に切り替えて最適化したいという場合はそれなりにあると思うので、覚えておいてもよさそうですね 関連エントリ WEBデザインする人なら入れておきたいレスポンシブWEBサイト作成に役立つブックマークレット「Viewport Resizer」 レスポンシブ
お口の恋人 ロッテ
お口の恋人ロッテのホームページです。話題のTVCMや商品紹介（キシリトール、フィッツ、ガーナミルク、コアラのマーチ）、キャンペーンの告知など。
DOM要素をターミナル風の入力エレメントにしてくれる「cssConsole」:phpspot開発日誌
cssConsole DOM要素をターミナル風の入力エレメントにしてくれる「cssConsole」 divエレメントをプラグインで追加される、.cssConsoleで初期化。 次のようなインタフェースに変換され、入力ボックスに変化します。 inputの代用としても使えそうですが、サーバコマンドを載せる場合なんかで、ちょっと変更してコピーする的な用途に使えそうです。 関連エントリ ターミナルに文字を打ってるアニメーションエフェクトが作れるjQueryプラグイン「Typist」 コーディングもブラウザ上でできるオープンソースソフトウェア「Codiad」 クリックで水滴を落としたようにアニメーションさせられるｊQueryプラグイン「jQuery.twinkle」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flight Tracker - Live Flight Tracking - Plane Finder