[JS]奥行ãを生ã¿å‡ºã™ã€Žãƒ‘ララックスã€ã‚’ç°¡å˜ã«å®Ÿè£…ã§ãるスクリプト -Smart3D複数ã®ç”»åƒã®ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã®ã‚¿ã‚¤ãƒŸãƒ³ã‚°ã‚’ãšã‚‰ã—ã¦è¡¨ç¤ºã™ã‚‹ãƒ‘ララックスを簡å˜ã«å®Ÿè£…ã§ãã‚‹jQueryã®ãƒ—ラグインを紹介ã—ã¾ã™ã€‚ jQuery.Smart3D デモページ [ad#ad-2] パララックスã¯ãã‚Œãžã‚Œã®ã‚¿ã‚¤ãƒŸãƒ³ã‚°ã‚’ãšã‚‰ã—ã¦è¦–差効果を生ã¿å‡ºã—ã€å¥¥è¡Œã感を出ã™ã‚‚ã®ã§ã™ã€‚ 上記デモã§ã¯èƒŒæ™¯ã¨äººç‰©ã®ç”»åƒ2æžšã‚’ãã‚Œãžã‚Œãƒžã‚¦ã‚¹ã«åˆã‚ã›ã¦ãšã‚‰ã—ã¦è¡¨ç¤ºã—ã¦ã„ã¾ã™ã€‚ ä½¿ç”¨ç”»åƒ 5æžšã®ç”»åƒã‚’使用ã—ãŸãƒ‘ララックス Smart3Dã®å®Ÿè£… 一番最åˆã«ç´¹ä»‹ã—ãŸãƒ‡ãƒ¢ã®å®Ÿè£…方法ã§ã™ã€‚ HTML å„ç”»åƒã‚’リストè¦ç´ ã§é…ç½®ã—ã¾ã™ã€‚ <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS スタイルシートã§ã‚µã‚¤ã‚ºã‚’è¨å®šã—ã€å¥½ã¿ã§borderãªã©ã®ãƒ‡ã‚¶ã‚¤ãƒ³
{{#tags}}- {{label}}
{{/tags}}