『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。
![新着記事](https://cdn-ak-scissors.b.st-hatena.com/image/square/dca2b8b95d0c7cb0e31cbdddd242cc6e299d9a99/height=288;version=1;width=512/http%3A%2F%2Fphotoshopvip.net%2Fwp-content%2Fuploads%2F2011%2F03%2Flatestfont2011feb_march.jpg)
軽快なアニメーションが心地よいナビゲーションを実装するjQueryのチュートリアルを紹介します。 タイトルにある通り、Flashは使わないで実装されてます。 Animated Content Menu with jQuery デモページ [ad#ad-2] まずは、デモページを堪能ください。 ナビゲーションの各ラベルをクリックすると、それに対応したパネルがアニメーションを伴って開くようになっています。 デモページ 実装 HTMLの構造は、背景画像、グリッドのオーバーレイ、ローディングのアイコン、メインメニューの4つから構成されています。 HTML:背景 背景は、背景画像とオーバーレイとローディングをdiv要素で内包します。 <div id="ac_background" class="ac_background"> <img class="ac_bgimage" src="images/D
サムネイル表示のあるフォトギャラリーを作りたい。 そんなときに参考になるのが、『Fresh Sliding Thumbnails Gallery with jQuery and PHP』。jQueryとPHPで作るサムネイルがスライドするギャラリーです。 マウスオーバー状態でカーソルを動かすことで、サムネイルをスライドさせることができます。クリックすると、大きくプレビュー表示されますね。 右上のドロップダウンで、アルバム管理もできるようなので、複数のセットを見せることができます。 デモは以下から。 View demo ソースもダウンロードできるので、一度見てみてください。 Fresh Sliding Thumbnails Gallery with jQuery and PHP iPhone版も作られています。 Awesome Mobile Image Gallery Web App やっと
jQueryを使ってマウスオーバーアクションなど 画像をスライド演出させるライブラリはいくつか紹介してきましたが、 そんなスライド効果をライブラリの様な大きなものを使うのではなく 単純な:animateを使って実現するためのサンプルスクリプト一覧を紹介。 本家サイト(http://www.1stwebdesigner.com/tutorials/sliding-boxes-with-jquery/)は いつの間にか閉鎖(?)してしまい、閲覧不可になっていたので、 前に落としておいたDEMOファイルからご紹介。 まずスライドアニメーションサンプル。 画像にマウスオーバーしてください。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 使用しているスクリプトは以下のような感じに。 ◆SCRIPT $(document).ready(function(){ $('#top-left').hover(f
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く