Web制作ã«ä½¿ãˆã‚‹ï¼ã‚ªã‚·ãƒ£ãƒ¬ãªã‚µã‚¤ãƒˆã«è¦‹ã›ã‚‹ãŸã‚ã®CSSã‚„jQueryプラグインã¾ã¨ã‚作æˆï¼š2015/03/2 更新：2016/06/29 Web制作 > 今風ã®ã‚µã‚¤ãƒˆã®å‹•ãやエフェクトを実ç¾ã™ã‚‹ãŸã‚ã«çŸ¥ã£ã¦ãŠãã¨åŠ©ã‹ã‚‹jQueryプラグインをã¾ã¨ã‚ã¾ã—ãŸã€‚トレンドをãŠã•ãˆãŸæœ€è¿‘ã®ã‚‚ã®ã‚„定番化ã—ã¦ã„ã‚‹ã‚‚ã®ã¾ã§ã€‚ã¡ã‚‡ã£ã¨ã—ãŸå‹•ãã‚’å–り入れã¦ã‚ªã‚·ãƒ£ãƒ¬ãªã‚µã‚¤ãƒˆã‚’構築ã—ãŸã„時ã«ã€‚ ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢é€Ÿå ±ã¯ Twitter ã®@commteã§é…ä¿¡ã—ã¦ã„ã¾ã™ã€‚ ã‚‚ã㘠インタラクティブ １．クリック時ã®ã‚¨ãƒ•ã‚§ã‚¯ãƒˆ ２．フォームクリック時ã®ã‚¨ãƒ•ã‚§ã‚¯ãƒˆ ３．テã‚ストã«ï¼‘１種ã®å‹•ãを出ã™ã‚¨ãƒ•ã‚§ã‚¯ãƒˆ ４．分離ã™ã‚‹ã‚¨ãƒ•ã‚§ã‚¯ãƒˆ フルスクリーンã®è¦‹æ „ãˆã‚’よãã™ã‚‹ ５．フルスクリーン 縦スライド３㤠６．全画é¢+オーãƒãƒ¼ãƒ¬ã‚¤ ７．フルスクリーン背景＋ãƒãƒ¼ãƒ‡ã‚£ãƒ³ã‚° ８．写真ã‹ã‚‰èƒŒæ™¯è‰²ã‚’抽出 ９．background-size å¯¾ç– ãƒ‰ãƒãƒ¯ãƒ¼ãƒ¡ãƒ‹ãƒ¥ãƒ¼ １ï¼ï¼Žãƒ‰ãƒãƒ¯ãƒ¼ãƒ¡ãƒ‹ãƒ¥ãƒ¼ï¼“㤠スクãƒãƒ¼ãƒ«ã‚¨ãƒ•ã‚§ã‚¯ãƒˆ １１．スクãƒ
第1回　プラグインを見ã¤ã‘よㆠ| gihyo.jp
ãŠã—ゃれãªãƒãƒ¼ãƒ‡ã‚£ãƒ³ã‚°ã‚¢ãƒ‹ãƒ¡ã§ã‚¤ãƒ©ã‚¤ãƒ©è§£æ¶ˆ fakeLoader.js
[JS]jQueryを使ã£ã¦ã€è¶…スムーズãªCSS3アニメーションを実装ã™ã‚‹ -jQuery Transit
webサイトã®å‹•ãã‚’é…力的ã«æ¼”出ã™ã‚‹ フリーjQueryプラグイン集「Free jQuery Plugins To Create An Amazing Websiteã€
jQueryプラグイン「pjaxã€ã§ã‚¹ãƒ ーズã«ãƒšãƒ¼ã‚¸é·ç§»ã™ã‚‹ã‚µã‚¤ãƒˆã®ä½œã‚Šæ–¹ | Neganin(ãƒã‚¬ãƒ‹ãƒ³)
綺麗ãªå‹•ãã«ãªã£ãŸï¼Web制作å‰ã«è¦‹ã¦ãŠããŸã„jQueryプラグインã¾ã¨ã‚
今風ã«ãªã£ãŸï¼Web制作ã§ä½¿ãˆã‚‹æœ€è¿‘ã®jQueryプラグインã¾ã¨ã‚
[JS]Lightboxã®é€²åŒ–å½¢ï¼æ“作性ãŒå¿«é©ã§ãƒ•ãƒ©ãƒƒãƒˆãªãƒ‡ã‚¶ã‚¤ãƒ³ã«ã‚‚ã´ã£ãŸã‚Šãªãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–対応ã®ã‚¹ã‚¯ãƒªãƒ—ト -Strip![[JS]Lightboxã®é€²åŒ–å½¢ï¼æ“作性ãŒå¿«é©ã§ãƒ•ãƒ©ãƒƒãƒˆãªãƒ‡ã‚¶ã‚¤ãƒ³ã«ã‚‚ã´ã£ãŸã‚Šãªãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–対応ã®ã‚¹ã‚¯ãƒªãƒ—ト -Strip](https://cdn-ak-scissors.b.st-hatena.com/image/square/b4b391a890221ac5696699ef145a5921c27e5824/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014100601-01.png)
[JS]ç°¡å˜ãªè¨˜è¿°ã§ã€è»½å¿«ã§æ»‘らã‹ãªã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ãŒå®Ÿè£…ã§ãるスクリプト -JSTween
Web制作ã§ä½¿ãˆãŸï¼jQueryプラグインã¾ã¨ã‚＋起æ¥ã—ã¾ã—ãŸ
[JS]ページを表示ã™ã‚‹æ™‚ã«ã‹ã£ã“ã„ã„ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã‚’åŠ ãˆã‚‹ã‚¹ã‚¯ãƒªãƒ—ト（WordPressã«ã‚‚対応） -Animsition![[JS]ページを表示ã™ã‚‹æ™‚ã«ã‹ã£ã“ã„ã„ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã‚’åŠ ãˆã‚‹ã‚¹ã‚¯ãƒªãƒ—ト（WordPressã«ã‚‚対応） -Animsition](https://cdn-ak-scissors.b.st-hatena.com/image/square/9777d3ddb94171e6f761197ff33a27f86a16ce31/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082901.png)
[JS]ç”»åƒã‚’æ¹–é¢ã«ã‚†ã‚‰ã‚†ã‚‰ã¨æ˜ ã—出ã™ç™’ã—系スクリプト -lake.js
[JS]サイドãƒãƒ¼ã‚’å·¦å³ã‹ã‚‰ã‚¹ãƒ©ã‚¤ãƒ‰ã•ã›ã‚‹ã”ãシンプルãªã‚¹ã‚¯ãƒªãƒ—ト -Simple Sidebar![[JS]サイドãƒãƒ¼ã‚’å·¦å³ã‹ã‚‰ã‚¹ãƒ©ã‚¤ãƒ‰ã•ã›ã‚‹ã”ãシンプルãªã‚¹ã‚¯ãƒªãƒ—ト -Simple Sidebar](https://cdn-ak-scissors.b.st-hatena.com/image/square/c459cc2f4db5b1da3c75aa960dd4238b0628cb55/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014081901-01.png)
ç§ãŒã‚ˆã使ã£ã¦ã„ã‚‹jQueryプラグインã¾ã¨ã‚（スライダーã€ãƒ¢ãƒ¼ãƒ€ãƒ«ã‚¦ã‚£ãƒ³ãƒ‰ã‚¦ãªã©ï¼‰
SVGアニメを手軽ã«ä½œã‚Œã‚‹Lazy Line Painter｜ã“ã†ã‚ã®â€œã“ã‚Œã‹ã‚‰ä½¿ãˆã‚‹â€jQueryプラグイン
[JS]HTMLã¯æ±šã•ãšã«ã€ãƒ†ã‚ストã«ã¡ã‚‡ã£ã¨é¢ç™½ã„ã•ã¾ã–ã¾ãªã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã‚’é©ç”¨ã§ãるスクリプト -LetterFX | コリス
[JS]ç”»åƒã‚„パãƒãƒ«ã®ä¸Šã‚’クリックã—ãŸã‚‰ä¸Šè¾ºãŒã€ä¸å¤®ãªã‚‰å…¨ä½“ãŒæŠ¼ã•ã‚ŒãŸã‚ˆã†ãªã‚¨ãƒ•ã‚§ã‚¯ãƒˆã‚’é©ç”¨ã§ãるスクリプト -whichTriangle
[JS]åŠé€æ˜Žã‚„フラットã®ã‹ã£ã“ã„ã„パãƒãƒ«ã‚’ã•ã¾ã–ã¾ãªã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã§è¡¨ç¤ºã™ã‚‹ã‚¹ã‚¯ãƒªãƒ—ト -Amaran JS
[JS]シンプルã§ã‹ã£ã“ã„ã„スクãƒãƒ¼ãƒ«ã‚¨ãƒ•ã‚§ã‚¯ãƒˆã‚’ç°¡å˜ã«å®Ÿè£…ã§ãるスクリプト -ScrollMe
{{#tags}}- {{label}}
{{/tags}}