[JS]指定した要素を抽出して、自動でページ内アンカーのナビゲーションを設置するスクリプト -MagicNav.js
ナビゲーションを抽出 ページ内の移動は、アニメーションを伴ってスクロールします。 MagicNav.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="magicnav.js"></script> Step 2: HTML デモではdl要素でFAQが実装されています。 dl, ulなどに限らず、hxの見出しなどでも構いません。 <h3>FAQ</h3> <dl> <div id="commercial" title="commercial"><dt><strong>よくある質問</strong></dt> <dd><p>回答</p></dd
フローティングメニューの使い方（スクロールするメニュー）｜クロノドライブ
今回は、ブラウザのスクロールに合わせてするする付いてくるフローティングメニューのご紹介です。 あまり使う機会はありませんが、覚えておくといざというときに便利です。 それでは早速使い方のご紹介 必要なデータを揃える まずは、JQUERY SCROLL FOLLOWから下記ファイルをダウンロードしましょう。 ここではファイル名を下記の通り保存しました。 jquery.js jquery-ui.js jquery.easing.js jquery.scrollfollow.js ディレクトリはこのようになりました（ jsフォルダの中にダウンロードした jsファイルがすべて入っています）。 HTMLからjsデータを読み込む フローティングメニューを使用するHTMLファイルから先ほどダウンロードした jsファイルを読み込みます。 {path}の部分はHTMLファイルからのパスにしてください。
斜めグリッドを使ったデザインのウェブサイト集
ここ最近のことなのですが、綺麗なデザインのサイト集なんかを見て回っていると何度か斜めグリッドを基準にしたデザインのサイトを見かけました。 こういうの何て言うんでしょうね。斜めグリッドなのでDiagonal Grid Based Webdesignとでも言えばいいんでしょうか。 どのサイトも非常にインパクトが強く印象的だったので、数は少ないですが紹介してみようと思います。 Jessica CaldwellJessica Caldwell ポーランドのウェブ制作者さんのポートフォリオ。 各ブロックはli要素をtransform: rotate()して作られています。 ブロックは一つ一つがナビゲーションで、マウスを乗せるとアニメーションでメニューが表示されます。 Designer GlebDesigner Gleb / Graphic&Web Designer Gleb Leksikov フリー
タブやスクロール、ツールチップなど、Webサイトで良く見かける機能を1つのファイルで実装可能にする国産jQueryプラグイン・Laquu.JS
たまたま見かけて便利そうだったので シェア。良く使われるドロップダウン メニューやページスクロール、タブや ツールチップなどを1つのjsファイルで 実装可能にする国産のjQueryプラグイン です。制作が楽になるのでLaquu、と いう名みたいです。 国産のプラグインなのでドキュメントも日本語です。英語が苦手な方でも手軽に使えるのではないかなと。また、無駄な装飾も無いので既存サイトに落とし込んだり、シンプルなフレームワークとしても良いかもしれません。 以前ご紹介したsimplelibと同様にパッケージ化されているので選択肢が増えた印象です。 シンプルで装飾も自由に出来るのでなかなか汎用的ではないかなと思います。ライセンスもMITなのはありがたいですね。 備わっている機能 機能はこんな感じ。どれも良く探している機能じゃないかなと思いますが、これらの機能を1つのjsファイルで使うことが出来る、
jQueryでWebサイト内を無限にスクロール出来るようにする
ちょっと語弊があるかもですけど、無限に スクロール出来るように見せる、みたいな 方法です。これが何の役に立つんですか とか言われると困っちゃうんですけど・・・ こういうのがあってもいいかなと思ったの でちょっと作ってみました。実装にはjQuery を使います。 土曜日なのでちょっとネタ的な話題です。 数日前に「スクロールに応じて要素がアニメーションする、視差効果（パララックス）を取り入れたWebデザイン例とTipsいろいろ」っていう記事を書いたんですが、この中に App Galaxy by Googleっていうサイトとunfoldっていうサイトがありまして、ここが無限に縦スクロールできるようになってます。 これを実装しよう、という誰得な話です。 Sample 以下サンプルです。 Sample コード$(function(){ $("body").height($(window).heigh
独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」:phpspot開発日誌
jScrollbar : make your own scrollbar for scrolling contents with jQuery UI - MyjQueryPlugins 独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」 綺麗にデザインされたバーもブラウザ依存のスクロールバーで台無しになってしまったり、OSによってデザインに違いが出てしまったりとあまりよいことはないですね。 かといってデザインを崩したくない場合なんかで、スクロールさせないわけにもいけないような時に使えそうなプラグインです。 以下のような自由なデザインのスクロールバーが作れます。画像を切り替えることで簡単に独自デザインにも出来ます。 で、独自デザインにしつつも、ちゃんとマウルホイールにも対応しています。 Twitterの新UIなんかでもスクロールバーが独自になっていたり
複数のコンテンツを効率的に管理し、有用にする6つのデザインパターン
コンテンツを効率的に表示し、ユーザーエクスペリエンスを強化する、人気の高いデザインパターンを紹介します。 6 Popular Content Presentation Design Patterns [ad#ad-2] 下記は各ポイントを意訳したものです。 1. 価格表 2. 記事リスト 3. サムネイル画像 4. カルーセル・スライドショー 5. 水平スクロール 6. 無限スクロール 1. 価格表 価格表はサービスやプロダクトの価格を一覧できるようにしたものです。 ユーザーに基本的な機能と価格を比較させ、決断へと誘う効果があります。また、価格表自体にサインアップボタンを配置するのも効果的です。 LightCMS 2. 記事リスト 記事リストはニュースサイトやブログなどに多く見られ、よくできた記事リストにはタイトルだけでなく、記事の始まりや概略などを添えて表示します。これはユーザーにとって
ウェブサイトを台無しにする、10点の致命的なミス / ウェブデザインライブラリー
Home ＞ ウェブデザイン基礎講座 ＞ ウェブサイトを台無しにする、10点の致命的なミス ウェブサイトを台無しにする、10点の致命的なミス 投稿日：2011年1月11日 レベル：− ソフトウェア：− このチュートリアルでは、ウェブサイトを台無しにする、10点の致命的なミスをご紹介します。 Step1 ： はじめに Step2 ： 値段表がない Step3 ： 検索ツールが使いづらい Step4 ： 横スクロールを必要とする Step5 ： フォントサイズを変更できない Step6 ： テキストばかりである Step7 ： リンクにJavaScriptを使用している Step8 ： FAQ内に、あまり聞かれない質問がある Step9 ： プライバシーポリシーを掲載せずに、メールアドレスを集める Step10 ： URLが長すぎる Step11 ： 予期しない場所にMailtoのリ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
