タグ

JQueryとwebデザインに関するamamakoのブックマーク (2)

  • 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」:phpspot開発日誌

    異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 2011年04月07日- Google image search style image alignment with jQuery Atteeeeention plugin | DreamersLab 異なる幅・高さの画像も超綺麗に並べられるjQueryプラグイン「Atteeeeention plugin」。 <img>でただ単に画像を並べると、幅、高さの違いから、ページがごちゃごちゃしてしまいますが、このプラグインを使うことでGoogle の画像検索のように綺麗にピッチリ並べられます。 普通に並べるとちょっと残念なことに。空白ができちゃいます。 プラグインを使うことで、あら綺麗。となります。 Firefox は 2以上、IEは6以上ということで殆どのブラウザに対応。 まず、必要な

  • Headroom.js - UI/UX向上。上にスクロールすると表示されるヘッダーバー MOONGIFT

    ヘッダーによって表示領域が狭まってしまうのを嫌う方にお勧めです。 最近のWebデザインではヘッダー部分を画面上部に常に表示するのが一般的になってきています。いつでもヘッダーにアクセスできて便利な反面、そのために表示領域が限られてしまうという点においてちょっとした不便さを感じます。 そこでiPhoneにおいては最近はヘッダーやフッターを普段は隠しておいて、上にスクロールしようとしたタイミングで表示させるというスタイルを導入しています。同様の仕組みをWebブラウザでも実現するのがHeadroom.jsです。 実際に使ってみます。まずはトップを表示した瞬間は以下のように表示されます。 表示直後。 このままスクロールするとヘッダーは自然と上に流れていきます。 そして上にスクロールするとヘッダーがするするっと出てきます。 画像だと分かりづらいと思うので動画でご覧ください。 使い方は幾つかあり、単独は

    Headroom.js - UI/UX向上。上にスクロールすると表示されるヘッダーバー MOONGIFT
  • 1