Magic CSS3 animations by miniMAC - minimamente
Come sapete, amo molto il linguaggio CSS ed in particolare mi piace sempre andare oltre, in questo caso ho voluto creare un pacchetto di animazioni in CSS3 che potrete usare liberamente per i vostri scopi e quindi nei vostri progetti web, si chiama Magic! Il progetto è hostato anche su GitHub, questo per avere i migliori pareri dai migliori sviluppatori e quindi migliorare il codice, renderlo il p
[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]変更時ã®ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ãŒæ°—æŒã¡ã„ã„ã€ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–対応ã®ã‹ã£ã“ã„ã„グリッドを生æˆã™ã‚‹ã‚¹ã‚¯ãƒªãƒ—ト -Grid—A—Licious
Masonryã¯ã‹ã£ã“ã„ã„ã‘ã©ãƒ‘ãƒãƒ«ç§»å‹•ã®ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ãŒã¡ã‚‡ã£ã¨ãªã€ã¨ã„ã†äººã«ã´ã£ãŸã‚Šãªã€ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–対応ã§ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆå¤‰æ›´æ™‚ã®ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã‚‚スムーズã§ã‹ã£ã“ã„ã„グリッドを生æˆã™ã‚‹jQueryã®ãƒ—ラグインを紹介ã—ã¾ã™ã€‚ Grid—A—Licious Grid—A—Licious -GitHub Grid—A—Liciousã®ãƒ‡ãƒ¢ Grid—A—Liciousã®ä½¿ã„æ–¹ Grid—A—Liciousã®å®Ÿè£…例 Grid—A—Liciousã®ãƒ‡ãƒ¢ ã¾ãšã¯ã€Grid—A—Liciousã®ãƒ™ãƒ¼ã‚·ãƒƒã‚¯ãªå‹•ä½œãŒç¢ºèªã§ãるデモã‹ã‚‰ã”紹介。 アレンジã¯ã€ä¸‹è¨˜ã®Grid—A—Liciousã®å®Ÿè£…例ã§ã€‚ ページã„ã£ã±ã„ã«é«˜ã•ã®ç•°ãªã‚‹ãƒ‘ãƒãƒ«ãŒåŒã˜é–“éš”ã§é…ç½®ã•ã‚Œã¦ã„ã¾ã™ã€‚ デモページ：スマフォサイズ Grid—A—Liciousã®ä½¿ã„æ–¹ Grid—A—Liciousã¯2008å¹´ã«ãƒªãƒªãƒ¼ã‚¹ã•ã‚ŒãŸå½“時ã¯å˜ã«ã‚°ãƒªãƒƒãƒ‰çŠ¶ã«
今日ã‹ã‚‰CSS3アニメーションを使ãˆã‚‹ã‚ˆã†ã«ãªã‚‹ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«
CSS3ã®ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã£ã¦ã‚¹ã‚´ã„ï¼ å…ˆæ—¥ã®ã½ã‚“ãŸãã‚“ã®è¨˜äº‹ã§ã‚‚紹介ã•ã‚ŒãŸã‚ˆã†ã«ã€CSS3ã§ã¯ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã‚‚制御ã§ãるよã†ã«ãªã‚Šã¾ã—ãŸã€‚ ã¨ã„ã†ã“ã¨ã§ã€ã¼ãã‚‚CSS3ã®ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã‚’使ã£ã¦demoã‚’ã„ãã¤ã‹ä½œã£ã¦ã¿ã¾ã—ãŸã€‚ Safariã‚„Chromeãªã©webkitブラウザã§è¡¨ç¤ºã—ã¦ã¿ã¦ãã ã•ã„。 コピペã§ä½¿ãˆã‚‹CSS3アニメーション - jsdo.it ※PLAYボタンをクリックã™ã‚‹ã¨è¡¨ç¤ºã•ã‚Œã¾ã™ã‚ˆ 見れãªã„人ã®ãŸã‚ã«å‹•ç”»ã‚‚æ’®ã£ã¦ã¿ã¾ã—ãŸã€‚ ã©ã†ã§ã™ã‹ï¼ŸCSSã ã‘ã§ã€ã¾ã‚‹ã§Flashを使ã£ã¦ã‚‹ã‚ˆã†ãªè¡¨ç¾ãŒã§ãã¡ã‚ƒã†ã‚“ã§ã™ã€‚ 今回ã¯ã“ã®CSSã®ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã®ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«ã‚’ã”紹介ã—ã¾ã™ã€‚ 「NEW!ã€ã¨ã„ã†ã‚¢ã‚¤ã‚³ãƒ³ãŒã€1æ–‡å—ã”ã¨ã«ã´ã‚‡ã“ã‚“ã´ã‚‡ã“ã‚“è·³ãるアニメーションを作ã£ã¦ã¿ã¾ã—ょã†ã€‚ 上記ã®demoã§ã„ã†ã¨äºŒã¤ç›®ã®å‹•ãã§ã™ã€‚ HTML <p class="animetionNewÂ
jQueryã®animateã§èƒŒæ™¯è‰²ã‚„æ–‡å—色ã®å¤‰åŒ–ã‚’ã§ãるよã†ã«ã™ã‚‹ãƒ—ラグイン『Color Animationsã€
ã¯ã£ï¼ï¼Ÿå†…容ã¨ãƒªãƒ¼ãƒ‰æ–‡ãŒã‚ã£ã¦ãªã„ï¼ï¼Ÿ ã£ã¦ã“ã¨ã§ã„ã¤ã®ã¾ã«ã‚„ら修æ£ã—ã¦ãŠã。 背景色ã¨ã‹æ–‡å—色ã¨ã‹ã€è‰²é–¢ä¿‚をアニメーションã•ã›ã‚ˆã†ã¨æ€ã£ã¦ã‚‚〠ã©ã†ã‚„らjQueryå˜ä½“ã§ã¯ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã§ããªã„。 ãªãœï¼ï¼Ÿ ã¨ã¾ãã€èƒŒæ™¯ã¨ã‹è‰²é–¢ä¿‚をアニメーションã§ä½¿ã„ãŸã„ãªã¨æ€ã£ãŸã®ã§ã€ 色関係を扱ãˆã‚‹ã‚ˆã†ã«ã™ã‚‹ãƒ—ラグインを見ã¤ã‘ãŸã®ã§ã€ãƒ¡ãƒ¢ã‚¨ãƒ³ãƒˆãƒªãƒ¼ã—ã¦ãŠã。 jQueryã ã‘ã ã¨èƒŒæ™¯è‰²ã¨æ–‡å—色ã¯ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã§ããªã„ jQueryå˜ä½“ã ã‘ã ã¨ã€èƒŒæ™¯è‰²ã‚„æ–‡å—色ã®ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ãŒã§ããªã„ã®ã§ã™ã€‚ ç†ç”±ã¯ä¸‹è¨˜ã®é€šã‚Šã®ã‚ˆã†ã§ã™ã€‚ 数値型ã®å€¤ã‚’ã¨ã‚‰ãªã„属性（backgroundColorãªã©ï¼‰ã«ã¯ã€animate関数ã¯å¯¾å¿œã—ã¦ã„ã¾ã›ã‚“。 animate - jQuery 1.2.6 日本語リファレンス ã¤ã¾ã‚Šã€ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã•ã›ã‚‹ã«ã¯å¤‰åŒ–ã•ã›ã‚‹ãŸã‚ã®æ•°å€¤ãŒå¿…è¦ã€‚ ã¨ã“ã‚ãŒè‰²ã®å€¤ãªã©ã¯ãƒ‡ãƒ•ã‚©ãƒ«ãƒˆã®çŠ¶æ…‹ã§ã¯æ•°å€¤åŒ–
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}