{"id":3496,"date":"2025-10-19T12:17:16","date_gmt":"2025-10-19T12:17:16","guid":{"rendered":"https:\/\/jacobs-tech.com\/?page_id=3496"},"modified":"2025-11-03T09:59:08","modified_gmt":"2025-11-03T09:59:08","slug":"entertainment-engagement","status":"publish","type":"page","link":"https:\/\/suffix.com\/ar\/entertainment-engagement","title":{"rendered":"\u0627\u0644\u062a\u0631\u0641\u064a\u0647 \u0648\u0627\u0644\u062a\u0641\u0627\u0639\u0644"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3496\" class=\"elementor elementor-3496\" wpc-filter-elementor-widget=\"1\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e2d00bd e-con-full e-flex e-con e-parent\" data-id=\"e2d00bd\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_ob_column_hoveranimator&quot;:&quot;no&quot;,&quot;_ob_glider_is_slider&quot;:&quot;no&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f5570d9 elementor-widget__width-inherit ob-has-background-overlay elementor-widget elementor-widget-html\" data-id=\"f5570d9\" data-element_type=\"widget\" data-settings=\"{&quot;_ob_perspektive_use&quot;:&quot;no&quot;,&quot;_ob_widget_stalker_use&quot;:&quot;no&quot;,&quot;_ob_poopart_use&quot;:&quot;yes&quot;,&quot;_ob_shadough_use&quot;:&quot;no&quot;,&quot;_ob_allow_hoveranimator&quot;:&quot;no&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Fixed Background Parallax Scroll<\/title>\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    <script>\r\n        tailwind.config = {\r\n            theme: {\r\n                extend: {\r\n                    screens: {\r\n                        'md': '768px',   \/\/ Tablet\r\n                        'lg': '1025px',  \/\/ Laptop\r\n                        'xl': '1367px',  \/\/ Desktop (1367px and up)\r\n                    },\r\n                    fontFamily: {\r\n                        'favorit': ['favorit-regular', 'sans-serif'],\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    <\/script>\r\n    <style>\r\n        @font-face {\r\n            font-family: 'favorit-regular';\r\n            src: url('https:\/\/suffix.com\/wp-content\/themes\/jacobstech\/fonts\/favorit-regular.woff2') format('woff2'),\r\n                 url('https:\/\/suffix.com\/wp-content\/themes\/jacobstech\/fonts\/favorit-regular.woff') format('woff');\r\n            font-weight: normal;\r\n            font-style: normal;\r\n            font-display: swap;\r\n        }\r\n\r\n        body {\r\n            overflow-x: hidden;\r\n            background-color: #0d0d0d;\r\n            font-family: 'favorit-regular', sans-serif;\r\n        }\r\n\r\n        #parallax-bg { \r\n            position: absolute;\r\n            top: 0; \r\n            left: 0; \r\n            width: 100%; \r\n            height: 100%; \r\n            z-index: 1; \r\n            overflow: hidden; \r\n            background-color: #000; \r\n        }\r\n\r\n        #bg-image {\r\n            background-image: url('https:\/\/suffix.com\/wp-content\/uploads\/2025\/09\/Entertainment-Engagement.jpg');\r\n            background-size: cover;\r\n            background-position: center center;\r\n            width: 100%;\r\n            height: 100%;\r\n            will-change: filter, opacity;\r\n        }\r\n\r\n        #bg-overlay {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background-color: #000000;\r\n            opacity: 0.5;\r\n            will-change: opacity;\r\n        }\r\n\r\n        #hero-content-scroll-area {\r\n            position: relative;\r\n            z-index: 10;\r\n            min-height: 101vh; \r\n            background-color: transparent;\r\n        }\r\n\r\n        #parallax-grid {\r\n            position: sticky; \r\n            top: 0; \r\n            height: 100vh; \r\n            display: flex;\r\n            align-items: center;\r\n        }\r\n\r\n        #motion-content.no-transform {\r\n            transform: none !important;\r\n        }\r\n\r\n        \/* Ensure right column content doesn't overflow *\/\r\n        #motion-content {\r\n            max-height: 70vh;\r\n            overflow: visible;\r\n        }\r\n\r\n        @media (min-width: 1025px) {\r\n            #motion-content {\r\n                max-height: 60vh;\r\n            }\r\n        }\r\n\r\n        @media (min-width: 1367px) {\r\n            #motion-content {\r\n                max-height: 55vh;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body class=\"bg-gray-900\">\r\n\r\n    <!-- 1. FIXED PARALLAX BACKGROUND -->\r\n    <div id=\"parallax-bg\">\r\n        <div id=\"bg-image\">\r\n            <div id=\"bg-overlay\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- 2. SCROLLABLE HERO CONTENT AREA -->\r\n    <div id=\"hero-content-scroll-area\">\r\n        \r\n        <!-- The Grid that houses the two text columns -->\r\n        <div id=\"parallax-grid\" class=\"container mx-auto max-w-7xl px-[30px] lg:px-[50px]\">\r\n            <div id=\"grid-content\" class=\"w-full grid grid-cols-1 gap-[60px] mb-[3vh] md:mb-[4vh] \r\n                                        lg:grid-cols-[45%_55%] lg:gap-12 lg:mb-[10vh] \r\n                                        xl:grid-cols-[40%_60%] xl:gap-16 xl:mb-[12vh]\">\r\n                \r\n                <!-- LEFT COLUMN -->\r\n                <div id=\"left-column\" class=\"flex items-center pt-[120px] lg:pt-0 lg:h-screen z-20 lg:pr-8\">\r\n                    <h1 class=\"text-white uppercase font-bold leading-none tracking-[0.05em] m-0 font-favorit\r\n                               text-[36px] \r\n                               md:text-[52px] \r\n                               lg:text-[52px] \r\n                               xl:text-[64px]\">\r\n                    Entertainment\r\n                    &\r\n                    Engagement\r\n                    <\/h1>\r\n                <\/div>\r\n\r\n                <!-- RIGHT COLUMN -->\r\n                <div id=\"motion-content\" class=\"text-white self-auto lg:self-end font-favorit\r\n                                                text-[18px] leading-[1.6] font-normal\r\n                                                md:text-[24px] md:leading-[1.5]\r\n                                                lg:text-[22px] lg:leading-[1.5]\r\n                                                xl:text-[26px] xl:leading-[1.5]\r\n                                                max-w-none lg:max-w-full xl:max-w-[95%]\">\r\n                    <p class=\"mb-5 lg:mb-[25px] xl:mb-[30px]\">\r\n                       We believe that entertainment is what transforms an event into an unforgettable experience. We design customized entertainment programs that keep audiences engaged, energized, and inspired from start to finish.\r\n                    <\/p>\r\n                    <p class=\"mb-5 lg:mb-[25px] xl:mb-[30px]\">\r\n                       Our offerings range from live performances, cultural shows, and music acts to interactive zones, family attractions, and fan engagement activities\u2014all delivered with a strong connection to sports at their core. We also excel in creating village activations and immersive audience engagements that extend the event experience beyond the main stage.\r\n                    <\/p>\r\n                     <p class=\"mb-0\">\r\n\t\t\t\t\t From high-energy shows to family-friendly experiences, our entertainment is crafted to captivate spectators, enhance participation, and give event owners peace of mind knowing that every aspect of their event is being handled with creativity and care.\r\n\t\t\t\t\t \r\n\t\t\t\t\t <\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- JAVASCRIPT SCROLL LOGIC -->\r\n    <script>\r\n        const MOTION_SPEED = 1.4;\r\n        const VIEWPORT_EFFECT_END_RATIO = 0.65;\r\n        const MAX_BLUR = 12;\r\n        const MAX_OVERLAY_OPACITY = 0.95;\r\n\r\n        const heroWrapper = document.getElementById('hero-content-scroll-area');\r\n        const bgImage = document.getElementById('bg-image');\r\n        const bgOverlay = document.getElementById('bg-overlay');\r\n        const motionContent = document.getElementById('motion-content');\r\n\r\n        const calculateEffectRatio = (rectTop) => {\r\n            const viewportHeight = window.innerHeight;\r\n            const effectRange = viewportHeight * VIEWPORT_EFFECT_END_RATIO; \r\n            const scrollDistance = -rectTop; \r\n            let ratio = scrollDistance \/ effectRange;\r\n            return Math.max(0, Math.min(1, ratio));\r\n        };\r\n\r\n        const isMobileViewport = () => {\r\n            return window.innerWidth <= 1024;\r\n        };\r\n\r\n        const handleScrollEffects = () => {\r\n            if (!heroWrapper || !bgImage || !bgOverlay || !motionContent) {\r\n                return;\r\n            }\r\n\r\n            const rect = heroWrapper.getBoundingClientRect();\r\n            const scrollRatio = calculateEffectRatio(rect.top);\r\n\r\n            \/\/ Background Effects (Blur and Overlay)\r\n            const currentBlur = scrollRatio * MAX_BLUR;\r\n            bgImage.style.filter = `blur(${currentBlur}px)`;\r\nconst baseOpacity = 0.85; \/\/ always visible from start\r\nconst currentOpacity = baseOpacity + (scrollRatio * (MAX_OVERLAY_OPACITY - baseOpacity));\r\n\r\n            \/\/const currentOpacity = scrollRatio * MAX_OVERLAY_OPACITY;\r\n            \/\/bgOverlay.style.opacity = currentOpacity;\r\n\r\n            \/\/ Content Motion Effect (Right Column Lift)\r\n            if (!isMobileViewport()) {\r\n                const totalMovementRange = window.innerHeight * MOTION_SPEED;\r\n                const currentLift = scrollRatio * totalMovementRange;\r\n                \r\n                motionContent.style.transition = 'transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1)'; \r\n                motionContent.style.transform = `translateY(-${currentLift}px)`;\r\n                motionContent.style.willChange = 'transform';\r\n                motionContent.classList.remove('no-transform');\r\n            } else {\r\n                motionContent.style.transform = 'none';\r\n                motionContent.style.willChange = 'auto';\r\n                motionContent.classList.add('no-transform');\r\n            }\r\n        };\r\n\r\n        window.addEventListener('scroll', handleScrollEffects);\r\n        window.addEventListener('resize', handleScrollEffects);\r\n        \r\n        document.addEventListener('DOMContentLoaded', () => {\r\n            handleScrollEffects();\r\n        });\r\n    <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6bb2e18 e-con-full e-flex e-con e-parent\" data-id=\"6bb2e18\" data-element_type=\"container\" data-settings=\"{&quot;_ob_use_container_extras&quot;:&quot;no&quot;,&quot;_ob_column_hoveranimator&quot;:&quot;no&quot;,&quot;_ob_glider_is_slider&quot;:&quot;no&quot;,&quot;_ob_column_has_pseudo&quot;:&quot;no&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cad3eea ob-has-background-overlay elementor-widget elementor-widget-spacer\" data-id=\"cad3eea\" data-element_type=\"widget\" data-settings=\"{&quot;_ob_spacerat_use&quot;:&quot;no&quot;,&quot;_ob_perspektive_use&quot;:&quot;no&quot;,&quot;_ob_widget_stalker_use&quot;:&quot;no&quot;,&quot;_ob_poopart_use&quot;:&quot;yes&quot;,&quot;_ob_shadough_use&quot;:&quot;no&quot;,&quot;_ob_allow_hoveranimator&quot;:&quot;no&quot;}\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7453d5a ob-harakiri-inherit ob-has-background-overlay elementor-widget elementor-widget-heading\" data-id=\"7453d5a\" data-element_type=\"widget\" data-settings=\"{&quot;_ob_use_harakiri&quot;:&quot;yes&quot;,&quot;_ob_harakiri_writing_mode&quot;:&quot;inherit&quot;,&quot;_ob_harakiri_text_clip&quot;:&quot;none&quot;,&quot;_ob_perspektive_use&quot;:&quot;no&quot;,&quot;_ob_widget_stalker_use&quot;:&quot;no&quot;,&quot;_ob_poopart_use&quot;:&quot;yes&quot;,&quot;_ob_shadough_use&quot;:&quot;no&quot;,&quot;_ob_allow_hoveranimator&quot;:&quot;no&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Some of Our Work<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d49cf0d ob-has-background-overlay elementor-widget elementor-widget-spacer\" data-id=\"d49cf0d\" data-element_type=\"widget\" data-settings=\"{&quot;_ob_spacerat_use&quot;:&quot;no&quot;,&quot;_ob_perspektive_use&quot;:&quot;no&quot;,&quot;_ob_widget_stalker_use&quot;:&quot;no&quot;,&quot;_ob_poopart_use&quot;:&quot;yes&quot;,&quot;_ob_shadough_use&quot;:&quot;no&quot;,&quot;_ob_allow_hoveranimator&quot;:&quot;no&quot;}\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\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>Fixed Background Parallax Scroll Entertainment &#038; Engagement We believe that entertainment is what transforms an event into an unforgettable experience. We design customized entertainment programs&hellip;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"_eb_attr":"","_customify_content_layout":"full-stretched","_customify_sidebar":"content","_customify_page_header_display":"default","_customify_disable_header":"","_customify_disable_header_top":"","_customify_disable_header_main":"","_customify_disable_header_bottom":"","_customify_disable_page_title":"","_customify_disable_content_vertical_padding":"","_customify_disable_footer_top":"","_customify_disable_footer_main":"","_customify_disable_footer_bottom":"","_customify_breadcrumb_display":"","_customify_header_transparent_display":"","footnotes":""},"class_list":["post-3496","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/suffix.com\/ar\/wp-json\/wp\/v2\/pages\/3496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/suffix.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/suffix.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/suffix.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/suffix.com\/ar\/wp-json\/wp\/v2\/comments?post=3496"}],"version-history":[{"count":6,"href":"https:\/\/suffix.com\/ar\/wp-json\/wp\/v2\/pages\/3496\/revisions"}],"predecessor-version":[{"id":3555,"href":"https:\/\/suffix.com\/ar\/wp-json\/wp\/v2\/pages\/3496\/revisions\/3555"}],"wp:attachment":[{"href":"https:\/\/suffix.com\/ar\/wp-json\/wp\/v2\/media?parent=3496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}