{"id":7,"date":"2024-07-17T11:03:39","date_gmt":"2024-07-17T11:03:39","guid":{"rendered":"https:\/\/propagandamasin.rktv.ee\/?page_id=7"},"modified":"2024-09-23T09:04:09","modified_gmt":"2024-09-23T09:04:09","slug":"avaleht","status":"publish","type":"page","link":"https:\/\/propagandamasin.rktv.ee\/","title":{"rendered":"Avaleht"},"content":{"rendered":"<style>\n    * {\n        box-sizing: border-box;\n        list-style: none;\n        padding: 0;\n        margin: 0;\n    }\n\n    body {\n        margin-top: 265px;\n    }\n\n    .billboard {\n        display: flex;\n        --boards: 16;\n        --width: calc(100vw \/ var(--boards));\n        height: calc(100vh - 400px);\n        perspective: 100vw;\n        overflow: hidden;\n    }\n\n    li {\n        height: calc(100vh - 400px);\n        width: calc(var(--width) + 1px);\n        position: relative;\n        animation: flip 4000ms 0ms infinite ease-in-out;\n        animation-timing-function: cubic-bezier(.5, -0.1, .75, .8);\n\n        transform-style: preserve-3d;\n        transform-origin: var(--origin, center center);\n        backface-visibility: hidden;\n    }\n\n    .image {\n        background-repeat: no-repeat;\n        background-size: 100vw calc(100vh - 400px);\n        background-position: calc(var(--offset-x, 0) * 100vw) center;\n        z-index: 999;\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n    }\n\n    .image-overlay {\n        display: none;\n        background: transparent;\n        background-repeat: no-repeat;\n        background-size: 100vw calc(100vh - 400px);\n        background-position: calc(var(--offset-x, 0) * 100vw) center;\n        z-index: 999;\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n    }\n\n    .image-overlay.visible {\n        display: block;\n    }\n\n    .image:nth-child(2) {\n        transform: translateX(calc(99% * -1)) rotateY(calc(120deg * -1));\n        transform-origin: 100% 50%;\n    }\n\n    .image:nth-child(3) {\n        transform: translateX(calc(99% * 1)) rotateY(calc(120deg * 1));\n        transform-origin: 0 50%;\n    }\n\n    @keyframes flip {\n        0%, 20% {\n            transform: rotateY(0deg);\n        }\n        33.333%, 53.333% {\n            transform: rotateY(120deg);\n        }\n        66.667%, 86.667% {\n            transform: rotateY(240deg);\n        }\n        100% {\n            transform: rotateY(360deg)\n        }\n    }\n\n    @keyframes flip-reverse {\n        0%, 20% {\n            transform: rotateY(0deg);\n        }\n        33.333%, 53.333% {\n            transform: rotateY(-120deg);\n        }\n        66.667%, 86.667% {\n            transform: rotateY(-240deg);\n        }\n        100% {\n            transform: rotateY(-360deg)\n        }\n    }\n\n    body {\n\n    }\n\n    *, *::before, *::after {\n        padding: 0;\n        margin: 0;\n        box-sizing: border-box;\n    }\n<\/style>\n\n<div class=\"image-overlay\"><\/div>\n\n<ul class=\"billboard\">\n    <li>\n        <div class=\"image img-1\"><\/div>\n        <div class=\"image img-2\"><\/div>\n        <div class=\"image img-3\"><\/div>\n    <\/li>\n    <li>\n        <div class=\"image img-1\"><\/div>\n        <div class=\"image img-2\"><\/div>\n        <div class=\"image img-3\"><\/div>\n    <\/li>\n    <li>\n        <div class=\"image img-1\"><\/div>\n        <div class=\"image img-2\"><\/div>\n        <div class=\"image img-3\"><\/div>\n    <\/li>\n    <li>\n        <div class=\"image img-1\"><\/div>\n        <div class=\"image img-2\"><\/div>\n        <div class=\"image img-3\"><\/div>\n    <\/li>\n    <li>\n        <div class=\"image img-1\"><\/div>\n        <div class=\"image img-2\"><\/div>\n        <div class=\"image img-3\"><\/div>\n    <\/li>\n    <li>\n        <div class=\"image img-1\"><\/div>\n        <div class=\"image img-2\"><\/div>\n        <div class=\"image img-3\"><\/div>\n    <\/li>\n    <li>\n        <div class=\"image img-1\"><\/div>\n        <div class=\"image img-2\"><\/div>\n        <div class=\"image img-3\"><\/div>\n    <\/li>\n    <li>\n        <div class=\"image img-1\"><\/div>\n        <div class=\"image img-2\"><\/div>\n        <div class=\"image img-3\"><\/div>\n    <\/li>\n    <li>\n        <div class=\"image img-1\"><\/div>\n        <div class=\"image img-2\"><\/div>\n        <div class=\"image img-3\"><\/div>\n    <\/li>\n    <li>\n        <div class=\"image img-1\"><\/div>\n        <div class=\"image img-2\"><\/div>\n        <div class=\"image img-3\"><\/div>\n    <\/li>\n    <li>\n        <div class=\"image img-1\"><\/div>\n        <div class=\"image img-2\"><\/div>\n        <div class=\"image img-3\"><\/div>\n    <\/li>\n    <li>\n        <div class=\"image img-1\"><\/div>\n        <div class=\"image img-2\"><\/div>\n        <div class=\"image img-3\"><\/div>\n    <\/li>\n    <li>\n        <div class=\"image img-1\"><\/div>\n        <div class=\"image img-2\"><\/div>\n        <div class=\"image img-3\"><\/div>\n    <\/li>\n    <li>\n        <div class=\"image img-1\"><\/div>\n        <div class=\"image img-2\"><\/div>\n        <div class=\"image img-3\"><\/div>\n    <\/li>\n    <li>\n        <div class=\"image img-1\"><\/div>\n        <div class=\"image img-2\"><\/div>\n        <div class=\"image img-3\"><\/div>\n    <\/li>\n    <li>\n        <div class=\"image img-1\"><\/div>\n        <div class=\"image img-2\"><\/div>\n        <div class=\"image img-3\"><\/div>\n    <\/li>\n<\/ul>\n\n<script>\n    window.addEventListener('load', () => {\n        let boards = Array.from(document.querySelectorAll('.billboard li'));\n        let billboard = document.querySelector('.billboard');\n\n        billboard.style.setProperty('--boards', boards.length);\n        billboard.style.setProperty('--origin', `center center ${-100 \/ boards.length * Math.sqrt(3) \/ 4 * .685}vw`);\n\n        boards.forEach((board, i) => {\n            board.style.setProperty('--offset-x', -i \/ (boards.length));\n        });\n\n        const images = [\n                        'https:\/\/propagandamasin.rktv.ee\/wp-content\/uploads\/2024\/09\/2.png',\n                        'https:\/\/propagandamasin.rktv.ee\/wp-content\/uploads\/2024\/09\/1.png',\n                        'https:\/\/propagandamasin.rktv.ee\/wp-content\/uploads\/2024\/09\/3.png',\n                    ];\n\n        \/\/ Initialize the images\n        let img1Elements = Array.from(document.querySelectorAll('.img-1'));\n\n        img1Elements.forEach((image) => {\n            image.style.backgroundImage = `url(${images[0]})`;\n        });\n\n        let img2Elements = Array.from(document.querySelectorAll('.img-2'));\n\n        img2Elements.forEach((image) => {\n            image.style.backgroundImage = `url(${images[1]})`;\n        });\n\n        let img3Elements = Array.from(document.querySelectorAll('.img-3'));\n\n        img3Elements.forEach((image) => {\n            image.style.backgroundImage = `url(${images[images.length - 1]})`;\n        });\n\n        let currentImage = 0;\n        let lastDirection = null;\n        let canMove = true;\n\n        const getItemFromRotatedArray = (arr, N) => {\n            if (arr.length === 0) {\n                return undefined; \/\/ Handle empty array case\n            }\n            const normalizedIndex = ((N % arr.length) + arr.length) % arr.length;\n            return arr[normalizedIndex];\n        }\n\n        let stopAnimation = true;\n\n        boards.forEach(board => {\n            board.style.animationPlayState = 'paused';\n        });\n\n        \/\/ Show overlay\n        document.querySelector('.image-overlay').style.backgroundImage = `url(${images[0]})`;\n        document.querySelector('.image-overlay').classList.add('visible');\n\n        const startAnimation = (animationName, direction) => {\n            setTimeout(() => {\n                document.querySelector('.image-overlay').classList.remove('visible');\n            }, 450);\n\n            boards.forEach(board => {\n                board.style.animationName = animationName;\n                board.style.animationPlayState = 'running';\n            });\n\n            setTimeout(() => {\n                stopAnimation = true;\n                img1Elements.forEach((image) => {\n                    image.style.backgroundImage = `url(${getItemFromRotatedArray(images, currentImage)})`;\n                });\n\n                if (direction === 'left') {\n                    img2Elements.forEach((image) => {\n                        image.style.backgroundImage = `url(${getItemFromRotatedArray(images, currentImage + 1)})`;\n                    });\n                    img3Elements.forEach((image) => {\n                        image.style.backgroundImage = `url(${getItemFromRotatedArray(images, currentImage - 1)})`;\n                    });\n                } else if (direction === 'right') {\n                    img3Elements.forEach((image) => {\n                        image.style.backgroundImage = `url(${getItemFromRotatedArray(images, currentImage - 1)})`;\n                    });\n                    img2Elements.forEach((image) => {\n                        image.style.backgroundImage = `url(${getItemFromRotatedArray(images, currentImage + 1)})`;\n                    });\n                }\n\n                boards.forEach(board => {\n                    board.style.animationPlayState = 'paused';\n                    board.style.animationName = 'none';\n                });\n\n                canMove = true;\n\n                \/\/ Show overlay\n                document.querySelector('.image-overlay').style.backgroundImage = `url(${getItemFromRotatedArray(images, currentImage)})`;\n                document.querySelector('.image-overlay').classList.add('visible');\n            }, (4000 \/ 3));\n        };\n\n        const moveLeft = () => {\n            if (!canMove) {\n                return;\n            }\n\n            currentImage++;\n            stopAnimation = false;\n            startAnimation('flip', 'left');\n            lastDirection = 'left';\n            canMove = false;\n        };\n\n        const moveRight = () => {\n            if (!canMove) {\n                return;\n            }\n\n            currentImage--;\n            stopAnimation = false;\n            startAnimation('flip-reverse', 'right');\n            lastDirection = 'right';\n            canMove = false;\n        };\n\n        const screenWidth = window.innerWidth;\n\n        function handleClickOrTap(event) {\n            const clickX = event.clientX || event.touches[0].clientX;\n\n            if (clickX < screenWidth \/ 2) {\n                moveLeft();\n            } else {\n                moveRight();\n            }\n        }\n\n        document.addEventListener('click', handleClickOrTap);\n        document.addEventListener('touchstart', handleClickOrTap);\n    });\n<\/script>\n\n\n\n<p><\/p>\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":{"_acf_changed":false,"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/propagandamasin.rktv.ee\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/propagandamasin.rktv.ee\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/propagandamasin.rktv.ee\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/propagandamasin.rktv.ee\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/propagandamasin.rktv.ee\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":13,"href":"https:\/\/propagandamasin.rktv.ee\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":50,"href":"https:\/\/propagandamasin.rktv.ee\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/50"}],"wp:attachment":[{"href":"https:\/\/propagandamasin.rktv.ee\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}