SVGç·šç”»ãŒç¾Žã—ã„リッãƒã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã®ä½œã‚Šæ–¹ (1/2)ページé·ç§»ãŒæ¥½ã—ã„繊細ã§æ»‘らã‹ãªå‹•ã CSS3を使ã£ãŸæ»‘らã‹ãªå‹•ãã¨å¤§èƒ†ãªã‚¿ã‚¤ãƒã‚°ãƒ©ãƒ•ã‚£ãŒé…力的ãªã€ŒBeatrice Creationsã€ã€‚é»’ã¨ç™½ã‚’基調ã¨ã—ãŸè‡³ã£ã¦ã‚·ãƒ³ãƒ—ルãªãƒ‡ã‚¶ã‚¤ãƒ³ãªãŒã‚‰ã€ã¤ã„全ページを見ã¦ã¿ãŸããªã‚‹ã€é£½ãã®ã“ãªã„演出ãŒæ–½ã•ã‚Œã¦ã„る。 Béatrice Créationsã§ã¯ã€è¤‡æ•°ã‚る作å“ã®ãƒã‚´ã«SVGãŒä½¿ã‚ã‚Œã¦ãŠã‚Šã€ä½œå“ページを移動ã™ã‚‹ãŸã³ã«ç¾Žã—ã„カーブをæã。軽é‡ã§ã€æž ç·šã‚„ç·šç”»ã«ã‚ˆã£ã¦ç¹Šç´°ã§ãƒªãƒƒãƒãªä¸–界観を演出ã™ã‚‹ã€ä»Šæ³¨ç›®ã®SVGアニメーションを有効ã«æ´»ã‹ã—ãŸã‚µã‚¤ãƒˆã 。 今回ã¯ã“ã®ã‚µã‚¤ãƒˆã‚’ヒントã«ã€SVGã®åŸºæœ¬ã¨ã€CSS3アニメーションを使ã£ãŸå‹•ã‹ã—方を解説ã™ã‚‹ã€‚CSSã¨HTMLã®ã¿ã§æ¬¡ã®ã‚ˆã†ãªæž ç·šã¨ãƒ†ã‚ストをæãã€æœ€çµ‚çš„ã«ã¯jQueryを使ã£ã¦è‰²ã‚’変ãˆã‚‹ãƒ‡ãƒ¢ã‚’制作ã™ã‚‹ã€‚ STEP 1：SVGã®ãƒ‘スを作æˆã™ã‚‹ アニメーションを作るå‰ã«ã€Illustratorを使ã£ã¦ç´
{{#tags}}- {{label}}
{{/tags}}