タグ

2013年5月9日のブックマーク (3件)

  • トップに戻るボタンをjQueryでニュルッと改造する

    これまで設置してた「トップに戻る」ボタンの難点 ブログやサイトなどで、ページの右下だったり左下だったりに「トップに戻る」「PAGE TOP」などといったボタンが設置されているのをよく見かけますよね。 当ブログでも開設当初から設置してました。 ▲ 当ブログに以前設置してた「ページ先頭へ」ボタン。クリックするとページの先頭に移動する機能です。ボタン位置はCSSで固定させているのでスクロールしても一定の場所から動きません。 これはこれで最初は満足してました。しかし途中で「あること」に気付いた、というか再認識しました。 たとえば当ブログのトップページを表示した時、 ▲ URLのお尻に「#header」という文字が追加されてしまいます。 これはHTMLの仕様で、ボタンをクリックすると「id=”header”」と書かれてる位置に移動しろ、という命令を処理。最新の表示位置(=つまりheaderの位置)を

    トップに戻るボタンをjQueryでニュルッと改造する
  • 最近よくみる定番の動きは、だいたいこれで対応できるjqueryライブラリ | バニデザノート

    ウェブデザインのなかで、 jqueryをつかった、さりげない「動き」をウェブサイト上で導入するのが 定番になりつつありますね。 ふわっと、ポップアップみたいに浮き上がってくるウインドウ、 画像やテキストのスライドなど 最近良く見るjqueryでつくる「動き」で、おすすめのライブラリをまとめてみます。 要素をスライドさせるならJquery.cycle.plugin 画像や、テキストなど、 非常にシンプルなhtmlソースを認識して対応してくれるプラグイン。 上から落ちてきたり、横にスライドしたり、フェードイン・フェードアウトしたり スライド番号をつけたり、スライド領域の要素の右左に矢印をつけたりもできます。 シンプルなdemo Even More Demosもオススメです。 オプション一覧はこちら → jquery.cycle.plugin ページ内ポップアップ、lightbox風表現ならfa

    最近よくみる定番の動きは、だいたいこれで対応できるjqueryライブラリ | バニデザノート
  • 簡単に実装できる、ボタン画像のマウスオーバーイベント 10+ - NxWorld

    画像のオンオフ切り替えといったようなマウスオーバーイベントで、簡単に実装できるものをいくつか紹介します。 CSS3やjQueryを使ってちょっと変わった動きを取り入れるサイトも見かけることも多くなりましたが、今回は普段も使用頻度が高いと思う定番のものに絞りました。 サンプルで使用する画像とDEMOについて 各マウスオーバーの動きを実装するにあたって上のような3タイプのボタン画像を用いており、各ボタンはそれぞれ以下のようになっています。 type A 単体のボタン画像 type B オンとオフを1枚の画像にした、スプライト型 type C オンとオフをそれぞれ別の画像にし、オフ時のものは_off、オン時のものは_onを拡張子前に入れています。 また、サンプルも用意したので実際の動きはこちらで確認して下さい。 CSS:マウスオーバー時に透過させる CSSのopacity(IEはfilter)の

    簡単に実装できる、ボタン画像のマウスオーバーイベント 10+ - NxWorld