モダンãªJSã¨CSSã§ä½œã‚‹ãƒ©ã‚¤ãƒ–ラリä¸è¦ã®å…¨ç”»é¢ã‚¹ã‚¯ãƒãƒ¼ãƒ«æ¼”出（2019年版） - ICS MEDIAスクãƒãƒ¼ãƒ«ã§å…¨ç”»é¢ãŒã‚¹ãƒ©ã‚¤ãƒ‰ã®ã‚ˆã†ã«åˆ‡ã‚Šæ›¿ã‚るウェブサイトã®è¡¨ç¾ãŒã‚ã‚Šã¾ã™ã€‚手軽ã«ã“ã®è¡¨ç¾ã‚’実装ã™ã‚‹JSライブラリã€fullPage.jsを使ã£ãŸã“ã¨ã®ã‚る方もã„ã‚‹ã®ã§ã¯ãªã„ã§ã—ょã†ã‹ï¼Ÿã€€ã‹ã¤ã¦ã¯ç„¡æ–™ã§ä½¿ãˆãŸã“ã®ãƒ©ã‚¤ãƒ–ラリã§ã™ãŒã€ç¾åœ¨ã¯GPLライセンスã®ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆä»¥å¤–ã§ã¯ä½¿ç”¨æ–™ãŒã‹ã‹ã‚Šã¾ã™ã€‚ ãã®ä¸€æ–¹ã€CSSã¨JavaScriptã®é€²åŒ–ã«ã‚ˆã‚Šã€ã“ã®ã‚ˆã†ãªè¡¨ç¾ã‚’ライブラリを使ã‚ãšã¨ã‚‚比較的簡å˜ã«å®Ÿè£…ã§ãるよã†ã«ãªã‚Šã¾ã—ãŸã€‚本記事ã§ã¯ã€åŸºæœ¬çš„ãªæ©Ÿèƒ½ã‚’ãŠã•ãˆãŸã€å…¨ç”»é¢ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã®å®Ÿè£…方法を紹介ã—ã¾ã™ã€‚ ã“ã®è¨˜äº‹ã‚’通ã˜ã¦ä»¥ä¸‹ã®æŠ€è¡“ã‚‚å¦ã¹ã¾ã™ã€‚ スクãƒãƒ¼ãƒ«ã‚’ピタッã¨æ¢ã‚ã‚‹CSSプãƒãƒ‘ティscroll-snap-type ç”»é¢ã¨è¦ç´ ã®äº¤å·®ã‚’検知ã™ã‚‹Intersection Observer API スムーススクãƒãƒ¼ãƒ«ãŒå®Ÿè£…ã§ãã‚‹JavaScriptメソッドscrollIntoView() デモを別ウ
Webセーフカラーã¯ãã‚Œã»ã©æ°—ã«ã—ãªãã¦ã‚‚OK
{{#tags}}- {{label}}
{{/tags}}