{"id":1031,"date":"2026-06-28T20:02:22","date_gmt":"2026-06-28T18:02:22","guid":{"rendered":"https:\/\/www.blakmedia.cl\/?page_id=1031"},"modified":"2026-06-28T20:02:58","modified_gmt":"2026-06-28T18:02:58","slug":"test-3","status":"publish","type":"page","link":"https:\/\/www.blakmedia.cl\/index.php\/test-3\/","title":{"rendered":"test 3"},"content":{"rendered":"<div class=\"et_pb_section_0 et_pb_section et_section_regular et_flex_section\">\n<div class=\"et_pb_row_0 et_pb_row et_flex_row\">\n<div class=\"et_pb_column_0 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24\">\n<div class=\"et_pb_code_0 et_pb_code et_pb_module\"><div class=\"et_pb_code_inner\"><section class=\"bm-sequence-section\">\n  <canvas id=\"bm-sequence\"><\/canvas>\n\n  <div class=\"bm-sequence-text\">\n    <span>Image Sequence<\/span>\n    <strong>Scrubbing<\/strong>\n  <\/div>\n<\/section>\n\n<style>\n.bm-sequence-section{\n  position:relative;\n  height:400vh;\n  background:#050505;\n}\n\n#bm-sequence{\n  position:sticky;\n  top:0;\n  width:100%;\n  height:100vh;\n  display:block;\n}\n\n.bm-sequence-text{\n  position:fixed;\n  inset:0;\n  display:flex;\n  flex-direction:column;\n  align-items:center;\n  justify-content:center;\n  pointer-events:none;\n  z-index:5;\n  color:#fff;\n  font-family: \"Playfair Display\", serif;\n  font-size:clamp(48px,8vw,130px);\n  line-height:.9;\n  text-align:center;\n  text-shadow:0 0 25px rgba(255,255,255,.75);\n}\n\n.bm-sequence-text strong{\n  font-weight:400;\n}\n\n@media(max-width:768px){\n  .bm-sequence-section{\n    height:300vh;\n  }\n\n  .bm-sequence-text{\n    font-size:clamp(42px,13vw,80px);\n  }\n}\n<\/style>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n  const canvas = document.getElementById(\"bm-sequence\");\n  const context = canvas.getContext(\"2d\");\n  const section = document.querySelector(\".bm-sequence-section\");\n\n  const frameCount = 90;\n\n  const currentFrame = index => (\n    `\/wp-content\/uploads\/sequence\/frame-${String(index).padStart(4, \"0\")}.jpg`\n  );\n\n  const images = [];\n  const sequence = {\n    frame: 0\n  };\n\n  canvas.width = window.innerWidth;\n  canvas.height = window.innerHeight;\n\n  for (let i = 1; i <= frameCount; i++) {\n    const img = new Image();\n    img.src = currentFrame(i);\n    images.push(img);\n  }\n\n  function render() {\n    const img = images[sequence.frame];\n    if (!img) return;\n\n    context.clearRect(0, 0, canvas.width, canvas.height);\n\n    const canvasRatio = canvas.width \/ canvas.height;\n    const imgRatio = img.width \/ img.height;\n\n    let drawWidth, drawHeight, x, y;\n\n    if (imgRatio > canvasRatio) {\n      drawHeight = canvas.height;\n      drawWidth = img.width * (canvas.height \/ img.height);\n      x = (canvas.width - drawWidth) \/ 2;\n      y = 0;\n    } else {\n      drawWidth = canvas.width;\n      drawHeight = img.height * (canvas.width \/ img.width);\n      x = 0;\n      y = (canvas.height - drawHeight) \/ 2;\n    }\n\n    context.drawImage(img, x, y, drawWidth, drawHeight);\n  }\n\n  images[0].onload = render;\n\n  window.addEventListener(\"scroll\", () => {\n    const sectionTop = section.offsetTop;\n    const scrollY = window.scrollY;\n    const sectionHeight = section.offsetHeight - window.innerHeight;\n\n    let progress = (scrollY - sectionTop) \/ sectionHeight;\n    progress = Math.max(0, Math.min(1, progress));\n\n    sequence.frame = Math.floor(progress * (frameCount - 1));\n\n    requestAnimationFrame(render);\n  });\n\n  window.addEventListener(\"resize\", () => {\n    canvas.width = window.innerWidth;\n    canvas.height = window.innerHeight;\n    render();\n  });\n\n});\n<\/script><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-template-blank.php","meta":{"footnotes":""},"class_list":["post-1031","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.blakmedia.cl\/index.php\/wp-json\/wp\/v2\/pages\/1031","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blakmedia.cl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.blakmedia.cl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.blakmedia.cl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blakmedia.cl\/index.php\/wp-json\/wp\/v2\/comments?post=1031"}],"version-history":[{"count":4,"href":"https:\/\/www.blakmedia.cl\/index.php\/wp-json\/wp\/v2\/pages\/1031\/revisions"}],"predecessor-version":[{"id":1035,"href":"https:\/\/www.blakmedia.cl\/index.php\/wp-json\/wp\/v2\/pages\/1031\/revisions\/1035"}],"wp:attachment":[{"href":"https:\/\/www.blakmedia.cl\/index.php\/wp-json\/wp\/v2\/media?parent=1031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}