[JS]縦長ページã®ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã‚¨ãƒ•ã‚§ã‚¯ãƒˆã¯ã“ã‚ŒãŒä½¿ã„ã‚„ã™ã„ï¼ãƒ“ューãƒãƒ¼ãƒˆã‚’トリガーã«ã—ãŸã‚¹ã‚¯ãƒªãƒ—ト -in-view.jsページをスクãƒãƒ¼ãƒ«ã—ã¦ã€è¦ç´ ãŒè¡¨ç¤ºã•ã‚ŒãŸæ™‚ã«ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã‚’é©ç”¨ã™ã‚‹ã‚¨ãƒ•ã‚§ã‚¯ãƒˆã¯éžå¸¸ã«äººæ°—ãŒé«˜ã„ã§ã™ã。 è¦ç´ ãŒãƒ“ューãƒãƒ¼ãƒˆã«å…¥ã£ãŸæ™‚ã€ãã—ã¦å‡ºã‚‹æ™‚ã«ãã‚Œãžã‚Œã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã‚’é©ç”¨ã§ãã‚‹ä»–ã®ã‚¹ã‚¯ãƒªãƒ—トã«ä¾å˜ãªã—ã€è¶…軽é‡ï¼ˆ1.9kb gzip）ã®ã‚¹ã‚¯ãƒªãƒ—トを紹介ã—ã¾ã™ã€‚ ã™ã¹ã¦ã®ãƒ¢ãƒ€ãƒ³ãƒ–ラウザã¨IE9+をサãƒãƒ¼ãƒˆã—ã¦ãŠã‚Šã€ç¾ç’°å¢ƒã»ã¨ã‚“ã©ã§åˆ©ç”¨ã§ãã¾ã™ã€‚ in-view.js -GitHub in-view.jsã®ãƒ‡ãƒ¢ in-view.jsã®ä½¿ã„æ–¹ in-view.jsã®ãƒ‡ãƒ¢ デモã¯éžå¸¸ã«ã‚·ãƒ³ãƒ—ルã§ã€ãƒ“ューãƒãƒ¼ãƒˆã«è¦ç´ ãŒå…¥ã£ãŸæ™‚ã¨å‡ºã‚‹æ™‚ã«ãã‚Œãžã‚Œã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ãŒé©ç”¨ã•ã‚Œã¾ã™ã€‚ アニメーションã¯å…¥ã£ãŸåº¦ã¨å‡ºã‚‹åº¦ã”ã¨ã«é©ç”¨ã™ã‚‹ã“ã¨ã‚‚ã€ä¸€åº¦ã ã‘é©ç”¨ã™ã‚‹ã“ã¨ã‚‚ã§ãã¾ã™ã€‚
![[JS]縦長ページã®ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã‚¨ãƒ•ã‚§ã‚¯ãƒˆã¯ã“ã‚ŒãŒä½¿ã„ã‚„ã™ã„ï¼ãƒ“ューãƒãƒ¼ãƒˆã‚’トリガーã«ã—ãŸã‚¹ã‚¯ãƒªãƒ—ト -in-view.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/42912a7e2d55f1411cc35125c5180a65f5fb702d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016090505.png)
iOS ã® Safari 㧠Sticky (スクãƒãƒ¼ãƒ«å›ºå®š) è¦ç´ ãŒã‚«ã‚¿ã‚«ã‚¿ã—ã¦ãŠå›°ã‚Šã®æ™‚㯠| WP-E (ä»®)
jQueryã§ãƒšãƒ¼ã‚¸æœ€ä¸‹éƒ¨ã¾ã§ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã—ãŸéš›ã«å¤–部HTML（JSONå½¢å¼ï¼‰åŒ–ã—ãŸè¦ç´ ã‚’è¿½åŠ ã™ã‚‹æ–¹æ³•ï½œBLACKFLAG
[JS]スクãƒãƒ¼ãƒ«ã—ãŸéš›ã«è¦‹å‡ºã—ã‚„ç”»åƒã‚„エリアãªã©ãŒè¦‹åˆ‡ã‚Œã‚‹ã®ã‚’自動補æ£ã™ã‚‹ã‚¹ã‚¯ãƒªãƒ—ト -Scrollsnap
[JS]複数ã®ã‚¨ãƒ¬ãƒ¡ãƒ³ãƒˆã‚’スクãƒãƒ¼ãƒ«ã—ã¦ã‚‚指定ã—ãŸå ´æ‰€ã«ç•™ã¾ã‚‰ã›ã‚‹ã‚¹ã‚¯ãƒªãƒ—ト -ãƒãƒå…¬
jQueryを使ã£ãŸä¸€å®šä»¥ä¸Šã‚¹ã‚¯ãƒãƒ¼ãƒ«ã™ã‚‹ã¨ä¸Šã«å›ºå®šã•ã‚Œã‚‹æ¨ªãƒ¡ãƒ‹ãƒ¥ãƒ¼
https://stackstock.net/archives/2012/
[JS]スクãƒãƒ¼ãƒ«ã«è¿½å¾“ã™ã‚‹ãƒšãƒ¼ã‚¸ã®å…ˆé ã¸ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã§æˆ»ã‚‹ãƒœã‚¿ãƒ³ãŒç°¡å˜ã«è¨ç½®ã§ãるスクリプト -scrollUp
パララックス効果を作ã£ã¦ã¿ã‚ˆã† | Web技術ã®æœ€æ–°æƒ…å ±ã€ãŠå½¹ç«‹ã¡Tipsç‰ã‚’ãŠå±Šã‘　クリエイターã®ãŸã‚ã®Webテク講座 | 特集 | 人æ紹介 | マイナビクリエイター
jQueryã§ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã™ã‚‹ã¨è¡¨ç¤ºã™ã‚‹ç³»ã„ã‚ã„ã‚
途ä¸ã‹ã‚‰ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã«ã¤ã„ã¦ãã‚‹
{{#tags}}- {{label}}
{{/tags}}