{"id":164,"date":"2026-07-16T09:09:23","date_gmt":"2026-07-16T09:09:23","guid":{"rendered":"https:\/\/taughtyouso.com\/?page_id=164"},"modified":"2026-07-16T09:28:56","modified_gmt":"2026-07-16T09:28:56","slug":"start-english","status":"publish","type":"page","link":"https:\/\/taughtyouso.com\/?page_id=164&lang=en","title":{"rendered":"Start &#8211; English"},"content":{"rendered":"\n<script>\n\n\/**\n * WordPress Camera Sweep Background Script - Version 13 (Seamless Crossfade & Dimmed Background)\n * Seamless media crossfade without transparency drop in the peephole.\n * Background brightness dimmed to 50% for maximum contrast.\n * (c) Taughtyouso UG (haftungsbeschr\u00e4nkt) 2026\n *\/\n\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    \/\/ 1. CONFIGURATION\n    \/\/ IMPORTANT: Enter the URL to your transparent mask PNG here!\n    const maskImageURL = 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/06\/outlined-sw-large-transparent.png';\n\n    const mediaList = [\n        { type: 'image', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/Gemini_Generated_Image_1k7v1r1k7v1r1k7v-scaled.jpg' },\n        { type: 'video', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/Sanfte_Wellen_Video_Generiert.mp4' },\n        { type: 'image', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/Gemini_Generated_Image_qe5hv2qe5hv2qe5h-1-scaled.jpg' },\n        { type: 'image', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/Gemini_Generated_Image_i790qmi790qmi790-scaled.jpg' },\n        { type: 'image', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/Gemini_Generated_Image_a1aemda1aemda1ae-scaled.jpg' },\n        { type: 'video', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/Video_202604062334.mp4' },\n        { type: 'video', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/Ba-86-A-4-E-9-5-Ccb-4-D-1-D-A-64-A-8286-B-9-B-82835.mp4' },\n        { type: 'video', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/100-C-83-E-0-7838-4-E-21-8573-Bdd-99031934-C.mp4' },\n        { type: 'video', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/Video_Loop_Sanfte_Wellen_am_Strand.mp4' },\n        { type: 'video', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/E-64661-E-8-A-0-E-4-4-Cd-4-8-Ac-0-7-F-6-Dd-282-Bbee.mp4' },\n        { type: 'image', url: 'https:\/\/taughtyouso.com\/wp-content\/uploads\/2026\/04\/Gemini_Generated_Image_qe5hv2qe5hv2qe5h-scaled.jpg' }\n    ];\n\n    const textLines = [\n        \"Hey you!\",\n        \"What are you doing here?\",\n        \"This is just another company homepage\",\n        \"The homepage of taughtyouso\",\n        \"They run the quiz platform quoozle.com\",\n        \"It's good \u2013 yes \u2013 really good!\",\n        \"But otherwise there is nothing to see here\",\n        \"Don't waste your life\",\n        \"Keep surfing!\",\n        \"(...)\",\n        \"(..)\",\n        \"(.)\",\n        \"Hey, you're still here!\",\n        \"First of all: I dedicate this website to Tatjana, whom I met in St. Barth two years ago.\",\n        \"Jokes aside. That was of course a quote from 39.90 or 99 Francs.\",\n        \"Don't know it? You should check it out\",\n        \"At least if you have anything to do with advertising\",\n        \"You should always start by lightening the mood with a stupid joke\",\n        \"But the real question is of course still:\",\n        \"What do you really want here?\",\n        \"You probably know me personally from real life?\",\n        \"Or is it really something business-related?\",\n        \"If so: Try email or LinkedIn\",\n        \"If you want to find out about Quoozle \u2013 check out Products above\",\n        \"Honestly: Right now there's obviously only Quoozle here \u2013 but whatever\",\n        \"It's really good \u2013 at least I think so\",\n        \"But of course I'll find out what interests you anyway\",\n        \"Because I track it here. But don't worry \u2013 I do it myself\",\n        \"With Matomo \u2013 so this is not part of some global conspiracy\",\n        \"Promise. (Though of course everyone would say that)\",\n        \"But now \u2013 it's been an honor!\",\n        \"See you soon!\",\n        \"Oh yeah \u2013 my name is Nils Peters\"\n    ];\n\n    const sweepDuration = 8000; \n    const fadeDuration = 1500;  \n    const textDisplayDuration = 5200; \n    const textPauseDuration = 1800;   \n\n    \/\/ 2. CREATE CONTAINER\n    const container = document.createElement('div');\n    container.id = 'camera-sweep-container';\n    Object.assign(container.style, {\n        position: 'fixed', top: '0', left: '0', width: '100vw', height: '100vh', zIndex: '-1', overflow: 'hidden', backgroundColor: '#ffffff'\n    });\n    document.body.appendChild(container);\n\n    \/\/ VIGNETTE\n    const vignette = document.createElement('div');\n    vignette.id = 'sweep-vignette';\n    Object.assign(vignette.style, {\n        position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', zIndex: '20', pointerEvents: 'none',\n        background: 'radial-gradient(circle, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%)'\n    });\n    container.appendChild(vignette);\n\n    \/\/ TEXT ELEMENT\n    const textOverlay = document.createElement('div');\n    textOverlay.id = 'sweep-text-overlay';\n    container.appendChild(textOverlay);\n\n    \/\/ 3. CSS DESIGN RULES (WITH 50% BRIGHTNESS FILTER)\n    const style = document.createElement('style');\n    style.innerHTML = `\n        #camera-sweep-container .sweep-layer {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            opacity: 0;\n            transition: opacity ${fadeDuration}ms ease-in-out;\n            will-change: opacity;\n        }\n        \n        \/* BACKGROUND LAYER DIMMED TO 50% BRIGHTNESS *\/\n        #camera-sweep-container .sweep-layer.base {\n            filter: brightness(0.5);\n        }\n        #camera-sweep-container .sweep-layer.base.active { opacity: 1; z-index: 1; }\n        \n        \/* OVERLAY CONTAINER WITH 75% MASK *\/\n        #camera-sweep-container .sweep-layer.overlay {\n            isolation: isolate; \n            transform: translateZ(0); \n            -webkit-transform: translateZ(0);\n            backface-visibility: hidden;\n            -webkit-backface-visibility: hidden;\n            \n            -webkit-mask: url('${maskImageURL}') center \/ 75% no-repeat;\n            mask: url('${maskImageURL}') center \/ 75% no-repeat;\n            -webkit-mask-image: url('${maskImageURL}');\n            mask-image: url('${maskImageURL}');\n            -webkit-mask-size: 75%;\n            mask-size: 75%;\n            -webkit-mask-position: center;\n            mask-position: center;\n            -webkit-mask-repeat: no-repeat;\n            mask-repeat: no-repeat;\n            -webkit-mask-type: alpha;\n            mask-type: alpha;\n        }\n        \n        \/* THE SELECTED VIDEO IN THE PEEPHOLE IS 100% OPAQUE *\/\n        #camera-sweep-container .sweep-layer.overlay.active { opacity: 1; z-index: 2; }\n        \n        #camera-sweep-container .sweep-media {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            display: block;\n            will-change: transform, filter;\n        }\n\n        \/* TEXT STYLING *\/\n        #sweep-text-overlay {\n            position: absolute; top: 50%; left: 50%; z-index: 25; color: #ffffff;\n            font-family: var(--wp--preset--font-family--heading), \"Arial Black\", Impact, sans-serif;\n            font-weight: 900; text-transform: uppercase; font-size: 1.9rem; line-height: 1.2; text-align: center;\n            text-shadow: 3px 3px 15px rgba(0, 0, 0, 0.75), 0 0 8px rgba(0, 0, 0, 0.4); width: 90%; max-width: 800px;\n            pointer-events: none; transform: translate(-50%, -50%); will-change: transform;\n        }\n        @media (max-width: 768px) { #sweep-text-overlay { font-size: 1.15rem; } }\n\n        .ydkj-puff-wrapper { display: inline-block; width: 100%; opacity: 0; will-change: transform, opacity, filter; }\n        .ydkj-active { animation: ydkjLinearDrift ${textDisplayDuration}ms linear forwards; }\n        .ydkj-active .ydkj-puff-wrapper { animation: ydkjPuffExplosion ${textDisplayDuration}ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }\n\n        @keyframes ydkjLinearDrift {\n            0% { transform: translate(calc(-50% + var(--startX)), calc(-50% + var(--startY))); }\n            100% { transform: translate(calc(-50% + var(--endX)), calc(-50% + var(--endY))); }\n        }\n        @keyframes ydkjPuffExplosion {\n            0% { opacity: 0; transform: scale(0.7); filter: blur(5px); }\n            15% { opacity: 1; transform: scale(1); filter: blur(0px); }\n            78% { opacity: 1; transform: scale(1.02); filter: blur(0px); }\n            100% { opacity: 0; transform: scale(3.0); filter: blur(12px); }\n        }\n\n        body, .site, #page, .site-content, #content, .main-container, .elementor-page {\n            background-color: transparent !important;\n        }\n    `;\n    document.head.appendChild(style);\n\n    \/\/ 4. MOTION MATRICES\n    const baseDesktopMovements = [\n        { start: 'scale(1.5) rotate(6deg) translate(-4%, -1%)', startBlur: '4px', end: 'scale(1.3) rotate(-3deg) translate(4%, 1%)', endBlur: '0px' },\n        { start: 'scale(1.3) rotate(-5deg) translate(4%, -2%)', startBlur: '0px', end: 'scale(1.6) rotate(4deg) translate(-4%, 2%)', endBlur: '5px' },\n        { start: 'scale(1.6) rotate(4deg) translate(-2%, 2%)', startBlur: '3px', end: 'scale(1.3) rotate(-4deg) translate(2%, -2%)', endBlur: '0px' },\n        { start: 'scale(1.4) rotate(-4deg) translate(-4%, 0%)', startBlur: '0px', end: 'scale(1.5) rotate(5deg) translate(4%, 0%)', endBlur: '3px' }\n    ];\n    const baseMobileMovements = [\n        { start: 'scale(2.1) rotate(6deg) translate(-18%, -1%)', startBlur: '5px', end: 'scale(1.9) rotate(-4deg) translate(18%, 2%)', endBlur: '0px' },\n        { start: 'scale(2.0) rotate(-5deg) translate(16%, -2%)', startBlur: '0px', end: 'scale(2.2) rotate(5deg) translate(-16%, 2%)', endBlur: '6px' },\n        { start: 'scale(2.2) rotate(4deg) translate(-20%, 1%)', startBlur: '4px', end: 'scale(1.9) rotate(-5deg) translate(20%, -1%)', endBlur: '0px' },\n        { start: 'scale(1.9) rotate(-6deg) translate(18%, -2%)', startBlur: '0px', end: 'scale(2.1) rotate(6deg) translate(-18%, 2%)', endBlur: '4px' }\n    ];\n\n    const overlayDesktopMovements = [\n        { start: 'scale(2.2) rotate(-3deg) translate(4%, 1%)', startBlur: '0px', end: 'scale(2.5) rotate(6deg) translate(-4%, -1%)', endBlur: '4px' },\n        { start: 'scale(2.5) rotate(4deg) translate(-4%, 2%)', startBlur: '5px', end: 'scale(2.0) rotate(-5deg) translate(4%, -2%)', endBlur: '0px' },\n        { start: 'scale(2.0) rotate(-4deg) translate(2%, -2%)', startBlur: '0px', end: 'scale(2.4) rotate(4deg) translate(-2%, 2%)', endBlur: '3px' },\n        { start: 'scale(2.3) rotate(5deg) translate(4%, 0%)', startBlur: '3px', end: 'scale(2.1) rotate(-4deg) translate(-4%, 0%)', endBlur: '0px' }\n    ];\n    const overlayMobileMovements = [\n        { start: 'scale(2.9) rotate(-4deg) translate(18%, 2%)', startBlur: '0px', end: 'scale(3.2) rotate(6deg) translate(-18%, -1%)', endBlur: '5px' },\n        { start: 'scale(3.2) rotate(5deg) translate(-16%, 2%)', startBlur: '6px', end: 'scale(2.8) rotate(-5deg) translate(16%, -2%)', endBlur: '0px' },\n        { start: 'scale(2.8) rotate(-5deg) translate(20%, -1%)', startBlur: '0px', end: 'scale(3.2) rotate(4deg) translate(-20%, 1%)', endBlur: '4px' },\n        { start: 'scale(3.1) rotate(6deg) translate(-18%, 2%)', startBlur: '4px', end: 'scale(2.8) rotate(-6deg) translate(18%, -2%)', endBlur: '0px' }\n    ];\n\n    let currentBaseIdx = -1, currentOverlayIdx = -1;\n    let baseMovementCounter = 0, overlayMovementCounter = 0;\n    let activeBaseLayer = null, activeOverlayLayer = null;\n\n    \/\/ 5. MEDIA ENGINE (SEAMLESS OVERLAP CROSSFADE FIX)\n    function executeSweep(isOverlay) {\n        if (mediaList.length === 0) return;\n\n        let chosenIdx;\n        if (!isOverlay) {\n            let nextBase = currentBaseIdx;\n            while (nextBase === currentBaseIdx || nextBase === currentOverlayIdx) {\n                nextBase = Math.floor(Math.random() * mediaList.length);\n            }\n            currentBaseIdx = nextBase; chosenIdx = currentBaseIdx;\n        } else {\n            let nextOverlay = currentOverlayIdx;\n            while (nextOverlay === currentOverlayIdx || nextOverlay === currentBaseIdx) {\n                nextOverlay = Math.floor(Math.random() * mediaList.length);\n            }\n            currentOverlayIdx = nextOverlay; chosenIdx = currentOverlayIdx;\n        }\n\n        const mediaItem = mediaList[chosenIdx];\n        const layer = document.createElement('div');\n        layer.className = `sweep-layer ${isOverlay ? 'overlay' : 'base'}`;\n        \n        let mediaEl;\n        if (mediaItem.type === 'video') {\n            mediaEl = document.createElement('video'); mediaEl.src = mediaItem.url;\n            mediaEl.autoplay = true; mediaEl.loop = true; mediaEl.muted = true; mediaEl.playsInline = true; \n            mediaEl.className = 'sweep-media';\n        } else {\n            mediaEl = document.createElement('img'); mediaEl.src = mediaItem.url; mediaEl.className = 'sweep-media';\n        }\n        \n        mediaEl.style.transition = `transform ${sweepDuration}ms linear, filter ${sweepDuration}ms ease-out`;\n        \n        const isMobile = window.innerWidth <= 768;\n        \n        \/\/ Assignment of movement set\n        let move;\n        if (!isOverlay) {\n            const currentSet = isMobile ? baseMobileMovements : baseDesktopMovements;\n            move = currentSet[baseMovementCounter % currentSet.length]; baseMovementCounter++;\n        } else {\n            const currentSet = isMobile ? overlayMobileMovements : overlayDesktopMovements;\n            move = currentSet[overlayMovementCounter % currentSet.length]; overlayMovementCounter++;\n        }\n        \n        mediaEl.style.transform = move.start; \n        mediaEl.style.filter = `blur(${move.startBlur})`;\n        \n        layer.appendChild(mediaEl); container.appendChild(layer);\n        layer.offsetHeight; layer.classList.add('active');\n        \n        setTimeout(() => {\n            mediaEl.style.transform = move.end; mediaEl.style.filter = `blur(${move.endBlur})`;\n        }, 50);\n\n        \/\/ --- FIX: SEAMLESS TRANSITION WITHOUT TRANSPARENCY DROP ---\n        \/\/ The new element is overlaid and fades in. \n        \/\/ The old element remains completely visible underneath until the new one is 100% there.\n        if (!isOverlay) {\n            const oldLayer = activeBaseLayer; activeBaseLayer = layer;\n            if (oldLayer) { \n                setTimeout(() => oldLayer.remove(), fadeDuration); \n            }\n            setTimeout(() => executeSweep(false), sweepDuration);\n        } else {\n            const oldLayer = activeOverlayLayer; activeOverlayLayer = layer;\n            if (oldLayer) { \n                \/\/ The old mask video is deleted in the background only AFTER the new one has completely faded in\n                setTimeout(() => oldLayer.remove(), fadeDuration); \n            }\n            setTimeout(() => executeSweep(true), sweepDuration);\n        }\n    }\n\n    \/\/ 6. LINE BREAK\n    function wrapTextAtLimit(str, limit = 20) {\n        return str.split(' ').reduce((acc, word) => {\n            if (!acc.length) return [word];\n            let lastLine = acc[acc.length - 1];\n            if ((lastLine + ' ' + word).length <= limit) { acc[acc.length - 1] = lastLine + ' ' + word; } else { acc.push(word); }\n            return acc;\n        }, []).join('<br>');\n    }\n\n    \/\/ 7. TEXT ENGINE\n    let textIdx = 0;\n    function playNextTextLine() {\n        if (textLines.length === 0) return;\n        const formattedText = wrapTextAtLimit(textLines[textIdx], 20);\n        textOverlay.innerHTML = `<div class=\"ydkj-puff-wrapper\">${formattedText}<\/div>`;\n\n        const randomAngle = Math.random() * Math.PI * 2;\n        const isMobile = window.innerWidth <= 768;\n        const travelDistance = isMobile ? 60 : 120; \n\n        const startX = -Math.cos(randomAngle) * (travelDistance \/ 2);\n        const startY = -Math.sin(randomAngle) * (travelDistance \/ 2);\n        const endX = Math.cos(randomAngle) * (travelDistance \/ 2);\n        const endY = Math.sin(randomAngle) * (travelDistance \/ 2);\n\n        textOverlay.style.setProperty('--startX', `${startX}px`);\n        textOverlay.style.setProperty('--startY', `${startY}px`);\n        textOverlay.style.setProperty('--endX', `${endX}px`);\n        textOverlay.style.setProperty('--endY', `${endY}px`);\n\n        textOverlay.classList.remove('ydkj-active');\n        textOverlay.offsetHeight; textOverlay.classList.add('ydkj-active');\n\n        textIdx = (textIdx + 1) % textLines.length;\n        setTimeout(playNextTextLine, textDisplayDuration + textPauseDuration);\n    }\n\n    \/\/ START\n    executeSweep(false);\n    setTimeout(function() { executeSweep(true); }, sweepDuration \/ 2);\n    setTimeout(function() { playNextTextLine(); }, 1500);\n});\n\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"disable","_kad_post_title":"hide","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-164","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/taughtyouso.com\/index.php?rest_route=\/wp\/v2\/pages\/164","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taughtyouso.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/taughtyouso.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/taughtyouso.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taughtyouso.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=164"}],"version-history":[{"count":1,"href":"https:\/\/taughtyouso.com\/index.php?rest_route=\/wp\/v2\/pages\/164\/revisions"}],"predecessor-version":[{"id":174,"href":"https:\/\/taughtyouso.com\/index.php?rest_route=\/wp\/v2\/pages\/164\/revisions\/174"}],"wp:attachment":[{"href":"https:\/\/taughtyouso.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}