. JQueryとCSSで驚きのページめくり効果を作るサンプル: phpspot開発日誌
JQueryとCSSで驚きのページめくり効果を作るサンプル: phpspot開発日誌
JQueryとCSSで驚きのページめくり効果を作るサンプル: phpspot開発日誌

Без кейворда

$("#pageflip").hover(function() < //On hover. $("#pageflip img , .msg_block").stop() .animate( < //Animate and expand the image and the msg_block (Width + height) width: '307px', height: '319px' >, 500); > , function() < $("#pageflip img").stop() //On hover out, go back to original size 50x52 .animate( < width: '50px', height: '52px' >, 220); $(".msg_block").stop() //On hover out, go back to original size 50x50 .animate( < width: '50px', height: '50px' >, 200); //Note this one retracts a bit faster (to prevent glitching in IE) >);

どうやってやってるの?というところが不思議だったのですが、以下のような透過PNGを用意しておいて、width, height をアニメーションさせているだけ。

  • ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集
  • jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法
  • jQueryを使ったFlashばりにクールなギャラリー「GalleryView」
スポンサード リンク

By.KJ : 2009年05月13日 10:02

TOPICS OF THIS BLOG Advertisements SITE PROFILE 最新のブログ記事(新着順)
  • 8KBで完結するモダンUIライブラリ「Oat 」
  • Web開発者が知っておくべき画面サイズ確認ツール「WhatIsMyScreenSize.com」
  • Webデザイン分析を一瞬で終わらせるChrome拡張「MiroMiro」
  • プログラミングで使う記号を美しく整列させることに特化したフォント「Myna」
  • DarkもLightも自動生成:UI向けカラーパレット生成ツール「Harmonizer」紹介
  • AIでフォーム生成できる「Formcn AI」
  • ウェブサイトの CSS を解析してくれる「Online CSS Code Quality Analyzer」
  • 英文を文鳥に変換するフォント「ぎゅうぎゅう文鳥」
  • Tiktok公式のフリーフォント「TikTok Sans」
  • React+Tailwindなサイトで使えるUIライブラリ「SmoothUI」
  • 過去のエントリ
📎📎📎📎📎📎📎📎📎📎