担当サイトãŒå—賞ã—ãŸã®ã§ã€ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã®æ¼”出ã«ä½¿ã£ãŸJavaScriptライブラリã€webツールを晒ã—ã¦ã¿ã‚‹ | æ ªå¼ä¼šç¤¾LIG(リグ)｜DX支æ´ãƒ»ã‚·ã‚¹ãƒ†ãƒ 開発・Web制作担当サイトãŒå—賞ã—ãŸã®ã§ã€ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã®æ¼”出ã«ä½¿ã£ãŸJavaScriptライブラリã€webツールを晒ã—ã¦ã¿ã‚‹ ã“ã‚“ã«ã¡ã¯ã€ã¾ã‚Cã§ã™ã€‚ 最近ã€åƒ•ãŒæ‹…当ã—㟠JOYSOUNDã®ã‚ャンペーンサイトã§ã€ã„ã‚ã„ã‚ãªè³žã‚’å—賞ã™ã‚‹ã“ã¨ãŒã§ãã¾ã—ãŸã€‚ CSSREEL Design Awards Asis CSS WINNER 今回ã¯ã€ã“ã®ã‚ˆã†ãªæ¼”出を入れるサイトã§åƒ•ãŒã„ã¤ã‚‚使ã£ã¦ã„ã‚‹JavaScriptライブラリやã€webツールを晒ã—ãŸã„ã¨æ€ã„ã¾ã™ã€‚ アニメーションã®åŸºæœ¬çš„ãªãƒ•ãƒãƒ¼ 基本的ã«ã€ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã¯CSSã«transitionã‚„animationã§è¨˜è¿°ã—ã¦ã„ã¾ã™ã€‚ javascriptã§ã€ãƒãƒ¼ãƒ‰ã‚„スクãƒãƒ¼ãƒ«ã‚’トリガーã«ã—ã¦ã€ãã®è¦ç´ ã«addClassã‚„removeClassã—ã¦ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã‚’発動ã—ã¦ã„ã¾ã™ã€‚ãã®ã»ã†ãŒè»½ã„ã‹ã‚‰ã§ã™ã€‚ より複雑ã€ã‹ã¤é€£å‹•ã—ã¦å‹•ã‹ã—ãŸã„å ´åˆã¯ã€ãƒ©ã‚¤ãƒ–ラリを使用ã—
æ„外ã¨ä»Šã£ã½ããªã‚‹ã€CSSã‚„jQueryã§å®Ÿç¾ã™ã‚‹ã‚¨ãƒ•ã‚§ã‚¯ãƒˆã¾ã¨ã‚
[JS]ã¡ã‚‡ã£ã¨ã—ãŸã‚¢ã‚¤ãƒ‡ã‚¢ã®ç©ã¿é‡ããŒç´ 晴らã—ã„ï¼ç”»åƒã‚’拡大表示ã™ã‚‹ã‚·ãƒ³ãƒ—ルãªã‚¹ã‚¯ãƒªãƒ—ト -Zoom.js![[JS]ã¡ã‚‡ã£ã¨ã—ãŸã‚¢ã‚¤ãƒ‡ã‚¢ã®ç©ã¿é‡ããŒç´ 晴らã—ã„ï¼ç”»åƒã‚’拡大表示ã™ã‚‹ã‚·ãƒ³ãƒ—ルãªã‚¹ã‚¯ãƒªãƒ—ト -Zoom.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/d408ea9798d5866f690b92bcfb70e29e4a50a739/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015051309.png)
{{#tags}}- {{label}}
{{/tags}}