{"id":4829,"date":"2025-11-09T05:33:06","date_gmt":"2025-11-09T05:33:06","guid":{"rendered":"https:\/\/gopikadigital.com\/?page_id=4829"},"modified":"2025-11-09T05:38:08","modified_gmt":"2025-11-09T05:38:08","slug":"4829-2","status":"publish","type":"page","link":"https:\/\/gopikadigital.com\/index.php\/4829-2\/","title":{"rendered":"new"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4829\" class=\"elementor elementor-4829\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"aux-parallax-section elementor-element elementor-element-3030588f e-flex e-con-boxed e-con e-parent\" data-id=\"3030588f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2e2b4334 elementor-widget elementor-widget-text-editor\" data-id=\"2e2b4334\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"aux-parallax-section elementor-element elementor-element-4abd0d4 e-flex e-con-boxed e-con e-parent\" data-id=\"4abd0d4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-06cb25b elementor-invisible elementor-widget elementor-widget-html\" data-id=\"06cb25b\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;motion_fx_motion_fx_mouse&quot;:&quot;yes&quot;,&quot;motion_fx_mouseTrack_effect&quot;:&quot;yes&quot;,&quot;motion_fx_tilt_effect&quot;:&quot;yes&quot;,&quot;_animation&quot;:&quot;pulse&quot;,&quot;motion_fx_mouseTrack_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1,&quot;sizes&quot;:[]},&quot;motion_fx_tilt_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:4,&quot;sizes&quot;:[]}}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  .upload-wrapper {\r\n    text-align: center;\r\n    margin: 20px auto;\r\n  }\r\n\r\n  #preview {\r\n    display: center;\r\n    max-width: 500px;\r\n    margin-top: 20px;\r\n    border-radius: 10px;\r\n    box-shadow: 0 10px 20px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  input[type=\"file\"] {\r\n    padding: 50px;\r\n    border: 2px dashed #ccc;\r\n    cursor: pointer;\r\n  }\r\n<\/style>\r\n\r\n<div class=\"upload-wrapper\">\r\n  <h3>Upload Your Image For 3d Tilt Animation \ud83d\udc47<\/h3>\r\n  <input type=\"file\" id=\"imgInput\" accept=\"image\/*\" \/>\r\n  <br \/>\r\n  <img id=\"preview\" class=\"elementor-animation-pulse\" \/>\r\n<\/div>\r\n\r\n<script>\r\n  document.getElementById('imgInput').addEventListener('change', function(e) {\r\n    const reader = new FileReader();\r\n    reader.onload = function(event) {\r\n      const img = document.getElementById('preview');\r\n      img.src = event.target.result;\r\n      img.style.display = 'block';\r\n    };\r\n    reader.readAsDataURL(e.target.files[0]);\r\n  });\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"aux-parallax-section elementor-element elementor-element-58bf436 e-con-full e-flex e-con e-parent\" data-id=\"58bf436\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7ee62d9 elementor-widget elementor-widget-html\" data-id=\"7ee62d9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- HTML -->\r\n<div id=\"main-container\">\r\n    <div class=\"heading\">\r\n        <h1>Move your mouse fast over this Black Space!<\/h1>\r\n    <\/div>\r\n<\/div>\r\n\r\n<div id=\"upload-section\">\r\n    <input type=\"file\" id=\"image-upload\" accept=\"image\/*\" multiple>\r\n    <p id=\"upload-info\">Upload up to 14 images to see your animation!<\/p>\r\n<\/div>\r\n\r\n<!-- GSAP Library -->\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/gsap.min.js\"><\/script>\r\n\r\n<style>\r\n#main-container{\r\n    position: relative;\r\n    height: 80vh; \/* Adjust as needed *\/\r\n    overflow: hidden;\r\n    background: #111;\r\n}\r\n\r\n.heading h1 {\r\n    color: #fff;\r\n    font-size: clamp(1.7rem, 4.2vw, 6rem);\r\n    font-weight: 400;\r\n    text-shadow: 0 0 10px #00b3ff, 0 0 20px #00b3ff;\r\n    text-align: center;\r\n    margin: 2rem 0;\r\n}\r\n\r\n.image-trail {\r\n    position: absolute;\r\n    inset: 0;\r\n    width: 240px;\r\n    height: 180px;\r\n    object-fit: cover;\r\n    pointer-events: none;\r\n    opacity: 0;\r\n    border-radius: 8px;\r\n}\r\n\r\n#upload-section {\r\n    text-align: center;\r\n    margin-top: 1rem;\r\n    color: #fff;\r\n}\r\n\r\n#upload-info {\r\n    margin-top: 0.5rem;\r\n    font-size: 1rem;\r\n    color: #00b3ff;\r\n}\r\n\r\n@media (max-width: 900px) {\r\n    .image-trail {\r\n        width: 160px;\r\n        height: 120px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<script>\r\nconst container = document.getElementById('main-container');\r\nlet images = []; \/\/ array for uploaded images\r\nlet currentImageIndex = 0;\r\nlet lastX = 0;\r\nlet lastY = 0;\r\nlet distanceThreshold = window.innerWidth < 900 ? 100 : 180;\r\n\r\n\/\/ Handle resize\r\nwindow.addEventListener(\"resize\", () => {\r\n    distanceThreshold = window.innerWidth < 900 ? 100 : 180;\r\n});\r\n\r\n\/\/ Mouse move\r\nwindow.addEventListener(\"mousemove\", (e) => {\r\n    const dx = e.clientX - lastX;\r\n    const dy = e.clientY - lastY;\r\n    const distance = Math.sqrt(dx * dx + dy * dy);\r\n\r\n    if (distance > distanceThreshold) {\r\n        createTrail(e.clientX, e.clientY);\r\n        lastX = e.clientX;\r\n        lastY = e.clientY;\r\n    }\r\n});\r\n\r\n\/\/ Create trail function\r\nfunction createTrail(x, y) {\r\n    if (images.length === 0) return; \/\/ No images uploaded\r\n\r\n    const img = document.createElement(\"img\");\r\n    img.classList.add(\"image-trail\");\r\n    img.src = images[currentImageIndex];\r\n    container.appendChild(img);\r\n\r\n    currentImageIndex = (currentImageIndex + 1) % images.length;\r\n\r\n    gsap.set(img, {\r\n        x: x,\r\n        y: y,\r\n        scale: 0,\r\n        opacity: 0,\r\n        rotation: gsap.utils.random(-20, 20),\r\n    });\r\n\r\n    gsap.to(img, {\r\n        scale: 1,\r\n        opacity: 1,\r\n        duration: 0.4,\r\n        ease: \"power2.out\",\r\n    });\r\n\r\n    gsap.to(img, {\r\n        scale: 0.2,\r\n        opacity: 0,\r\n        duration: 1,\r\n        delay: 0.3,\r\n        ease: \"power2.in\",\r\n        onComplete: () => img.remove(),\r\n    });\r\n}\r\n\r\n\/\/ Image upload\r\nconst uploadInput = document.getElementById('image-upload');\r\nconst uploadInfo = document.getElementById('upload-info');\r\n\r\nuploadInput.addEventListener('change', (e) => {\r\n    const files = Array.from(e.target.files).slice(0, 14); \/\/ Limit to 14\r\n    images = [];\r\n\r\n    if (files.length === 0) {\r\n        uploadInfo.textContent = \"No images selected.\";\r\n        return;\r\n    }\r\n\r\n    files.forEach(file => {\r\n        const reader = new FileReader();\r\n        reader.onload = (event) => {\r\n            images.push(event.target.result);\r\n        }\r\n        reader.readAsDataURL(file);\r\n    });\r\n\r\n    uploadInfo.textContent = `${files.length} image(s) uploaded! Move your mouse to see the trail.`;\r\n});\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"aux-parallax-section elementor-element elementor-element-0d3bb53 e-flex e-con-boxed e-con e-parent\" data-id=\"0d3bb53\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-281ea39 elementor-widget elementor-widget-shortcode\" data-id=\"281ea39\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">[tarot name=\"tarot_free\"]<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"aux-parallax-section elementor-element elementor-element-ede7090 e-con-full e-flex e-con e-parent\" data-id=\"ede7090\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-01951b5 elementor-widget elementor-widget-html\" data-id=\"01951b5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div style=\"position: relative; width: 100%; padding-bottom: 66.67%;\">\r\n  <iframe src=\"https:\/\/www.gameflare.com\/embed\/racing-go\/\" \r\n          style=\"position: absolute; top:0; left:0; width:100%; height:100%;\"\r\n          frameborder=\"0\" scrolling=\"no\" allowfullscreen><\/iframe>\r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"aux-parallax-section elementor-element elementor-element-8c783e5 e-flex e-con-boxed e-con e-parent\" data-id=\"8c783e5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\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>Upload Your Image For 3d Tilt Animation \ud83d\udc47 Move your mouse fast over this Black Space! Upload up to 14 images to see your animation! [tarot name=&#8221;tarot_free&#8221;]<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4829","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gopikadigital.com\/index.php\/wp-json\/wp\/v2\/pages\/4829","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gopikadigital.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gopikadigital.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gopikadigital.com\/index.php\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/gopikadigital.com\/index.php\/wp-json\/wp\/v2\/comments?post=4829"}],"version-history":[{"count":6,"href":"https:\/\/gopikadigital.com\/index.php\/wp-json\/wp\/v2\/pages\/4829\/revisions"}],"predecessor-version":[{"id":4847,"href":"https:\/\/gopikadigital.com\/index.php\/wp-json\/wp\/v2\/pages\/4829\/revisions\/4847"}],"wp:attachment":[{"href":"https:\/\/gopikadigital.com\/index.php\/wp-json\/wp\/v2\/media?parent=4829"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}