[JS]縦長ページやスマホページã«ä¾¿åˆ©ãªæ©Ÿèƒ½ã‚„é¢ç™½ã„仕掛ã‘を実装ã™ã‚‹æœ€è¿‘ã®ãƒã‚§ãƒƒã‚¯ã—ã¦ãŠããŸã„スクリプトã®ã¾ã¨ã‚縦長ã®ãƒ©ãƒ³ãƒ‡ã‚£ãƒ³ã‚°ãƒšãƒ¼ã‚¸ã€ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–ãªã‚¹ãƒžãƒ›å¯¾å¿œãƒšãƒ¼ã‚¸ãªã©ã«ä¾¿åˆ©ãªæ©Ÿèƒ½ã‚„é¢ç™½ã„仕掛ã‘ã€æ°—æŒã¡ã„ã„インタラクションやエフェクトãªã©ã®ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã‚’実装ã§ãるスクリプトやjQueryã®ãƒ—ラグインを紹介ã—ã¾ã™ã€‚ Popper.js Popper.js -GitHub ãƒãƒƒãƒ‘ーã¯ãƒ„ールãƒãƒƒãƒ—ã¨ãƒãƒƒãƒ—オーãƒãƒ¼ã‚’組ã¿åˆã‚ã›ãŸã‚¹ã‚¯ãƒªãƒ—トã§ã€ä»Šã¾ã§ã®ãƒ„ールãƒãƒƒãƒ—ã¨ã¯ä¸€å‘³ã‚‚二味も異ãªã‚Šã¾ã™ã€‚指定ã—ãŸã‚¨ãƒ¬ãƒ¡ãƒ³ãƒˆã«è¡¨ç¤ºã•ã›ã‚‹ã ã‘ã§ãªãã€ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã™ã‚‹ã‚³ãƒ³ãƒ†ãƒŠã€ãƒ‰ãƒ©ãƒƒã‚°ã§ç§»å‹•å¯èƒ½ãªè¦ç´ ã€ãƒ“ューãƒãƒ¼ãƒˆã®ã‚ˆã‚‹æ–¹å‘ã®åˆ¶å¾¡ãªã©ã€ç¸¦é•·ãƒšãƒ¼ã‚¸ãƒ»ã‚¹ãƒžãƒ›æ™‚代ã®ãƒ„ールãƒãƒƒãƒ—ã§ã™ã€‚
![[JS]縦長ページやスマホページã«ä¾¿åˆ©ãªæ©Ÿèƒ½ã‚„é¢ç™½ã„仕掛ã‘を実装ã™ã‚‹æœ€è¿‘ã®ãƒã‚§ãƒƒã‚¯ã—ã¦ãŠããŸã„スクリプトã®ã¾ã¨ã‚](https://cdn-ak-scissors.b.st-hatena.com/image/square/63a1314d511ba3f16af07815026a8e0a870e8098/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016041101.jpg)
[JS]最近ã®Webサイトã§è¦‹ã‹ã‘ã‚‹æ°—æŒã¡ã„ã„アニメーションや便利ãªæ©Ÿèƒ½ãŒå®Ÿè£…ã§ãã‚‹ã€ä½¿ã„ã‚„ã™ã„スクリプトã®ã¾ã¨ã‚![[JS]最近ã®Webサイトã§è¦‹ã‹ã‘ã‚‹æ°—æŒã¡ã„ã„アニメーションや便利ãªæ©Ÿèƒ½ãŒå®Ÿè£…ã§ãã‚‹ã€ä½¿ã„ã‚„ã™ã„スクリプトã®ã¾ã¨ã‚](https://cdn-ak-scissors.b.st-hatena.com/image/square/fe7aba32b3039602901d0b81d414d66c71a445ea/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016031405.png)
[JS]最近ã®Webサイトã§è¦‹ã‹ã‘ã‚‹æ°—æŒã¡ã„ã„アニメーションã€ä¾¿åˆ©ãªä»•æŽ›ã‘や機能を実装ã™ã‚‹ã‚¹ã‚¯ãƒªãƒ—トã®ã¾ã¨ã‚![[JS]最近ã®Webサイトã§è¦‹ã‹ã‘ã‚‹æ°—æŒã¡ã„ã„アニメーションã€ä¾¿åˆ©ãªä»•æŽ›ã‘や機能を実装ã™ã‚‹ã‚¹ã‚¯ãƒªãƒ—トã®ã¾ã¨ã‚](https://cdn-ak-scissors.b.st-hatena.com/image/square/4df978511120c0727c18646f1d386ecdc2ab3a59/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072304.png)
Chrome Experiment 1,000 by Google Data Arts Team - Experiments with Google
ブラウザ対応ãŒç°¡å˜ã«ï¼ã€Œmodernizr.jsã€ã®æ©Ÿèƒ½ã¨åˆ©ç”¨æ–¹æ³• | æ ªå¼ä¼šç¤¾LIG(リグ)｜DX支æ´ãƒ»ã‚·ã‚¹ãƒ†ãƒ 開発・Web制作
[JS]最近よã見ã‹ã‘る縦長ページ用ã®ã•ã¾ã–ã¾ãªã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ãŒç°¡å˜ã«å®Ÿè£…ã§ãるスクリプト -ScrollReveal
[JS]ã•ã¾ã–ã¾ãªè¦ç´ ã«ã‹ã‚ã„ã„シャドウをã¤ã‘るスクリプトã€ã—ã‹ã‚‚å‹•ãよ -Shine
[JS]ã“ã®ãƒ›ãƒãƒ¼ã‚¨ãƒ•ã‚§ã‚¯ãƒˆæ¥½ã—ã„ï¼ã‚·ãƒ¼ãƒ«ã®ã‚ˆã†ã«ãºã‚‰ã£ã¨ã‚ãるスクリプト -Sticker.js
[JS]Appleã®ãƒ—ãƒãƒ€ã‚¯ãƒˆãƒšãƒ¼ã‚¸ã®ã‚ˆã†ã«ã€ã‚¹ã‚¯ãƒãƒ¼ãƒ«æ™‚ã«å„è¦ç´ ã‚’ã•ã¾ã–ã¾ãªã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã§è¡¨ç¤ºã•ã›ã‚‹ã‚¹ã‚¯ãƒªãƒ—ト -scrollReveal.js
æ•°è¡ŒåŠ ãˆã‚‹ã ã‘ã§ãƒ‘ララックススクãƒãƒ¼ãƒ«ã‚’実装ã§ãã‚‹ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ« | コリス
IT戦記
ç”»åƒã«ãƒ“フォーアフターを実装ã§ãã‚‹jQueryプラグイン - NxWorld
[JS]jQueryç„¡ã—ã€ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã‚’使ã£ãŸã‚¹ãƒ©ã‚¤ãƒ€ãƒ¼ã‚’ç°¡å˜ã«å®Ÿè£…ã§ãる軽é‡ã‚¹ã‚¯ãƒªãƒ—ト -slidr.js
[JS]æ–œã‚ã®ã‚°ãƒªãƒƒãƒ‰ã‚’使ã£ãŸç¾Žã—ã„レイアウトを簡å˜ã«å®Ÿè£…ã§ãるスクリプト -diamond.js
rainyday.js
[JS]シンプルãªãƒšãƒ¼ã‚¸å†…スクãƒãƒ¼ãƒ«ã‹ã‚‰ã€ã¡ã‚‡ã£ã¨é¢ç™½ã„スクãƒãƒ¼ãƒ«ã¾ã§ç°¡å˜ã«å®Ÿè£…ã§ãるスクリプト -Scrolld.js
デãƒã‚¤ã‚¹ã‚’判定ã—ã€CSS/JavaScriptã§ç°¡å˜ã«åˆ©ç”¨ã§ãるよã†ã«ã™ã‚‹ã‚¹ã‚¯ãƒªãƒ—ト -Device.js | コリス
{{#tags}}- {{label}}
{{/tags}}