{"id":1707,"date":"2025-09-18T12:31:20","date_gmt":"2025-09-18T12:31:20","guid":{"rendered":"https:\/\/x-i.fr\/?page_id=1707"},"modified":"2025-09-18T18:19:10","modified_gmt":"2025-09-18T18:19:10","slug":"test-2","status":"publish","type":"page","link":"https:\/\/x-i.fr\/zh\/test-2\/","title":{"rendered":"La Ballade des Notes de Musique"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1707\" class=\"elementor elementor-1707\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3478816 e-con-full e-flex e-con e-parent\" data-id=\"3478816\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-20b925a elementor-widget elementor-widget-html\" data-id=\"20b925a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n  \/* === \u4ec5\u7b2c\u4e8c\u5bb9\u5668\u8303\u56f4 === *\/\n  #hero2{width:100vw;margin-left:calc(50% - 50vw);margin:0;padding:0;position:relative;z-index:2;}\n  #hero2 *{box-sizing:border-box}\n\n  \/* PC\uff1a\u5de6\u53f3\u53cc\u680f + 100vh + \u80cc\u666f fixed *\/\n  #hero2 .hero{\n    display:grid;grid-template-columns:1fr 1fr;\n    height:100vh;min-height:100svh;overflow:hidden;position:relative;\n  }\n  #hero2 .hero-img{\n    background-size:cover;background-position:center;background-repeat:no-repeat;\n    background-attachment:fixed;\n  }\n  #hero2 .hero-text{\n    background:#fff;display:flex;align-items:center;justify-content:center;\n    text-align:center;padding:40px;\n  }\n  #hero2 .hero-inner{max-width:640px;margin:0 20px}\n  #hero2 .hero-title{font-size:60px;line-height:1.1;margin:0 0 16px}\n  #hero2 .hero-desc{font-size:16px;line-height:1.6;margin:0}\n\n  \/* PC \u4ec5\u7b2c\u4e8c\u7ec4\u5de6\u6587\u53f3\u56fe *\/\n  @media (min-width:769px){\n    #hero2 .hero--invert .hero-img{order:2}\n    #hero2 .hero--invert .hero-text{order:1}\n  }\n\n  \/* =========== \u624b\u673a\u7aef\uff1a\u4e0a\u56fe(70vh)\u4e0b\u6587\uff1bfixed\u5c42+\u88c1\u5207\uff08\u65e0\u4f38\u7f29\uff09 =========== *\/\n  :root{ --vh2: 100vh; --vh70_2: 70vh; } \/* JS \u4f1a\u5199\u6210 px\uff1b\u6eda\u52a8\u4e2d\u4e0d\u66f4\u65b0 *\/\n  @media (max-width:768px){\n    #hero2{overscroll-behavior:contain; touch-action:pan-y;}\n    #hero2 .hero{display:block;height:auto;min-height:0;overflow:visible}\n    #hero2 .hero-title{font-size:28px}\n    #hero2 .hero-text{padding:28px 20px;position:relative;z-index:3}\n\n    \/* \u56fe\u7247\u5360\u4f4d\uff1a\u4f18\u5148\u7528 70lvh\uff08\u4e0d\u968f\u5730\u5740\u680f\u53d8\uff09\uff0c\u518d\u515c\u5e95\u50cf\u7d20\u53d8\u91cf *\/\n    #hero2 .hero-img{\n      height:var(--vh70_2); height:70lvh;\n      background:none !important; position:relative; z-index:2; margin:0; padding:0;\n    }\n\n    \/* \u6bcf\u7ec4\u81ea\u5df1\u7684\u56fa\u5b9a\u5c42\uff1a\u59cb\u7ec8\u5b58\u5728\uff0c\u53ea\u88c1\u5207\uff0c\u4e0d\u663e\u9690\u4e0d\u7f29\u653e *\/\n    #hero2 .mfix{\n      position:fixed; left:0; top:0; width:100vw;\n      height:var(--vh2); height:100lvh;           \/* lvh \u4f18\u5148\uff0c\u515c\u5e95\u50cf\u7d20 *\/\n      background-size:cover; background-position:center; background-repeat:no-repeat;\n      pointer-events:none; z-index:1;\n      --clip-top2: var(--vh2); --clip-bottom2: var(--vh2);\n      clip-path: inset(var(--clip-top2) 0 var(--clip-bottom2) 0);\n      -webkit-clip-path: inset(var(--clip-top2) 0 var(--clip-bottom2) 0);\n      will-change: clip-path; backface-visibility:hidden; transform:translateZ(0);\n    }\n\n    \/* \u9632\u6b62\u4e3b\u9898\u7236\u5c42\u5f71\u54cd\uff0c\u4ec5\u672c\u5bb9\u5668\u751f\u6548 *\/\n    #hero2{overflow:visible !important; transform:none !important; filter:none !important; perspective:none !important;}\n  }\n\n  \/* \u6e05\u7406 WP \u9ed8\u8ba4\u5916\u8fb9\u8ddd\uff0c\u907f\u514d\u4e0e\u4e0a\u4e00\u5c4f\u89c6\u9891\u4e4b\u95f4\u767d\u7f1d *\/\n  #hero2, #hero2 section, #hero2 .wp-block-group{margin:0;padding:0}\n<\/style>\n\n<section id=\"hero2\">\n  <!-- \u7b2c1\u7ec4\uff08PC \u5de6\u56fe\u53f3\u6587\uff1bMobile \u4e0a\u56fe\u4e0b\u6587\uff09 -->\n  <div class=\"hero\">\n    <div class=\"hero-img\"\n      data-mobile-bg=\"https:\/\/x-i.fr\/wp-content\/uploads\/2025\/09\/6adb43_1d096977563c4a849217a10a5e4dc258mv2-1.avif\"\n      style=\"background-image:url('https:\/\/x-i.fr\/wp-content\/uploads\/2025\/09\/6adb43_1d096977563c4a849217a10a5e4dc258mv2-1.avif');\">\n      <div class=\"mfix\"><\/div>\n    <\/div>\n    <div class=\"hero-text\">\n      <div class=\"hero-inner\">\n        <h2 class=\"hero-title\">L'embuscade<\/h2>\n        <p class=\"hero-desc\">Dans l\u2019espace, un groupe de soldats attend une embuscade qui n\u2019arrive jamais.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- \u7b2c2\u7ec4\uff08PC \u5de6\u6587\u53f3\u56fe\uff1bMobile \u4e0a\u56fe\u4e0b\u6587\uff09 -->\n  <div class=\"hero hero--invert\">\n    <div class=\"hero-img\"\n      data-mobile-bg=\"https:\/\/x-i.fr\/wp-content\/uploads\/2025\/09\/6adb43_4d12e15479e144e8be3c4bd2bc3d7a5cmv2.avif\"\n      style=\"background-image:url('https:\/\/x-i.fr\/wp-content\/uploads\/2025\/09\/6adb43_4d12e15479e144e8be3c4bd2bc3d7a5cmv2.avif');\">\n      <div class=\"mfix\"><\/div>\n    <\/div>\n    <div class=\"hero-text\">\n      <div class=\"hero-inner\">\n        <h2 class=\"hero-title\">L'embuscade<\/h2>\n        <p class=\"hero-desc\">Dans l\u2019espace, un groupe de soldats attend une embuscade qui n\u2019arrive jamais.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n\/* \u7b2c\u4e8c\u5bb9\u5668\u4e13\u7528\uff1a  \n   - \u9501\u5b9a\u89c6\u53e3\u9ad8\u5ea6\u5230\u50cf\u7d20\uff08\u53ea\u5728\u975e\u6eda\u52a8\u65f6\u66f4\u65b0\uff09\uff0c\u914d\u5408 70lvh\/100lvh \u6d88\u9664\u201c\u6536\u7f29\u201d\uff1b  \n   - \u6bcf\u7ec4 fixed \u5c42\u59cb\u7ec8\u5b58\u5728\uff1b\u53ea\u5b9e\u65f6\u88c1\u5207\u5230\u5404\u81ea\u5bb9\u5668\u77e9\u5f62\uff1b  \n   - touchstart\/move \u9884\u66f4\u65b0\uff0c\u907f\u514d\u8fdb\u5165\u65f6\u6296\u4e00\u4e0b\uff1b  \n   - seam \u9632\u7f1d\u8865\u507f\u6d88\u9664\u767d\u8fb9\u3002 *\/\n(function(){\n  var MQ = window.matchMedia('(max-width: 768px)');\n  if(!MQ.matches) return;\n\n  var root = document.documentElement.style;\n  var vvp = ('visualViewport' in window) ? window.visualViewport : null;\n\n  var vhPx = 0, scrolling = false;\n  function lockVH(force){\n    if(scrolling && !force) return; \/\/ \u6eda\u52a8\u4e2d\u4e0d\u6539\uff0c\u907f\u514d\u4f38\u7f29\n    var h = vvp ? Math.round(vvp.height) : window.innerHeight;\n    if(!force && Math.abs(h - vhPx) < 6) return; \/\/ \u5ffd\u7565\u5730\u5740\u680f\u7ec6\u5fae\u6296\u52a8\n    vhPx = h;\n    root.setProperty('--vh2', vhPx + 'px');\n    root.setProperty('--vh70_2', Math.round(vhPx * 0.7) + 'px');\n  }\n\n  var holders = [].slice.call(document.querySelectorAll('#hero2 .hero-img'));\n  var layers = holders.map(function(h){\n    var f = h.querySelector('.mfix');\n    if(!f) return null;\n    var url = h.getAttribute('data-mobile-bg') || '';\n    if(url) f.style.backgroundImage = \"url('\"+url+\"')\";\n    \/\/ \u521d\u59cb\u88c1\u6ee1\u9690\u85cf\uff0c\u540e\u9762\u4f1a\u7acb\u523b\u66f4\u65b0\n    f.style.setProperty('--clip-top2', (vhPx||window.innerHeight) + 'px');\n    f.style.setProperty('--clip-bottom2', (vhPx||window.innerHeight) + 'px');\n    return f;\n  });\n\n  var seam = 3; \/\/ px\uff1a\u88c1\u5207\u9632\u7f1d\u8865\u507f\uff08\u5982\u4ecd\u89c1\u767d\u7ebf\uff0c\u53ef\u6539\u6210 4 \u6216 5\uff09\n  function clamp(v,a,b){return v<a?a:(v>b?b:v);}\n\n  function updateClip(){\n    var H = vvp ? Math.round(vvp.height) : window.innerHeight; \/\/ \u7528\u5f53\u524d\u89c6\u53e3\u8ba1\u7b97\u88c1\u5207\uff0coverlay\u9ad8\u5ea6\u7531 lvh\/px \u9501\u5b9a\n    for(var i=0;i<holders.length;i++){\n      var el = holders[i], fix = layers[i]; if(!el||!fix) continue;\n      var r = el.getBoundingClientRect();\n      var top = r.top, bottom = r.bottom;\n      var clipTop = clamp(top, 0, H);\n      var clipBottom = clamp(H - bottom, 0, H);\n      \/\/ \u9632\u7f1d\u8865\u507f\uff1a\u4e0a\u4e0b\u5404\u5403\u6389 seam\n      clipTop = Math.max(0, clipTop - seam);\n      clipBottom = Math.max(0, clipBottom - seam);\n      fix.style.setProperty('--clip-top2', Math.round(clipTop) + 'px');\n      fix.style.setProperty('--clip-bottom2', Math.round(clipBottom) + 'px');\n    }\n  }\n\n  \/\/ \u521d\u59cb\u5316\uff1a\u5148\u9501\u9ad8\uff0c\u518d\u66f4\u65b0\u88c1\u5207\uff08\u4e24\u5e27\uff0c\u907f\u514d\u9996\u7ed8\u9519\u4f4d\uff09\n  requestAnimationFrame(function(){\n    lockVH(true);\n    requestAnimationFrame(function(){\n      updateClip();\n    });\n  });\n\n  \/\/ \u8fdb\u5165\u6eda\u52a8\u524d\u5c31\u66f4\u65b0\u88c1\u5207\uff0c\u907f\u514d\u201c\u5148\u52a8\u4e00\u4e0b\u201d\n  window.addEventListener('touchstart', function(){ scrolling=true; updateClip(); }, {passive:true});\n  window.addEventListener('touchmove',  function(){ updateClip(); }, {passive:true});\n\n  \/\/ \u6eda\u52a8\u65f6\u4ec5\u88c1\u5207\uff08\u4e0d\u6539\u9ad8\u5ea6\uff09\n  var ticking=false;\n  function rafUpd(){ if(!ticking){ requestAnimationFrame(function(){ ticking=false; updateClip(); }); ticking=true; } }\n  window.addEventListener('scroll', rafUpd, {passive:true});\n\n  \/\/ \u7ed3\u675f\u6eda\u52a8\u540e\u518d\u89e3\u9501\u9ad8\u5ea6\u5e76\u590d\u7b97\n  function endScroll(){ scrolling=false; setTimeout(function(){ lockVH(true); updateClip(); }, 80); }\n  window.addEventListener('touchend', endScroll, {passive:true});\n  window.addEventListener('touchcancel', endScroll, {passive:true});\n\n  \/\/ \u65b9\u5411\/\u7a97\u53e3\u53d8\u5316\uff1a\u975e\u6eda\u52a8\u72b6\u6001\u624d\u66f4\u65b0\u50cf\u7d20\u9ad8\u5ea6\n  window.addEventListener('resize', function(){ if(!scrolling){ lockVH(true); updateClip(); } });\n  if(vvp){\n    vvp.addEventListener('resize', function(){ if(!scrolling){ lockVH(true); updateClip(); } });\n    vvp.addEventListener('scroll', rafUpd);\n  }\n})();\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":"<p>X- i \u6210\u5353 | Cr\u00e9ateur visuel Animation &amp; Production compl\u00e8te -bas\u00e9 \u00e0 Paris L&#8217;embuscade Dans l\u2019espace, un groupe de soldats attend une embuscade qui n\u2019arrive jamais. L&#8217;embuscade Dans l\u2019espace, un groupe de soldats attend une embuscade qui n\u2019arrive jamais.<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"pgc_sgb_lightbox_settings":"","footnotes":""},"class_list":["post-1707","page","type-page","status-publish","hentry"],"blocksy_meta":{"vertical_spacing_source":"inherit","content_area_spacing":"none","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/x-i.fr\/zh\/wp-json\/wp\/v2\/pages\/1707","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/x-i.fr\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/x-i.fr\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/x-i.fr\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/x-i.fr\/zh\/wp-json\/wp\/v2\/comments?post=1707"}],"version-history":[{"count":106,"href":"https:\/\/x-i.fr\/zh\/wp-json\/wp\/v2\/pages\/1707\/revisions"}],"predecessor-version":[{"id":1848,"href":"https:\/\/x-i.fr\/zh\/wp-json\/wp\/v2\/pages\/1707\/revisions\/1848"}],"wp:attachment":[{"href":"https:\/\/x-i.fr\/zh\/wp-json\/wp\/v2\/media?parent=1707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}