[CSS]コピペã§OKï¼ç”»åƒã®ãƒ›ãƒãƒ¼æ™‚用ã®ã‹ã£ã“ã„ã„æ–°ã—ã„エフェクトã®ã¾ã¨ã‚
HTML å„デモã®ãƒ™ãƒ¼ã‚¹ã¨ãªã‚‹HTMLã§ã™ã€‚ divè¦ç´ ã®classを変更ã—ã¦åˆ©ç”¨ã—ã¾ã™ã€‚ <div class="pic"> <img src="image.jpg"> </div> å„デモã§å…±é€šã§ä½¿ç”¨ã™ã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã§ã™ã€‚ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #333; } .pic { border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111
[JS]ç”»åƒã‚’ホãƒãƒ¼æ™‚ã«ã•ã¾ã–ã¾ãªã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã§ç›®ç«‹ãŸã›ã‚‹ã‚¹ã‚¯ãƒªãƒ—ト -Adipoli
シンプルãªã‚‚ã®ã‹ã‚‰ã¡ã‚‡ã£ã¨é¢ç™½ã„ã‚‚ã®ã¾ã§ã€20種類以上ã®ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã®ã‚¨ãƒ•ã‚§ã‚¯ãƒˆã‚’å‚™ãˆãŸç”»åƒã‚’目立ãŸã›ã‚‹jQueryã®ãƒ—ラグインを紹介ã—ã¾ã™ã€‚ デモ 用æ„ã•ã‚Œã¦ã„るエフェクトã¯20種類以上ã§ã€ãƒ›ãƒãƒ¼æ™‚ã®ã‚¨ãƒ•ã‚§ã‚¯ãƒˆã¯ä¸‹è¨˜ã®ã‚‚ã®ãŒæƒã£ã¦ã„ã¾ã™ã€‚ normal popout sliceDown sliceDownLeft sliceUp sliceUpLeft sliceUpRandom sliceUpDown sliceUpDownLeft fold foldLeft boxRandom boxRain boxRainReverse boxRainGrow boxRainGrowReverse ç”»åƒã®ãƒ‡ãƒ•ã‚©ãƒ«ãƒˆæ™‚ã®ã‚¨ãƒ•ã‚§ã‚¯ãƒˆï¼ˆã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤ãƒ»åŠé€æ˜Žï¼‰ã‚‚用æ„ã•ã‚Œã¦ãŠã‚Šã€çµ„ã¿åˆã‚ã›ã¦åˆ©ç”¨ã§ãã¾ã™ã€‚ [ad#ad-2] 以下ã€ãƒ‡ãƒ¢ãƒšãƒ¼ã‚¸ã®ã‚¨ãƒ•ã‚§ã‚¯ãƒˆã‚’紹介ã—ã¾ã™ã€‚
jQueryã§ãƒšãƒ¼ã‚¸ã‚ãりエフェクトã„ã‚ã„ã‚ - 転è·ãŒå¤šã„KRYPTOã•ã‚“ã®ãƒ–ãƒã‚°
2012å¹´08月08æ—¥ 10:21 カテゴリコーディング jQueryã§ãƒšãƒ¼ã‚¸ã‚ãりエフェクトã„ã‚ã„ã‚ Posted by hammerkobe No Comments Tweet ã“ã®æ•°å¹´ã§jQueryãŒæ™®åŠã—ãŸãŠã‹ã’ã§ã€ã‚®ãƒ£ãƒ©ãƒªãƒ¼ç”»åƒã®ãƒšãƒ¼ã‚¸ã‚ãã‚Šã®ã‚ˆã†ãªã‚¨ãƒ•ã‚§ã‚¯ãƒˆã¯ã‚‚ã†Flashã«é ¼ã‚‰ãšjQueryã§è§£æ±ºã™ã‚‹ã‚ˆã†ã«ãªã£ã¦ãã¾ã—ãŸã€‚jQueryãªã‚‰Flashã«æ¯”ã¹ã‚‹ã¨å†™çœŸã®å…¥ã‚Œæ›¿ãˆã‚‚ç°¡å˜ã«å‡ºæ¥ã‚‹ã®ã§ã€ç©æ¥µçš„ã«åˆ©ç”¨ã—ã¦ã„ããŸã„ã§ã™ã。 ページã‚ãりを実装ã™ã‚‹jQueryプラグイン「jPageFlipper ã€-JavaScript Library Archive [screenshot url="javascript.webcreativepark.net/library/jpageflipper"] Flip!a jquery plugin - jQueryを使ã£ãŸãƒ•ãƒªãƒƒãƒ—ã‚’ã‚ãるよã†
1
ランã‚ング
ランã‚ング
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
処ç†ã‚’実行ä¸ã§ã™
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}