{"id":5281,"date":"2024-04-25T16:17:48","date_gmt":"2024-04-25T08:17:48","guid":{"rendered":"https:\/\/alleneden.com\/?page_id=5281"},"modified":"2026-04-13T12:29:14","modified_gmt":"2026-04-13T04:29:14","slug":"%e9%98%b2%e4%bc%aa%e6%9f%a5%e8%af%a2","status":"publish","type":"page","link":"https:\/\/alleneden.com\/index.php\/%e9%98%b2%e4%bc%aa%e6%9f%a5%e8%af%a2\/","title":{"rendered":"\u9632\u4f2a\u67e5\u8be2"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5281\" class=\"elementor elementor-5281\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6309f53 e-con-full e-flex e-con e-parent\" data-id=\"6309f53\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dd111c6 elementor-widget elementor-widget-html\" data-id=\"dd111c6\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- 1. \u6837\u5f0f\u5b9a\u4e49 - \u4fdd\u6301\u4e00\u81f4 -->\r\n<style>\r\n  \/* === \u56fa\u5b9a\u9875\u9762\uff0c\u7981\u6b62\u4e0a\u4e0b\u79fb\u52a8\uff0c\u9690\u85cf\u6eda\u52a8\u6761 === *\/\r\n  html, body {\r\n    margin: 0;\r\n    padding: 0;\r\n    width: 100vw;\r\n    height: 100vh;\r\n    overscroll-behavior: none;\r\n  }\r\n  \r\n  ::-webkit-scrollbar {\r\n    display: none;\r\n  }\r\n  html {\r\n    scrollbar-width: none;\r\n    -ms-overflow-style: none;\r\n  }\r\n\r\n  .dgb-section {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n    font-family: 'Helvetica Neue', Arial, sans-serif;\r\n    background-color: #000;\r\n    color: #fff;\r\n    overflow-x: hidden;\r\n  }\r\n  .dgb-wrapper {\r\n    position: relative;\r\n    height: 100vh;\r\n    width: 100vw;\r\n    display: flex;\r\n    align-items: center;\r\n    overflow: hidden;\r\n  }\r\n  \r\n  .dgb-text-panel {\r\n    width: 80%;\r\n    height: 100%;\r\n    position: relative;\r\n    z-index: 10;\r\n    padding-left: 8vw;\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n  .dgb-text-item {\r\n    position: absolute;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    opacity: 0;\r\n    pointer-events: none;\r\n    width: 85%;\r\n    max-width: 1000px;\r\n    padding-right: 40px;\r\n  }\r\n  \r\n  .dgb-subtitle {\r\n    font-size: clamp(10px, 1vw, 14px);\r\n    font-weight: 700;\r\n    letter-spacing: 0.15em;\r\n    text-transform: uppercase;\r\n    margin-bottom: 2.5vh;\r\n    color: #fff;\r\n  }\r\n  \r\n  .dgb-title {\r\n    font-size: 42px;\r\n    font-weight: 800;\r\n    line-height: 1.2;\r\n    margin: 0;\r\n    letter-spacing: -0.02em;\r\n    color: #fff;\r\n  }\r\n\r\n  .dgb-title-en {\r\n    display: inline-block;\r\n    font-size: 24px;\r\n    font-weight: 400;\r\n    line-height: 1.4;\r\n    margin-top: 15px; \r\n    color: rgba(255, 255, 255, 0.85); \r\n  }\r\n\r\n  .dgb-wheel-panel {\r\n    position: absolute;\r\n    left: 105%;\r\n    top: 50%;\r\n    width: 0;\r\n    height: 0;\r\n    z-index: 5;\r\n  }\r\n  \r\n  .dgb-wheel-item {\r\n    position: absolute;\r\n    width: 42vw;\r\n    max-width: 980px;\r\n    height: auto; \r\n    overflow: hidden;\r\n    box-shadow: 0 30px 60px rgba(0,0,0,0.6);\r\n    opacity: 0; \r\n  }\r\n\r\n  .dgb-wheel-item img {\r\n    width: 100%;\r\n    height: auto;\r\n    display: block;\r\n    object-fit: contain;\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .dgb-text-panel {\r\n      width: 100%;\r\n      padding-left: 5vw;\r\n      padding-right: 5vw;\r\n    }\r\n    .dgb-text-item {\r\n      top: 25%;\r\n    }\r\n    .dgb-wheel-panel {\r\n      left: 110%;\r\n      top: 75%;\r\n    }\r\n    .dgb-wheel-item {\r\n      width: 60vw;\r\n    }\r\n    .dgb-title {\r\n      font-size: 28px;\r\n    }\r\n    .dgb-title-en {\r\n      font-size: 18px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- 2. HTML \u7ed3\u6784 - \u6587\u672c\u5df2\u7559\u7a7a\uff0c\u56fe\u7247\u5df2\u914d\u7f6e -->\r\n<div class=\"dgb-section\" id=\"dgb-scroll-container\">\r\n  <div class=\"dgb-wrapper\">\r\n    \r\n    <div class=\"dgb-text-panel\">\r\n      <!-- \u7b2c\u4e00\u9879\u6587\u672c -->\r\n\r\n    <\/div>\r\n\r\n    <!-- \u56fe\u7247\u9762\u677f - \u5bf9\u5e94\u4e09\u5f20\u9632\u4f2a\u914d\u56fe -->\r\n    <div class=\"dgb-wheel-panel\">\r\n      <div class=\"dgb-wheel-item\">\r\n        <img decoding=\"async\" src=\"https:\/\/alleneden.com\/wp-content\/uploads\/2026\/04\/\u9632\u4f2a1.png\" alt=\"Anti-Counterfeiting 1\">\r\n      <\/div>\r\n      <div class=\"dgb-wheel-item\">\r\n        <img decoding=\"async\" src=\"https:\/\/alleneden.com\/wp-content\/uploads\/2026\/04\/\u9632\u4f2a2.png\" alt=\"Anti-Counterfeiting 2\">\r\n      <\/div>\r\n      <div class=\"dgb-wheel-item\">\r\n        <img decoding=\"async\" src=\"https:\/\/alleneden.com\/wp-content\/uploads\/2026\/04\/\u9632\u4f2a3.png\" alt=\"Anti-Counterfeiting 3\">\r\n      <\/div>\r\n    <\/div>\r\n    \r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- 3. \u811a\u672c - \u4fdd\u6301\u4e00\u81f4 -->\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n\r\n<script>\r\n  function initDgbAnimation() {\r\n    if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {\r\n      setTimeout(initDgbAnimation, 100);\r\n      return;\r\n    }\r\n    \r\n    gsap.registerPlugin(ScrollTrigger);\r\n\r\n    const wheelPanel = document.querySelector('.dgb-wheel-panel');\r\n    const wheelItems = document.querySelectorAll('.dgb-wheel-item');\r\n    const textItems = document.querySelectorAll('.dgb-text-item');\r\n    \r\n    let radius = window.innerWidth * 0.45; \r\n    const angleStep = 45; \r\n    \r\n    if (window.innerWidth <= 768) {\r\n      radius = window.innerWidth * 0.7;\r\n    }\r\n\r\n    wheelItems.forEach((item, i) => {\r\n      let angleDeg = 180 - (i * angleStep);\r\n      let angleRad = angleDeg * Math.PI \/ 180;\r\n      \r\n      let x = radius * Math.cos(angleRad);\r\n      let y = radius * Math.sin(angleRad);\r\n      \r\n      let startOpacity = i === 0 ? 1 : 0.2;\r\n      let startScale = i === 0 ? 1 : 0.8;\r\n      \r\n      gsap.set(item, { x: x, y: y, xPercent: -50, yPercent: -50, opacity: startOpacity, scale: startScale });\r\n    });\r\n\r\n    \/\/ \u521d\u59cb\u663e\u793a\u7b2c\u4e00\u9879\r\n    textItems.forEach((text, i) => {\r\n      gsap.set(text, { opacity: i === 0 ? 1 : 0 });\r\n      text.style.pointerEvents = i === 0 ? 'auto' : 'none';\r\n    });\r\n\r\n    const totalRotation = (wheelItems.length - 1) * angleStep;\r\n\r\n    ScrollTrigger.create({\r\n      trigger: \"#dgb-scroll-container\",\r\n      start: \"top top\",\r\n      end: \"+=\" + (wheelItems.length * 600), \r\n      pin: true,\r\n      scrub: 0,\r\n      \r\n      onUpdate: (self) => {\r\n        const progress = self.progress;\r\n        const currentRotation = progress * totalRotation;\r\n        gsap.set(wheelPanel, { rotation: currentRotation });\r\n        \r\n        const exactIndex = progress * (wheelItems.length - 1);\r\n        \r\n        wheelItems.forEach((item, i) => {\r\n          let dist = Math.abs(exactIndex - i);\r\n          let scale = 1 - Math.min(dist * 0.2, 0.25); \r\n          let opacity = 1 - Math.min(dist * 0.8, 0.9);\r\n          \r\n          gsap.set(item, { \r\n            rotation: -currentRotation,\r\n            scale: scale,\r\n            opacity: opacity\r\n          });\r\n        });\r\n\r\n        textItems.forEach((text, i) => {\r\n          let dist = Math.abs(exactIndex - i);\r\n          let textOpacity = 1 - Math.min(dist * 1.5, 1);\r\n          gsap.set(text, { opacity: textOpacity });\r\n          text.style.pointerEvents = textOpacity > 0.1 ? 'auto' : 'none';\r\n        });\r\n      }\r\n    });\r\n  }\r\n\r\n  if (document.readyState === 'complete' || document.readyState === 'interactive') {\r\n    initDgbAnimation();\r\n  } else {\r\n    window.addEventListener('DOMContentLoaded', initDgbAnimation);\r\n  }\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":35,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-5281","page","type-page","status-publish","hentry"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":5}},"_links":{"self":[{"href":"https:\/\/alleneden.com\/index.php\/wp-json\/wp\/v2\/pages\/5281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alleneden.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/alleneden.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/alleneden.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alleneden.com\/index.php\/wp-json\/wp\/v2\/comments?post=5281"}],"version-history":[{"count":42,"href":"https:\/\/alleneden.com\/index.php\/wp-json\/wp\/v2\/pages\/5281\/revisions"}],"predecessor-version":[{"id":8311,"href":"https:\/\/alleneden.com\/index.php\/wp-json\/wp\/v2\/pages\/5281\/revisions\/8311"}],"wp:attachment":[{"href":"https:\/\/alleneden.com\/index.php\/wp-json\/wp\/v2\/media?parent=5281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}