{"product_id":"aniket-test-1","title":"aniket-test","description":"\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/FLASH-SALE-12_-desk.webp?v=1782207274\" style=\"width:100%;display:block;\"\u003e\n\n\u003cstyle\u003e\n*{\n    margin:0;\n    padding:0;\n    box-sizing:border-box;\n}\n\n.scroll-section{\n    position:relative;\n    height:1200vh;\n}\n\n.wrapper{\n    position:sticky;\n    top:0;\n    width:100%;\n    height:100vh;\n    overflow:hidden;\n    display:flex;\n    justify-content:center;\n    align-items:center;\n    background:#fff;\n}\n\n.item{\n    position:absolute;\n    left:50%;\n    top:38%;\n    width:180px;\n    text-align:center;\n    transition:all .7s ease;\n}\n\n.item img{\n    width:180px;\n    height:180px;\n    object-fit:contain;\n    display:block;\n    margin:auto;\n}\n\n.item span{\n    display:block;\n    margin-top:10px;\n    font-size:15px;\n    font-weight:600;\n    color:#555;\n}\n\n.center-content{\n    position:absolute;\n    left:700px;\n    top:445px;\n    transform:translate(-50%,-50%);\n    text-align:center;\n    z-index:100;\n}\n\n.center-content img{\n    width:350px;\n    display:block;\n    margin:auto;\n}\n\n.center-content span{\n    display:block;\n    margin-top:15px;\n    font-size:30px;\n    font-weight:700;\n}\n\n\/* Tablet *\/\n@media(max-width:991px){\n\n    .item{\n        width:130px;\n    }\n\n    .item img{\n        width:130px;\n        height:130px;\n    }\n\n    .center-content img{\n        width:270px;\n    }\n\n    .center-content span{\n        font-size:22px;\n    }\n}\n\n\/* Mobile *\/\n@media(max-width:768px){\n\n    .item{\n        width:85px;\n    }\n\n    .item img{\n        width:85px;\n        height:85px;\n    }\n\n    .item span{\n        font-size:11px;\n    }\n\n    .center-content{\n        top:60%;\n    }\n\n    .center-content img{\n        width:180px;\n    }\n\n    .center-content span{\n        font-size:18px;\n    }\n}\n\u003c\/style\u003e\n\n\n\u003cdiv class=\"scroll-section\"\u003e\n\n\u003cdiv class=\"wrapper\"\u003e\n\n    \u003cdiv class=\"item\"\u003e\n        \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Ambient_Sound-1_-_Copy.webp?v=1782218722\"\u003e\n        \u003cspan\u003eTwister 717\u003c\/span\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"item\"\u003e\n        \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Audio_mode-2_-_Copy.webp?v=1782218722\"\u003e\n        \u003cspan\u003eDwOTS 757\u003c\/span\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"item\"\u003e\n        \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Dial_Pad-3_-_Copy.webp?v=1782218722\"\u003e\n        \u003cspan\u003eZink Blue\u003c\/span\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"item\"\u003e\n        \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/EQ-4_-_Copy.webp?v=1782218722\"\u003e\n        \u003cspan\u003eCozy Desk 1\u003c\/span\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"item\"\u003e\n        \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Find_Earbuds-5_-_Copy.webp?v=1782218722\"\u003e\n        \u003cspan\u003eCozy Desk 4\u003c\/span\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"item\"\u003e\n        \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Incoming_Call-6_-_Copy.webp?v=1782218722\"\u003e\n        \u003cspan\u003eCozy Desk 5\u003c\/span\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"item\"\u003e\n        \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Music-7_-_Copy.webp?v=1782218722\"\u003e\n        \u003cspan\u003eCozy Desk 5\u003c\/span\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"item\"\u003e\n        \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Take_Photos-8_-_Copy.webp?v=1782218722\"\u003e\n        \u003cspan\u003eCozy Desk 5\u003c\/span\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"item\"\u003e\n        \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Volume-9_-_Copy.webp?v=1782218722\"\u003e\n        \u003cspan\u003eCozy Desk 5\u003c\/span\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"center-content\"\u003e\n        \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Main.png?v=1782218773\"\u003e\n        \u003cspan\u003eCozy Desk 5\u003c\/span\u003e\n    \u003c\/div\u003e\n\n\u003c\/div\u003e\n\u003c\/div\u003e\n\n\n\u003cscript\u003e\nconst items = document.querySelectorAll(\".item\");\nconst section = document.querySelector(\".scroll-section\");\n\nconst total = items.length;\nconst maxSteps = 14;\n\nfunction render(step){\n\n    let order = [...Array(total).keys()];\n\n    for(let i=0;i\u003cstep;i++){\n        order.unshift(order.pop());\n    }\n\n    order.forEach((itemIndex,pos)=\u003e{\n\n        const item = items[itemIndex];\n\n        let spacing;\n\n        if(window.innerWidth \u003c= 768){\n            spacing = 95;\n        }else{\n            spacing = 180;\n        }\n\n        const x = (pos - (total-1)\/2) * spacing;\n        const y = 0;\n\n        const center = (total-1)\/2;\n        const distance = Math.abs(pos-center);\n\n        let scale = 1.25 - distance*0.1;\n        scale = Math.max(scale,0.65);\n\n        let opacity = 1 - distance*0.15;\n        opacity = Math.max(opacity,0.15);\n\n        item.style.transform =\n        `translate(${x}px,${y}px) scale(${scale})`;\n\n        item.style.opacity = opacity;\n        item.style.zIndex = 100-distance;\n\n    });\n\n}\n\nfunction updateAnimation(){\n\n    const rect = section.getBoundingClientRect();\n\n    if(rect.top \u003c= 0 \u0026\u0026 rect.bottom \u003e= window.innerHeight){\n\n        const progress =\n        -rect.top \/\n        (section.offsetHeight - window.innerHeight);\n\n        let step = Math.floor(progress * maxSteps);\n\n        step = Math.max(0,Math.min(step,maxSteps));\n\n        render(step);\n    }\n\n}\n\nwindow.addEventListener(\"scroll\",updateAnimation);\nwindow.addEventListener(\"resize\",()=\u003erender(0));\n\nrender(0);\n\u003c\/script\u003e","brand":"ACwO","offers":[{"title":"Default Title","offer_id":53805386105150,"sku":null,"price":0.0,"currency_code":"INR","in_stock":false}],"url":"https:\/\/acwo.com\/products\/aniket-test-1","provider":"ACwO","version":"1.0","type":"link"}