{"id":35,"date":"2026-11-08T18:12:17","date_gmt":"2026-11-08T10:12:17","guid":{"rendered":"https:\/\/www.ddmusic.in\/theband\/home\/"},"modified":"2026-11-08T19:07:41","modified_gmt":"2026-11-08T11:07:41","slug":"home","status":"publish","type":"page","link":"https:\/\/www.ddmusic.in\/theband\/","title":{"rendered":"\u66f8\u7c4d\u6392\u7248\u30fb\u7c21\u5831\u30fb\u8ab2\u7a0b\u30fb\u5f71\u7247\u8a2d\u8a08"},"content":{"rendered":"\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+TC:wght@400;500;700;900&#038;family=Archivo+Black&#038;display=swap\" rel=\"stylesheet\">\n<div class=\"tb\" data-base=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/\">\n<style>\n.tb{--ink:#0d0d0d;--ink2:#161616;--paper:#fff;--pink:#ff1f8f;--pink2:#e4007f;--mid:#9a9a9a;font-family:\"Noto Sans TC\",system-ui,sans-serif;color:#fff;background:var(--ink);line-height:1.7;font-size:17px;overflow:hidden}\n.tb *{box-sizing:border-box}\n.tb a{color:inherit}\n.tb img{max-width:none}\n.tb .wrap{max-width:1180px;margin:0 auto;padding:0 24px}\n.tb .en{font-family:\"Archivo Black\",sans-serif}\n\/* nav *\/\n.tb .nav{position:fixed;left:0;right:0;top:var(--wp-admin--admin-bar--height,0px);z-index:50;transition:background .3s,backdrop-filter .3s}\n.tb .nav.solid{background:rgba(13,13,13,.78);backdrop-filter:blur(10px)}\n.tb .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}\n.tb .logo{display:flex;align-items:baseline;gap:10px;text-decoration:none}\n.tb .logo b{font-family:\"Archivo Black\",sans-serif;font-size:22px;letter-spacing:.01em}\n.tb .logo span{color:var(--pink);font-weight:900;font-size:17px}\n.tb .nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;font-size:15px}\n.tb .nav ul a{text-decoration:none;opacity:.75;transition:opacity .2s,color .2s}\n.tb .nav ul a:hover{opacity:1;color:var(--pink)}\n.tb .nav .cta{border:1px solid var(--pink);color:var(--pink);padding:7px 18px;border-radius:999px;text-decoration:none;font-size:14px;font-weight:700;transition:.2s}\n.tb .nav .cta:hover{background:var(--pink);color:#fff}\n\/* hero *\/\n.tb .hero{position:relative;height:100vh;min-height:640px;display:flex;align-items:center;overflow:hidden;background:radial-gradient(ellipse at 70% 50%,#2a0f1e 0%,var(--ink) 60%)}\n.tb #tbCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}\n.tb .hero .glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(500px circle at var(--mx,70%) var(--my,50%),rgba(255,31,143,.16),transparent 60%)}\n.tb .hero .shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(13,13,13,.92) 0%,rgba(13,13,13,.55) 42%,rgba(13,13,13,0) 70%)}\n.tb .hero .wrap{position:relative;z-index:2;width:100%}\n.tb .eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:\"Archivo Black\",sans-serif;font-size:13px;letter-spacing:.25em;color:var(--pink);margin-bottom:22px}\n.tb .eyebrow::before{content:\"\";width:36px;height:2px;background:var(--pink)}\n.tb .hero h1{font-size:clamp(46px,8vw,104px);line-height:1.08;margin:0 0 26px;font-weight:900;letter-spacing:-.01em}\n.tb .hero h1 .ch{display:inline-block;transform:translateY(110%);opacity:0}\n.tb .hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em}\n.tb .hero h1 em{font-style:normal;color:var(--pink);display:inline-block;text-shadow:0 0 40px rgba(255,31,143,.55)}\n.tb .rot{font-size:clamp(20px,2.6vw,30px);font-weight:700;margin:0 0 14px;height:1.5em;overflow:hidden}\n.tb .rot span{display:inline-block;color:var(--pink)}\n.tb .rot .w{display:inline-block;animation:tbUp .6s cubic-bezier(.2,.8,.2,1)}\n@keyframes tbUp{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}\n.tb .hero p.sub{font-size:clamp(16px,1.6vw,19px);max-width:520px;color:#cfcfcf;margin:0 0 36px}\n.tb .btn{position:relative;display:inline-flex;align-items:center;gap:10px;background:var(--pink);color:#fff;text-decoration:none;font-weight:700;padding:16px 32px;border-radius:999px;box-shadow:0 10px 40px rgba(255,31,143,.35);transition:box-shadow .25s}\n.tb .btn:hover{box-shadow:0 14px 60px rgba(255,31,143,.6)}\n.tb .btn.ghost{background:transparent;border:1px solid #fff6;box-shadow:none;margin-left:12px}\n.tb .btn.ghost:hover{border-color:#fff}\n.tb .scroll{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:2;font-size:11px;letter-spacing:.3em;color:#aaa;text-align:center;font-family:\"Archivo Black\",sans-serif}\n.tb .scroll i{display:block;width:22px;height:36px;border:2px solid #aaa;border-radius:12px;margin:0 auto 8px;position:relative}\n.tb .scroll i::after{content:\"\";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--pink);animation:tbWheel 1.6s infinite}\n@keyframes tbWheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}\n\/* marquee *\/\n.tb .marq{background:var(--pink);color:#fff;overflow:hidden;white-space:nowrap;padding:16px 0;transform:rotate(-2deg) scale(1.05);margin:-20px 0 30px;position:relative;z-index:3}\n.tb .marq div{display:inline-block;font-family:\"Archivo Black\",sans-serif;font-size:clamp(22px,3vw,38px);animation:tbMarq 26s linear infinite}\n.tb .marq span{margin:0 26px;opacity:.9}\n.tb .marq b{color:var(--ink)}\n@keyframes tbMarq{to{transform:translateX(-50%)}}\n\/* section *\/\n.tb section{padding:120px 0;position:relative;scroll-margin-top:68px}\n.tb .kicker{font-family:\"Archivo Black\",sans-serif;color:var(--pink);font-size:13px;letter-spacing:.25em}\n.tb h2{font-size:clamp(32px,5vw,60px);margin:10px 0 18px;font-weight:900;line-height:1.2;letter-spacing:-.01em}\n.tb h2 em{font-style:normal;color:var(--pink)}\n.tb .lead{color:var(--mid);max-width:640px;margin:0 0 56px;font-size:18px}\n\/* services *\/\n.tb .svc{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;perspective:1000px}\n.tb .card{position:relative;background:linear-gradient(160deg,#1c1c1c,#121212);border:1px solid #262626;border-radius:20px;padding:34px 26px 30px;transform-style:preserve-3d;transition:transform .15s ease-out,border-color .3s;overflow:hidden;min-height:360px}\n.tb .card::after{content:\"\";position:absolute;inset:0;background:radial-gradient(400px circle at var(--gx,50%) var(--gy,0%),rgba(255,31,143,.18),transparent 45%);opacity:0;transition:opacity .3s;pointer-events:none}\n.tb .card:hover{border-color:#ff1f8f66}\n.tb .card:hover::after{opacity:1}\n.tb .card .no{font-family:\"Archivo Black\",sans-serif;font-size:58px;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--pink);transform:translateZ(40px)}\n.tb .card .ico{position:absolute;right:22px;top:26px;font-size:30px;transform:translateZ(60px)}\n.tb .card h3{font-size:23px;margin:22px 0 10px;transform:translateZ(30px)}\n.tb .card p{margin:0 0 16px;color:#bdbdbd;font-size:15px;transform:translateZ(20px)}\n.tb .card ul{margin:0;padding:0;list-style:none;font-size:14px;color:#8d8d8d;transform:translateZ(15px)}\n.tb .card li{padding:5px 0;border-top:1px solid #262626}\n.tb .card li::before{content:\"\u2192 \";color:var(--pink)}\n\/* gallery *\/\n.tb .gallery{padding:120px 0 80px;background:var(--ink2)}\n.tb .g-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:50px}\n.tb .g-head .lead{margin:0}\n.tb .g-count{font-family:\"Archivo Black\",sans-serif;font-size:clamp(60px,9vw,120px);line-height:.9;color:transparent;-webkit-text-stroke:1.5px #333}\n.tb .g-viewport{overflow:hidden}\n.tb .g-track{display:flex;gap:28px;padding:0 24px 0 max(24px,calc((100vw - 1180px)\/2 + 24px));width:max-content;will-change:transform}\n.tb .g-item{margin:0;flex:none;position:relative;perspective:800px}\n.tb .g-item .pic{position:relative;border-radius:10px;overflow:hidden;background:#222;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;box-shadow:0 20px 50px rgba(0,0,0,.5)}\n.tb .g-item img{display:block;height:min(48vh,420px);width:auto}\n.tb .g-item:hover .pic{transform:translateY(-10px) rotateY(-8deg);box-shadow:20px 30px 60px rgba(255,31,143,.25)}\n.tb .g-item figcaption{margin-top:14px;font-size:14px;color:#ddd}\n.tb .g-item figcaption small{display:block;color:var(--mid);font-size:12px;letter-spacing:.05em}\n.tb .g-tag{position:absolute;left:12px;top:12px;z-index:2;background:rgba(13,13,13,.75);backdrop-filter:blur(6px);color:#fff;font-size:12px;padding:4px 12px;border-radius:999px;border:1px solid #ffffff22}\n.tb .g-sep{flex:none;display:flex;align-items:center;justify-content:center;width:220px;font-family:\"Archivo Black\",sans-serif;font-size:44px;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--pink);writing-mode:vertical-rl;letter-spacing:.05em}\n.tb .g-hint{margin-top:26px;font-size:13px;color:#777;letter-spacing:.1em}\n.tb .m-only{display:none;color:var(--pink)}\n@media (max-width:900px){.tb .m-only{display:inline}}\n\/* numbers *\/\n.tb .nums{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center}\n.tb .nums div{padding:40px 10px;border-radius:20px;background:#141414;border:1px solid #232323}\n.tb .nums b{display:block;font-family:\"Archivo Black\",sans-serif;font-size:clamp(56px,8vw,96px);line-height:1;background:linear-gradient(180deg,#fff,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}\n.tb .nums span{color:var(--mid);font-size:15px}\n\/* process *\/\n.tb .steps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;padding-top:40px}\n.tb .steps .bar{position:absolute;left:0;right:0;top:10px;height:2px;background:#2a2a2a}\n.tb .steps .bar i{position:absolute;inset:0;background:linear-gradient(90deg,var(--pink),#ff7ac0);transform-origin:left;transform:scaleX(0)}\n.tb .step{position:relative}\n.tb .step::before{content:\"\";position:absolute;top:-36px;left:0;width:14px;height:14px;border-radius:50%;background:var(--ink);border:2px solid var(--pink);box-shadow:0 0 0 6px rgba(255,31,143,.12)}\n.tb .step .n{font-family:\"Archivo Black\",sans-serif;color:var(--pink);font-size:15px}\n.tb .step h4{margin:4px 0 6px;font-size:21px}\n.tb .step p{margin:0;color:var(--mid);font-size:15px}\n\/* about *\/\n.tb .about .cols{display:grid;grid-template-columns:1fr 1.3fr;gap:70px;align-items:center}\n.tb .about .big{font-size:clamp(28px,3.4vw,44px);font-weight:900;line-height:1.35}\n.tb .about .big em{font-style:normal;color:var(--pink)}\n.tb .about p{color:#bdbdbd;margin:0 0 18px}\n\/* contact *\/\n.tb .contact{text-align:center;padding:160px 0;background:radial-gradient(ellipse at 50% 100%,#3a0f26 0%,var(--ink) 65%)}\n.tb .contact h2{font-size:clamp(40px,7vw,92px)}\n.tb .contact .lead{margin:0 auto 46px}\n.tb .contact .ways{display:flex;justify-content:center;flex-wrap:wrap;gap:16px}\n.tb .foot{border-top:1px solid #222;color:#666;font-size:13px;padding:28px 0;text-align:center}\n\/* reveal base *\/\n.tb [data-r]{opacity:0;transform:translateY(40px)}\n.tb.no-anim [data-r]{opacity:1;transform:none}\n.tb.no-anim .hero h1 .ch{opacity:1;transform:none}\n\/* mobile *\/\n@media (max-width:900px){\n .tb .nav ul{display:none}\n .tb .svc{grid-template-columns:1fr 1fr}\n .tb .steps{grid-template-columns:1fr;gap:28px;padding-top:0;padding-left:34px}\n .tb .steps .bar{left:6px;right:auto;top:0;bottom:0;width:2px;height:auto}\n .tb .steps .bar i{transform-origin:top;transform:scaleY(0)}\n .tb .step::before{top:6px;left:-34px}\n .tb .about .cols{grid-template-columns:1fr;gap:24px}\n .tb .hero .shade{background:linear-gradient(180deg,rgba(13,13,13,.3) 0%,rgba(13,13,13,.85) 60%)}\n .tb .hero{align-items:flex-end;padding-bottom:60px;min-height:600px}\n .tb .scroll{display:none}\n .tb .eyebrow{font-size:11px;letter-spacing:.15em;margin-bottom:14px}\n .tb .eyebrow::before{width:20px}\n .tb .g-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:24px;-webkit-overflow-scrolling:touch}\n .tb .g-item,.tb .g-sep{scroll-snap-align:start}\n .tb .g-item img{height:300px}\n .tb .g-sep{width:90px;font-size:30px}\n .tb section{padding:84px 0}\n .tb .g-count{display:none}\n}\n@media (max-width:560px){\n .tb .svc{grid-template-columns:1fr}\n .tb .card{min-height:0}\n .tb .nums{grid-template-columns:1fr}\n .tb .btn.ghost{margin:12px 0 0}\n .tb .nav .cta{display:none}\n}\n<\/style>\n\n<nav class=\"nav\" id=\"tbNav\"><div class=\"wrap\">\n <a class=\"logo\" href=\"#top\"><b>the BAND<\/b><span>\u8b8a\u8a2d\u8a08<\/span><\/a>\n <ul><li><a href=\"#services\">\u670d\u52d9<\/a><\/li><li><a href=\"#works\">\u4f5c\u54c1<\/a><\/li><li><a href=\"#process\">\u6d41\u7a0b<\/a><\/li><li><a href=\"#about\">\u95dc\u65bc<\/a><\/li><\/ul>\n <a class=\"cta\" href=\"#contact\">\u514d\u8cbb\u8a62\u50f9<\/a>\n<\/div><\/nav>\n\n<header class=\"hero\" id=\"top\">\n <canvas id=\"tbCanvas\"><\/canvas>\n <div class=\"glow\"><\/div><div class=\"shade\"><\/div>\n <div class=\"wrap\">\n  <div class=\"eyebrow\">BOOK \u00b7 SLIDES \u00b7 COURSE \u00b7 VIDEO<\/div>\n  <h1 id=\"tbH1\"><span class=\"line\">\u628a\u5167\u5bb9\uff0c<\/span><span class=\"line\"><em>\u8b8a<\/em>\u6210\u4f5c\u54c1\u3002<\/span><\/h1>\n  <div class=\"rot\">\u628a\u4f60\u7684\u5167\u5bb9\u8b8a\u6210<span id=\"tbWord\"><span class=\"w\">\u4e00\u672c\u66f8<\/span><\/span><\/div>\n  <p class=\"sub\">\u66f8\u7c4d\u6392\u7248\u3001\u7c21\u5831\u8a2d\u8a08\u3001\u6559\u80b2\u8ab2\u7a0b\u3001\u5f71\u7247\u5b57\u5e55\u3002\u4f60\u6e96\u5099\u597d\u5167\u5bb9\uff0c\u6211\u5011\u628a\u5b83\u8b8a\u5f97\u597d\u8b80\u3001\u597d\u770b\u3001\u597d\u61c2\u3002<\/p>\n  <a class=\"btn magnet\" href=\"#contact\">\u514d\u8cbb\u8a62\u50f9 \u2192<\/a><a class=\"btn ghost\" href=\"#works\">\u770b\u4f5c\u54c1<\/a>\n <\/div>\n <div class=\"scroll\"><i><\/i>SCROLL<\/div>\n<\/header>\n\n<div class=\"marq\"><div><span>BOOK DESIGN<\/span><b>\u2726<\/b><span>PRESENTATION<\/span><b>\u2726<\/b><span>E-LEARNING<\/span><b>\u2726<\/b><span>VIDEO &amp; SUBTITLE<\/span><b>\u2726<\/b><span>BOOK DESIGN<\/span><b>\u2726<\/b><span>PRESENTATION<\/span><b>\u2726<\/b><span>E-LEARNING<\/span><b>\u2726<\/b><span>VIDEO &amp; SUBTITLE<\/span><b>\u2726<\/b><\/div><\/div>\n\n<section id=\"services\"><div class=\"wrap\">\n <div class=\"kicker\" data-r>SERVICES<\/div>\n <h2 data-r>\u4e00\u4efd\u5167\u5bb9\uff0c<em>\u56db\u7a2e\u8b8a\u5316<\/em><\/h2>\n <p class=\"lead\" data-r>\u5f9e\u7d19\u672c\u5230\u87a2\u5e55\u3001\u5f9e\u975c\u614b\u5230\u5f71\u97f3\uff0c\u540c\u4e00\u500b\u7a97\u53e3\u5f9e\u982d\u505a\u5230\u5c3e\uff0c\u98a8\u683c\u4e00\u81f4\uff0c\u4e0d\u7528\u627e\u597d\u5e7e\u5bb6\u3002<\/p>\n <div class=\"svc\">\n  <div class=\"card tilt\" data-r><div class=\"ico\">\ud83d\udcd6<\/div><div class=\"no\">01<\/div><h3>\u66f8\u7c4d\u8a2d\u8a08\u30fb\u6392\u7248<\/h3><p>\u5c08\u8077\u7f8e\u8853\u7de8\u8f2f\uff0c\u7d93\u624b 40 \u672c\u4ee5\u4e0a\u7684\u66f8\uff1a\u6587\u5b57\u66f8\u3001\u5716\u6587\u66f8\u3001\u8a9e\u8a00\u5de5\u5177\u66f8\uff0c\u4ee5\u53ca\u6a02\u8b5c\u3002<\/p><ul><li>\u5c01\u9762\u8a2d\u8a08<\/li><li>\u5167\u9801\u7248\u578b\u8207\u5168\u66f8\u6392\u7248<\/li><li>\u5370\u5237\u6a94\u3001\u96fb\u5b50\u66f8\u6a94<\/li><\/ul><\/div>\n  <div class=\"card tilt\" data-r><div class=\"ico\">\ud83d\udda5\ufe0f<\/div><div class=\"no\">02<\/div><h3>\u7c21\u5831\u8a2d\u8a08<\/h3><p>\u628a\u5bc6\u5bc6\u9ebb\u9ebb\u7684\u6587\u5b57\uff0c\u6574\u7406\u6210\u4e00\u773c\u770b\u61c2\u7684\u6295\u5f71\u7247\u3002\u63d0\u6848\u3001\u6559\u80b2\u8a13\u7df4\u3001\u6f14\u8b1b\u90fd\u9069\u7528\u3002<\/p><ul><li>\u7c21\u5831\u7248\u578b\u7cfb\u7d71<\/li><li>\u5167\u5bb9\u91cd\u6574\u30fb\u5716\u89e3<\/li><li>PPT\uff0fKeynote\uff0fCanva<\/li><\/ul><\/div>\n  <div class=\"card tilt\" data-r><div class=\"ico\">\ud83c\udf93<\/div><div class=\"no\">03<\/div><h3>\u6559\u80b2\u8ab2\u7a0b\u88fd\u4f5c<\/h3><p>\u6578\u4f4d\u8ab2\u7a0b\u3001\u6559\u6750\u8207\u6559\u5b78\u52d5\u756b\u3002\u61c2\u6559\u5b78\u7684\u4eba\u505a\u8ab2\u7a0b\uff0c\u77e5\u9053\u5b78\u7fd2\u8005\u5361\u5728\u54ea\u88e1\u3002<\/p><ul><li>\u8ab2\u7a0b\u67b6\u69cb\u8207\u8173\u672c<\/li><li>\u6559\u5b78\u6295\u5f71\u7247\u30fb\u8b1b\u7fa9<\/li><li>\u6559\u5b78\u52d5\u756b\u30fb\u65c1\u767d\u5f71\u7247<\/li><\/ul><\/div>\n  <div class=\"card tilt\" data-r><div class=\"ico\">\ud83c\udfac<\/div><div class=\"no\">04<\/div><h3>\u5f71\u7247\u526a\u63a5\u30fb\u5b57\u5e55<\/h3><p>YouTube\u3001\u8ab2\u7a0b\u5f71\u7247\u3001\u77ed\u5f71\u97f3\u7684\u526a\u8f2f\u8207\u5b57\u5e55\uff0c\u8b93\u89c0\u773e\u770b\u5f97\u5b8c\u3001\u770b\u5f97\u61c2\u3002<\/p><ul><li>\u526a\u63a5\u30fb\u8abf\u8272\u30fb\u914d\u6a02<\/li><li>\u4e2d\u82f1\u5b57\u5e55\u30fb\u5927\u5b57\u5361<\/li><li>Shorts\uff0fReels \u76f4\u5f0f<\/li><\/ul><\/div>\n <\/div>\n<\/div><\/section>\n\n<section class=\"gallery\" id=\"works\">\n <div class=\"wrap g-head\">\n  <div><div class=\"kicker\" data-r>WORKS<\/div><h2 data-r>\u4f5c\u54c1\uff0c<em>\u81ea\u5df1\u6703\u8aaa\u8a71<\/em><\/h2><p class=\"lead\" data-r>\u5c01\u9762\u3001\u5167\u9801\u3001\u5e73\u9762\u3001\u7c21\u5831\u5230\u5f71\u7247\uff0c\u770b\u770b\u6211\u5011\u628a\u54ea\u4e9b\u5167\u5bb9\u8b8a\u6210\u4e86\u4f5c\u54c1\u3002<\/p><\/div>\n  <div class=\"g-count\" data-r>27<\/div>\n <\/div>\n <div class=\"g-viewport\"><div class=\"g-track\" id=\"tbTrack\">\n  <div class=\"g-sep\">BOOK<\/div>\n  <figure class=\"g-item\"><div class=\"pic\"><span class=\"g-tag\">\u66f8\u7c4d\u5c01\u9762<\/span><img src=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/front-03c.jpg\" alt=\"\u66f8\u7c4d\u5c01\u9762\u8a2d\u8a08\" decoding=\"async\"><\/div><\/figure>\n  <figure class=\"g-item\"><div class=\"pic\"><span class=\"g-tag\">\u66f8\u7c4d\u5c01\u9762<\/span><img src=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/front-04c.jpg\" alt=\"\u66f8\u7c4d\u5c01\u9762\u8a2d\u8a08\" decoding=\"async\"><\/div><\/figure>\n  <figure class=\"g-item\"><div class=\"pic\"><span class=\"g-tag\">\u66f8\u7c4d\u5c01\u9762<\/span><img src=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/front-05c.jpg\" alt=\"\u66f8\u7c4d\u5c01\u9762\u8a2d\u8a08\" decoding=\"async\"><\/div><\/figure>\n  <figure class=\"g-item\"><div class=\"pic\"><span class=\"g-tag\">\u66f8\u7c4d\u5c01\u9762<\/span><img src=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/front-06c.jpg\" alt=\"\u66f8\u7c4d\u5c01\u9762\u8a2d\u8a08\" decoding=\"async\"><\/div><\/figure>\n  <figure class=\"g-item\"><div class=\"pic\"><span class=\"g-tag\">\u66f8\u7c4d\u5c01\u9762<\/span><img src=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/front-07c.jpg\" alt=\"\u66f8\u7c4d\u5c01\u9762\u8a2d\u8a08\" decoding=\"async\"><\/div><\/figure>\n  <figure class=\"g-item\"><div class=\"pic\"><span class=\"g-tag\">\u66f8\u7c4d\u5c01\u9762<\/span><img src=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/front-08c.jpg\" alt=\"\u66f8\u7c4d\u5c01\u9762\u8a2d\u8a08\" decoding=\"async\"><\/div><\/figure>\n  <figure class=\"g-item\"><div class=\"pic\"><span class=\"g-tag\">\u66f8\u7c4d\u5c01\u9762<\/span><img src=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/front-09c.jpg\" alt=\"\u66f8\u7c4d\u5c01\u9762\u8a2d\u8a08\" decoding=\"async\"><\/div><\/figure>\n  <figure class=\"g-item\"><div class=\"pic\"><span class=\"g-tag\">\u66f8\u7c4d\u5c01\u9762<\/span><img src=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/front-10c.jpg\" alt=\"\u66f8\u7c4d\u5c01\u9762\u8a2d\u8a08\" decoding=\"async\"><\/div><\/figure>\n  <figure class=\"g-item\"><div class=\"pic\"><span class=\"g-tag\">\u66f8\u7c4d\u5c01\u9762<\/span><img src=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/front-11c.jpg\" alt=\"\u66f8\u7c4d\u5c01\u9762\u8a2d\u8a08\" decoding=\"async\"><\/div><\/figure>\n  <figure class=\"g-item\"><div class=\"pic\"><span class=\"g-tag\">\u66f8\u7c4d\u5c01\u9762<\/span><img src=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/front-01d.jpg\" alt=\"\u66f8\u7c4d\u5c01\u9762\u8a2d\u8a08\" decoding=\"async\"><\/div><\/figure>\n  <figure class=\"g-item\"><div class=\"pic\"><span class=\"g-tag\">\u66f8\u7c4d\u5c01\u9762<\/span><img src=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/front-12c.jpg\" alt=\"\u66f8\u7c4d\u5c01\u9762\u8a2d\u8a08\" decoding=\"async\"><\/div><\/figure>\n  <figure class=\"g-item\"><div class=\"pic\"><span class=\"g-tag\">\u66f8\u7c4d\u5c01\u9762<\/span><img src=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/front-13c.jpg\" alt=\"\u66f8\u7c4d\u5c01\u9762\u8a2d\u8a08\" decoding=\"async\"><\/div><\/figure>\n  <figure class=\"g-item\"><div class=\"pic\"><span class=\"g-tag\">\u66f8\u7c4d\u5c01\u9762<\/span><img src=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/front-14c.jpg\" alt=\"\u66f8\u7c4d\u5c01\u9762\u8a2d\u8a08\" decoding=\"async\"><\/div><\/figure>\n  <figure class=\"g-item\"><div class=\"pic\"><span class=\"g-tag\">\u66f8\u7c4d\u5c01\u9762<\/span><img src=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/front-15c.jpg\" alt=\"\u66f8\u7c4d\u5c01\u9762\u8a2d\u8a08\" decoding=\"async\"><\/div><\/figure>\n  <figure class=\"g-item\"><div class=\"pic\"><span class=\"g-tag\">\u66f8\u7c4d\u5c01\u9762<\/span><img src=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/front-16c.jpg\" alt=\"\u66f8\u7c4d\u5c01\u9762\u8a2d\u8a08\" decoding=\"async\"><\/div><\/figure>\n  <figure class=\"g-item\"><div class=\"pic\"><span class=\"g-tag\">\u66f8\u7c4d\u5c01\u9762<\/span><img src=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/front-02c.jpg\" alt=\"\u66f8\u7c4d\u5c01\u9762\u8a2d\u8a08\" decoding=\"async\"><\/div><\/figure>\n  <div class=\"g-sep\">LAYOUT<\/div>\n  <figure class=\"g-item\"><div class=\"pic\"><span class=\"g-tag\">\u5167\u9801\u6392\u7248<\/span><img src=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/layout-01.jpg\" alt=\"\u300a\u5973\u5091\uff1a\u5973\u5b50\u904b\u52d5\u54e1\u7d00\u5be6\u300b\" decoding=\"async\"><\/div><figcaption>\u300a\u5973\u5091\uff1a\u5973\u5b50\u904b\u52d5\u54e1\u7d00\u5be6\u300b<small>\u5716\u6587\u66f8\u5167\u9801\u6392\u7248<\/small><\/figcaption><\/figure>\n  <figure class=\"g-item\"><div class=\"pic\"><span class=\"g-tag\">\u5167\u9801\u6392\u7248<\/span><img src=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/layout-02.jpg\" alt=\"\u300a\u5973\u5091\uff1a\u5973\u5b50\u904b\u52d5\u54e1\u7d00\u5be6\u300b\" decoding=\"async\"><\/div><figcaption>\u300a\u5973\u5091\uff1a\u5973\u5b50\u904b\u52d5\u54e1\u7d00\u5be6\u300b<small>\u8de8\u9801\u7248\u578b<\/small><\/figcaption><\/figure>\n  <figure class=\"g-item\"><div class=\"pic\"><span class=\"g-tag\">\u5167\u9801\u6392\u7248<\/span><img src=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/score-01.jpg\" alt=\"\u300a\u5b89\u59ae\u6735\u62c9\u6a02\u8b5c\u96c6\u300b\" decoding=\"async\"><\/div><figcaption>\u300a\u5b89\u59ae\u6735\u62c9\u6a02\u8b5c\u96c6\u300b<small>\u6a02\u8b5c\u6392\u7248<\/small><\/figcaption><\/figure>\n  <div class=\"g-sep\">GRAPHIC<\/div>\n  <figure class=\"g-item\"><div class=\"pic\"><span class=\"g-tag\">\u5e73\u9762\u8a2d\u8a08<\/span><img src=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/graphic-03.jpg\" alt=\"\u5ba2\u5bb6\u5538\u8b20\u5152\u7ae5\u6d3b\u52d5\" decoding=\"async\"><\/div><figcaption>\u5ba2\u5bb6\u5538\u8b20\u5152\u7ae5\u6d3b\u52d5<small>\u63d2\u756b\u30fb\u5e73\u9762\u8a2d\u8a08<\/small><\/figcaption><\/figure>\n  <figure class=\"g-item\"><div class=\"pic\"><span class=\"g-tag\">\u5e73\u9762\u8a2d\u8a08<\/span><img src=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/graphic-04.jpg\" alt=\"\u7f8e\u5bb9\u5de5\u4f5c\u5ba4\u54c1\u724c\u6a6b\u5e45\" decoding=\"async\"><\/div><figcaption>\u7f8e\u5bb9\u5de5\u4f5c\u5ba4\u54c1\u724c\u6a6b\u5e45<small>\u5e73\u9762\u8a2d\u8a08<\/small><\/figcaption><\/figure>\n  <div class=\"g-sep\">SLIDES<\/div>\n  <figure class=\"g-item\"><div class=\"pic\"><span class=\"g-tag\">\u8ab2\u7a0b\u30fb\u7c21\u5831<\/span><img src=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/slide-01.jpg\" alt=\"\u300c\u6e9d\u901a\u8207\u5354\u5546\u300d\u8ab2\u7a0b\" decoding=\"async\"><\/div><figcaption>\u300c\u6e9d\u901a\u8207\u5354\u5546\u300d\u8ab2\u7a0b<small>\u6559\u80b2\u8a13\u7df4\u7c21\u5831<\/small><\/figcaption><\/figure>\n  <figure class=\"g-item\"><div class=\"pic\"><span class=\"g-tag\">\u8ab2\u7a0b\u30fb\u7c21\u5831<\/span><img src=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/slide-02.jpg\" alt=\"\u300c\u8a55\u4f30\u5de5\u5177\u7c21\u4ecb\u300d\u8ab2\u7a0b\" decoding=\"async\"><\/div><figcaption>\u300c\u8a55\u4f30\u5de5\u5177\u7c21\u4ecb\u300d\u8ab2\u7a0b<small>\u6559\u80b2\u8a13\u7df4\u7c21\u5831<\/small><\/figcaption><\/figure>\n  <div class=\"g-sep\">VIDEO<\/div>\n  <figure class=\"g-item\"><div class=\"pic\"><span class=\"g-tag\">\u5f71\u7247\u30fb\u5b57\u5e55<\/span><img src=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/video-01.jpg\" alt=\"\u6a02\u7406\u6559\u5b78\u5f71\u7247\" decoding=\"async\"><\/div><figcaption>\u6a02\u7406\u6559\u5b78\u5f71\u7247<small>\u526a\u63a5\u30fb\u5b57\u5e55\u30fb\u52d5\u756b<\/small><\/figcaption><\/figure>\n  <figure class=\"g-item\"><div class=\"pic\"><span class=\"g-tag\">\u5f71\u7247\u30fb\u5b57\u5e55<\/span><img src=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/video-03.jpg\" alt=\"\u6a02\u7406\u6559\u5b78\u5f71\u7247\" decoding=\"async\"><\/div><figcaption>\u6a02\u7406\u6559\u5b78\u5f71\u7247<small>\u526a\u63a5\u30fb\u5b57\u5e55\u30fb\u52d5\u756b<\/small><\/figcaption><\/figure>\n  <figure class=\"g-item\"><div class=\"pic\"><span class=\"g-tag\">\u5f71\u7247\u30fb\u5b57\u5e55<\/span><img src=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/video-05.jpg\" alt=\"\u6a02\u7406\u6559\u5b78\u5f71\u7247\" decoding=\"async\"><\/div><figcaption>\u6a02\u7406\u6559\u5b78\u5f71\u7247<small>\u526a\u63a5\u30fb\u5b57\u5e55\u30fb\u52d5\u756b<\/small><\/figcaption><\/figure>\n  <figure class=\"g-item\"><div class=\"pic\"><span class=\"g-tag\">\u5f71\u7247\u30fb\u5b57\u5e55<\/span><img src=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/video-07.jpg\" alt=\"\u6a02\u7406\u6559\u5b78\u5f71\u7247\" decoding=\"async\"><\/div><figcaption>\u6a02\u7406\u6559\u5b78\u5f71\u7247<small>\u526a\u63a5\u30fb\u5b57\u5e55\u30fb\u52d5\u756b<\/small><\/figcaption><\/figure>\n <\/div><\/div>\n <div class=\"wrap\"><div class=\"g-hint\"><span class=\"m-only\">\u2190 \u5de6\u53f3\u6ed1\u52d5\u770b\u66f4\u591a\u3000<\/span>\u5b8c\u6574\u4f5c\u54c1\u96c6\u6b61\u8fce\u4f86\u4fe1\u7d22\u53d6<\/div><\/div>\n<\/section>\n\n<section><div class=\"wrap\">\n <div class=\"nums\">\n  <div data-r><b data-count=\"40\">0<\/b><span>\u672c\u4ee5\u4e0a\u66f8\u7c4d\u8a2d\u8a08\u6392\u7248<\/span><\/div>\n  <div data-r><b data-count=\"4\">0<\/b><span>\u7a2e\u670d\u52d9\u4e00\u7ad9\u5b8c\u6210<\/span><\/div>\n  <div data-r><b data-count=\"1\">0<\/b><span>\u500b\u7a97\u53e3\u5f9e\u982d\u5230\u5c3e<\/span><\/div>\n <\/div>\n<\/div><\/section>\n\n<section id=\"process\"><div class=\"wrap\">\n <div class=\"kicker\" data-r>PROCESS<\/div>\n <h2 data-r>\u5408\u4f5c\u6d41\u7a0b\uff0c<em>\u6e05\u6e05\u695a\u695a<\/em><\/h2>\n <p class=\"lead\" data-r>\u6bcf\u4e00\u6b65\u90fd\u5148\u8ddf\u4f60\u78ba\u8a8d\uff0c\u518d\u5f80\u4e0b\u8d70\u3002<\/p>\n <div class=\"steps\" id=\"tbSteps\"><div class=\"bar\"><i id=\"tbBar\"><\/i><\/div>\n  <div class=\"step\" data-r><div class=\"n\">01<\/div><h4>\u8a62\u50f9<\/h4><p>\u544a\u8a34\u6211\u5011\u5167\u5bb9\u3001\u7528\u9014\u3001\u9801\u6578\u6216\u7247\u9577\u3001\u6642\u7a0b\u3002<\/p><\/div>\n  <div class=\"step\" data-r><div class=\"n\">02<\/div><h4>\u5831\u50f9<\/h4><p>\u78ba\u8a8d\u9700\u6c42\u5f8c\uff0c\u63d0\u4f9b\u5831\u50f9\u8207\u6642\u7a0b\u3002<\/p><\/div>\n  <div class=\"step\" data-r><div class=\"n\">03<\/div><h4>\u63d0\u6848<\/h4><p>\u5148\u505a\u7248\u578b\u6216\u6a23\u5f35\uff0c\u98a8\u683c\u78ba\u8a8d\u518d\u5168\u9762\u88fd\u4f5c\u3002<\/p><\/div>\n  <div class=\"step\" data-r><div class=\"n\">04<\/div><h4>\u88fd\u4f5c\u30fb\u4fee\u6539<\/h4><p>\u4f9d\u7d04\u5b9a\u6b21\u6578\u4fee\u6539\uff0c\u5230\u4f60\u6eff\u610f\u70ba\u6b62\u3002<\/p><\/div>\n  <div class=\"step\" data-r><div class=\"n\">05<\/div><h4>\u4ea4\u4ef6<\/h4><p>\u4ea4\u4ed8\u5370\u5237\u6a94\u3001\u539f\u59cb\u6a94\u6216\u5f71\u7247\u6a94\u3002<\/p><\/div>\n <\/div>\n<\/div><\/section>\n\n<section class=\"about\" id=\"about\"><div class=\"wrap cols\">\n <div><div class=\"kicker\" data-r>ABOUT<\/div><div class=\"big\" data-r>\u597d\u8a2d\u8a08\u4e0d\u662f\u88dd\u98fe\uff0c<br>\u662f\u8b93\u5167\u5bb9<em>\u66f4\u5bb9\u6613\u88ab\u61c2<\/em>\u3002<\/div><\/div>\n <div>\n  <p data-r>The Band\u2027\u8b8a\u8a2d\u8a08\u7531\u5c08\u8077\u7f8e\u8853\u7de8\u8f2f\u6210\u7acb\uff0c\u9577\u671f\u70ba\u51fa\u7248\u793e\u8a2d\u8a08\u66f8\u7c4d\u5c01\u9762\u8207\u5167\u9801\u3002\u56e0\u70ba\u672c\u8eab\u4e5f\u5f9e\u4e8b\u97f3\u6a02\u8207\u7dda\u4e0a\u6559\u5b78\uff0c\u719f\u6089\u8ab2\u7a0b\u3001\u5f71\u7247\u8207\u5b57\u5e55\u7684\u88fd\u4f5c\uff0c\u65bc\u662f\u628a\u670d\u52d9\u5ef6\u4f38\u5230\u7c21\u5831\u3001\u6559\u80b2\u8ab2\u7a0b\u8207\u5f71\u97f3\u3002<\/p>\n  <p data-r>\u4e0d\u7ba1\u662f\u4e00\u672c\u66f8\u3001\u4e00\u4efd\u7c21\u5831\u9084\u662f\u4e00\u5802\u8ab2\uff0c\u76ee\u6a19\u90fd\u4e00\u6a23\uff1a\u8b93\u8b80\u8005\u770b\u5f97\u4e0b\u53bb\u3001\u8a18\u5f97\u8d77\u4f86\u3002<\/p>\n <\/div>\n<\/div><\/section>\n\n<section class=\"contact\" id=\"contact\"><div class=\"wrap\">\n <div class=\"kicker\" data-r>CONTACT<\/div>\n <h2 data-r>\u6709\u5167\u5bb9\u60f3<em>\u8b8a<\/em>\u6210\u4f5c\u54c1\u55ce\uff1f<\/h2>\n <p class=\"lead\" data-r>\u5beb\u4fe1\u6216\u79c1\u8a0a\u544a\u8a34\u6211\u5011\u4f60\u7684\u9700\u6c42\uff0c\u901a\u5e38\u4e00\u500b\u5de5\u4f5c\u5929\u5167\u56de\u8986\uff0c\u8a62\u50f9\u4e0d\u6536\u8cbb\u3002<\/p>\n <div class=\"ways\" data-r>\n  <a class=\"btn magnet\" href=\"mailto:dingdongjazz@gmail.com?subject=The%20Band%E8%AE%8A%E8%A8%AD%E8%A8%88%20%E8%A9%A2%E5%83%B9\">Email \u8a62\u50f9 \u2192<\/a>\n  <a class=\"btn ghost\" href=\"https:\/\/www.facebook.com\/profile.php?id=100064068904048\" target=\"_blank\" rel=\"noopener\">Facebook \u79c1\u8a0a<\/a>\n <\/div>\n<\/div><\/section>\n<div class=\"foot\">\u00a9 The Band\u2027\u8b8a\u8a2d\u8a08<\/div>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js\"><\/script>\n<script type=\"module\">\nimport * as THREE from 'https:\/\/cdn.jsdelivr.net\/npm\/three@0.160.0\/build\/three.module.js';\nconst root=document.querySelector('.tb'); const BASE=root.dataset.base;\nconst reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;\nconst mobile=innerWidth<900;\nconst gsap=window.gsap, ST=window.ScrollTrigger;\nif(!gsap||reduce){root.classList.add('no-anim')}\n\/* nav solid *\/\nconst nav=root.querySelector('#tbNav');\naddEventListener('scroll',()=>nav.classList.toggle('solid',scrollY>40),{passive:true});\n\/* rotating words *\/\nconst words=['\u4e00\u672c\u66f8','\u4e00\u4efd\u7c21\u5831','\u4e00\u5802\u8ab2','\u4e00\u652f\u5f71\u7247','\u4e00\u5957\u54c1\u724c'];let wi=0;const wEl=root.querySelector('#tbWord');\nsetInterval(()=>{wi=(wi+1)%words.length;wEl.innerHTML='<span class=\"w\">'+words[wi]+'<\/span>'},2200);\n\/* split h1 *\/\nroot.querySelectorAll('#tbH1 .line').forEach(line=>{\n const walk=n=>{[...n.childNodes].forEach(c=>{if(c.nodeType===3){const f=document.createDocumentFragment();[...c.textContent].forEach(ch=>{const s=document.createElement('span');s.className='ch';s.textContent=ch;f.appendChild(s)});c.replaceWith(f)}else if(c.tagName==='EM'){c.classList.add('ch')}else walk(c)})};walk(line)});\n\/* glow follows mouse *\/\nconst hero=root.querySelector('.hero');\nlet mx=0,my=0;\nhero.addEventListener('pointermove',e=>{const r=hero.getBoundingClientRect();hero.style.setProperty('--mx',(e.clientX-r.left)+'px');hero.style.setProperty('--my',(e.clientY-r.top)+'px');mx=(e.clientX\/innerWidth)*2-1;my=(e.clientY\/innerHeight)*2-1});\n\/* ---------- 3D book ring ---------- *\/\nlet heroP=0;\ntry{\n const canvas=root.querySelector('#tbCanvas');\n const renderer=new THREE.WebGLRenderer({canvas,antialias:true,alpha:true});\n renderer.setPixelRatio(Math.min(devicePixelRatio,mobile?1.25:1.6));\n const scene=new THREE.Scene(); scene.fog=new THREE.Fog(0x0d0d0d,7,17);\n const camera=new THREE.PerspectiveCamera(38,1,.1,100); camera.position.set(0,.4,10);\n const ring=new THREE.Group(); scene.add(ring);\n const loader=new THREE.TextureLoader(); loader.setCrossOrigin('anonymous');\n const COVERS=['front-03c.jpg', 'front-04c.jpg', 'front-05c.jpg', 'front-06c.jpg', 'front-07c.jpg', 'front-08c.jpg', 'front-09c.jpg', 'front-10c.jpg', 'front-11c.jpg', 'front-01d.jpg', 'front-12c.jpg', 'front-13c.jpg', 'front-14c.jpg', 'front-15c.jpg', 'front-16c.jpg', 'front-02c.jpg'];\n const N=COVERS.length, R=mobile?2.7:3.7;\n const books=[];\n for(let i=0;i<N;i++){\n  const tex=loader.load(BASE+COVERS[i]); tex.colorSpace=THREE.SRGBColorSpace; tex.anisotropy=4;\n  const g=new THREE.BoxGeometry(1.25,1.76,.05);\n  const side=new THREE.MeshBasicMaterial({color:0x2a1a24});\n  const back=new THREE.MeshBasicMaterial({color:0x3a1a2c});\n  const front=new THREE.MeshBasicMaterial({map:tex});\n  const m=new THREE.Mesh(g,[side,side,side,side,front,back]);\n  const a=i\/N*Math.PI*2; m.position.set(Math.sin(a)*R,Math.sin(i*1.9)*.45,Math.cos(a)*R); m.rotation.y=a;\n  m.userData={base:m.position.y,ph:i*.7}; ring.add(m); books.push(m);\n }\n ring.rotation.x=-.16; ring.rotation.z=.06;\n \/* particles *\/\n const pg=new THREE.BufferGeometry(); const P=mobile?250:600; const pos=new Float32Array(P*3);\n for(let i=0;i<P*3;i++)pos[i]=(Math.random()-.5)*(i%3===1?10:22);\n pg.setAttribute('position',new THREE.BufferAttribute(pos,3));\n const pts=new THREE.Points(pg,new THREE.PointsMaterial({color:0xff1f8f,size:.035,transparent:true,opacity:.75}));\n scene.add(pts);\n const fit=()=>{const w=hero.clientWidth,h=hero.clientHeight;renderer.setSize(w,h,false);camera.aspect=w\/h;camera.updateProjectionMatrix();const wide=w\/h; ring.position.x=mobile?0:Math.min(4.2,1.6+wide*1.3);ring.position.y=mobile?3.2:0};\n fit(); addEventListener('resize',fit);\n let visible=true; new IntersectionObserver(e=>visible=e[0].isIntersecting).observe(hero);\n let t=0, spin=0; const clock=new THREE.Clock();\n const tick=()=>{requestAnimationFrame(tick); if(!visible)return; const dt=Math.min(clock.getDelta(),.05); t+=dt;\n  spin+= (reduce?0:dt*.22) + heroP*dt*1.6;\n  ring.rotation.y=spin;\n  books.forEach(b=>{b.position.y=b.userData.base+Math.sin(t*1.2+b.userData.ph)*.08});\n  pts.rotation.y=t*.02;\n  camera.position.x+=(mx*.9-camera.position.x)*.05;\n  camera.position.y+=(.4-my*.5-camera.position.y)*.05;\n  camera.position.z=(mobile?13:12.5)-heroP*4;\n  camera.lookAt(ring.position.x*.35,ring.position.y*.6,0);\n  renderer.render(scene,camera)};\n tick();\n}catch(err){console.warn('3D disabled',err)}\n\/* ---------- tilt cards ---------- *\/\nif(!mobile){root.querySelectorAll('.tilt').forEach(c=>{\n c.addEventListener('pointermove',e=>{const r=c.getBoundingClientRect();const x=(e.clientX-r.left)\/r.width,y=(e.clientY-r.top)\/r.height;c.style.transform=`rotateX(${(.5-y)*14}deg) rotateY(${(x-.5)*16}deg) translateZ(10px)`;c.style.setProperty('--gx',x*100+'%');c.style.setProperty('--gy',y*100+'%')});\n c.addEventListener('pointerleave',()=>{c.style.transform=''})})}\n\/* magnetic buttons *\/\nif(!mobile){root.querySelectorAll('.magnet').forEach(b=>{\n b.addEventListener('pointermove',e=>{const r=b.getBoundingClientRect();b.style.transform=`translate(${(e.clientX-r.left-r.width\/2)*.25}px,${(e.clientY-r.top-r.height\/2)*.35}px)`});\n b.addEventListener('pointerleave',()=>{b.style.transform=''})})}\n\/* ---------- GSAP ---------- *\/\nif(gsap&&ST&&!reduce){\n gsap.registerPlugin(ST);\n gsap.to('#tbH1 .ch',{y:0,opacity:1,duration:.9,ease:'power4.out',stagger:.045,delay:.2});\n gsap.from(['.tb .eyebrow','.tb .rot','.tb .hero p.sub','.tb .hero .btn'],{y:24,opacity:0,duration:.8,stagger:.1,delay:.7,ease:'power3.out'});\n ST.create({trigger:hero,start:'top top',end:'bottom top',onUpdate:s=>heroP=s.progress});\n gsap.to('.tb .hero .wrap',{y:-120,opacity:0,ease:'none',scrollTrigger:{trigger:hero,start:'top top',end:'bottom top',scrub:true}});\n \/* reveal + counters (IntersectionObserver\uff1a\u8df3\u8457\u6372\u4e5f\u4e0d\u6703\u6f0f) *\/\n let q=[],qt=null;\n const io=new IntersectionObserver(es=>{es.forEach(e=>{if(!e.isIntersecting)return;io.unobserve(e.target);q.push(e.target);\n   const c=e.target.querySelector('[data-count]'); if(c){const v=+c.dataset.count,o={n:0};gsap.to(o,{n:v,duration:1.6,ease:'power2.out',onUpdate:()=>c.textContent=Math.round(o.n)+(v>=40?'+':'')})}});\n   clearTimeout(qt);qt=setTimeout(()=>{gsap.to(q,{opacity:1,y:0,duration:.9,ease:'power3.out',stagger:.08});q=[]},20)},{rootMargin:'0px 0px -10% 0px'});\n root.querySelectorAll('[data-r]').forEach(el=>io.observe(el));\n \/* process bar *\/\n gsap.to('#tbBar',{[mobile?'scaleY':'scaleX']:1,ease:'none',scrollTrigger:{trigger:'#tbSteps',start:'top 75%',end:'bottom 55%',scrub:true}});\n \/* horizontal gallery *\/\n if(!mobile){\n  const track=root.querySelector('#tbTrack'); const gal=root.querySelector('.gallery');\n  const dist=()=>Math.max(0,track.scrollWidth-innerWidth);\n  gsap.to(track,{x:()=>-dist(),ease:'none',scrollTrigger:{trigger:gal,start:'top top',end:()=>'+='+Math.round(dist()*.55),pin:true,scrub:1,invalidateOnRefresh:true,anticipatePin:1}});\n  addEventListener('load',()=>ST.refresh());\n  root.querySelectorAll('.g-item img').forEach(i=>i.complete||i.addEventListener('load',()=>ST.refresh(),{once:true}));\n }\n}else{root.classList.add('no-anim')}\n<\/script>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>the BAND\u8b8a\u8a2d\u8a08 \u670d\u52d9 \u4f5c\u54c1 \u6d41\u7a0b \u95dc\u65bc \u514d\u8cbb\u8a62\u50f9 BOOK \u00b7 SLIDES \u00b7 COURSE \u00b7 V [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"tb-blank","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-35","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u66f8\u7c4d\u6392\u7248\u30fb\u7c21\u5831\u30fb\u8ab2\u7a0b\u30fb\u5f71\u7247\u8a2d\u8a08 - The Band\u2027\u8b8a\u8a2d\u8a08<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.ddmusic.in\/theband\/\" \/>\n<meta property=\"og:locale\" content=\"zh_TW\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u66f8\u7c4d\u6392\u7248\u30fb\u7c21\u5831\u30fb\u8ab2\u7a0b\u30fb\u5f71\u7247\u8a2d\u8a08 - The Band\u2027\u8b8a\u8a2d\u8a08\" \/>\n<meta property=\"og:description\" content=\"the BAND\u8b8a\u8a2d\u8a08 \u670d\u52d9 \u4f5c\u54c1 \u6d41\u7a0b \u95dc\u65bc \u514d\u8cbb\u8a62\u50f9 BOOK \u00b7 SLIDES \u00b7 COURSE \u00b7 V [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.ddmusic.in\/theband\/\" \/>\n<meta property=\"og:site_name\" content=\"The Band\u2027\u8b8a\u8a2d\u8a08\" \/>\n<meta property=\"article:modified_time\" content=\"2026-11-08T11:07:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/front-03c.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.ddmusic.in\\\/theband\\\/\",\"url\":\"https:\\\/\\\/www.ddmusic.in\\\/theband\\\/\",\"name\":\"\u66f8\u7c4d\u6392\u7248\u30fb\u7c21\u5831\u30fb\u8ab2\u7a0b\u30fb\u5f71\u7247\u8a2d\u8a08 - The Band\u2027\u8b8a\u8a2d\u8a08\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.ddmusic.in\\\/theband\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.ddmusic.in\\\/theband\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.ddmusic.in\\\/theband\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.ddmusic.in\\\/theband\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2026\\\/11\\\/front-03c.jpg\",\"datePublished\":\"2026-11-08T10:12:17+00:00\",\"dateModified\":\"2026-11-08T11:07:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.ddmusic.in\\\/theband\\\/#breadcrumb\"},\"inLanguage\":\"zh-TW\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.ddmusic.in\\\/theband\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-TW\",\"@id\":\"https:\\\/\\\/www.ddmusic.in\\\/theband\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.ddmusic.in\\\/theband\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2026\\\/11\\\/front-03c.jpg\",\"contentUrl\":\"https:\\\/\\\/www.ddmusic.in\\\/theband\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2026\\\/11\\\/front-03c.jpg\",\"width\":416,\"height\":597},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.ddmusic.in\\\/theband\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9801\",\"item\":\"https:\\\/\\\/www.ddmusic.in\\\/theband\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u66f8\u7c4d\u6392\u7248\u30fb\u7c21\u5831\u30fb\u8ab2\u7a0b\u30fb\u5f71\u7247\u8a2d\u8a08\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.ddmusic.in\\\/theband\\\/#website\",\"url\":\"https:\\\/\\\/www.ddmusic.in\\\/theband\\\/\",\"name\":\"The Band\u2027\u8b8a\u8a2d\u8a08\",\"description\":\"\u66f8\u7c4d\u6392\u7248\u30fb\u7c21\u5831\u8a2d\u8a08\u30fb\u6559\u80b2\u8ab2\u7a0b\u88fd\u4f5c\u30fb\u5f71\u7247\u526a\u63a5\u5b57\u5e55\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.ddmusic.in\\\/theband\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"zh-TW\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u66f8\u7c4d\u6392\u7248\u30fb\u7c21\u5831\u30fb\u8ab2\u7a0b\u30fb\u5f71\u7247\u8a2d\u8a08 - The Band\u2027\u8b8a\u8a2d\u8a08","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.ddmusic.in\/theband\/","og_locale":"zh_TW","og_type":"article","og_title":"\u66f8\u7c4d\u6392\u7248\u30fb\u7c21\u5831\u30fb\u8ab2\u7a0b\u30fb\u5f71\u7247\u8a2d\u8a08 - The Band\u2027\u8b8a\u8a2d\u8a08","og_description":"the BAND\u8b8a\u8a2d\u8a08 \u670d\u52d9 \u4f5c\u54c1 \u6d41\u7a0b \u95dc\u65bc \u514d\u8cbb\u8a62\u50f9 BOOK \u00b7 SLIDES \u00b7 COURSE \u00b7 V [&hellip;]","og_url":"https:\/\/www.ddmusic.in\/theband\/","og_site_name":"The Band\u2027\u8b8a\u8a2d\u8a08","article_modified_time":"2026-11-08T11:07:41+00:00","og_image":[{"url":"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/front-03c.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.ddmusic.in\/theband\/","url":"https:\/\/www.ddmusic.in\/theband\/","name":"\u66f8\u7c4d\u6392\u7248\u30fb\u7c21\u5831\u30fb\u8ab2\u7a0b\u30fb\u5f71\u7247\u8a2d\u8a08 - The Band\u2027\u8b8a\u8a2d\u8a08","isPartOf":{"@id":"https:\/\/www.ddmusic.in\/theband\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.ddmusic.in\/theband\/#primaryimage"},"image":{"@id":"https:\/\/www.ddmusic.in\/theband\/#primaryimage"},"thumbnailUrl":"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/front-03c.jpg","datePublished":"2026-11-08T10:12:17+00:00","dateModified":"2026-11-08T11:07:41+00:00","breadcrumb":{"@id":"https:\/\/www.ddmusic.in\/theband\/#breadcrumb"},"inLanguage":"zh-TW","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.ddmusic.in\/theband\/"]}]},{"@type":"ImageObject","inLanguage":"zh-TW","@id":"https:\/\/www.ddmusic.in\/theband\/#primaryimage","url":"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/front-03c.jpg","contentUrl":"https:\/\/www.ddmusic.in\/theband\/wp-content\/uploads\/sites\/3\/2026\/11\/front-03c.jpg","width":416,"height":597},{"@type":"BreadcrumbList","@id":"https:\/\/www.ddmusic.in\/theband\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9801","item":"https:\/\/www.ddmusic.in\/theband\/"},{"@type":"ListItem","position":2,"name":"\u66f8\u7c4d\u6392\u7248\u30fb\u7c21\u5831\u30fb\u8ab2\u7a0b\u30fb\u5f71\u7247\u8a2d\u8a08"}]},{"@type":"WebSite","@id":"https:\/\/www.ddmusic.in\/theband\/#website","url":"https:\/\/www.ddmusic.in\/theband\/","name":"The Band\u2027\u8b8a\u8a2d\u8a08","description":"\u66f8\u7c4d\u6392\u7248\u30fb\u7c21\u5831\u8a2d\u8a08\u30fb\u6559\u80b2\u8ab2\u7a0b\u88fd\u4f5c\u30fb\u5f71\u7247\u526a\u63a5\u5b57\u5e55","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.ddmusic.in\/theband\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"zh-TW"}]}},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"dingdongjazz","author_link":"https:\/\/www.ddmusic.in\/theband\/author\/dingdongjazz\/"},"uagb_comment_info":0,"uagb_excerpt":"the BAND\u8b8a\u8a2d\u8a08 \u670d\u52d9 \u4f5c\u54c1 \u6d41\u7a0b \u95dc\u65bc \u514d\u8cbb\u8a62\u50f9 BOOK \u00b7 SLIDES \u00b7 COURSE \u00b7 V...","_links":{"self":[{"href":"https:\/\/www.ddmusic.in\/theband\/wp-json\/wp\/v2\/pages\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ddmusic.in\/theband\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ddmusic.in\/theband\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ddmusic.in\/theband\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ddmusic.in\/theband\/wp-json\/wp\/v2\/comments?post=35"}],"version-history":[{"count":11,"href":"https:\/\/www.ddmusic.in\/theband\/wp-json\/wp\/v2\/pages\/35\/revisions"}],"predecessor-version":[{"id":99,"href":"https:\/\/www.ddmusic.in\/theband\/wp-json\/wp\/v2\/pages\/35\/revisions\/99"}],"wp:attachment":[{"href":"https:\/\/www.ddmusic.in\/theband\/wp-json\/wp\/v2\/media?parent=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}