{"id":11775,"date":"2024-12-24T12:27:41","date_gmt":"2024-12-24T11:27:41","guid":{"rendered":"https:\/\/www.builtbybricks.art\/?page_id=11775"},"modified":"2025-01-13T15:51:34","modified_gmt":"2025-01-13T14:51:34","slug":"newfront","status":"publish","type":"page","link":"http:\/\/www.builtbybricks.art\/en\/newfront\/","title":{"rendered":"newfront"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Neon Linien Animation<\/title>\r\n <style>\r\n \/* Allgemeiner Hintergrund *\/\r\n #animation-screen {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100vh;\r\n width: 100%;\r\n background-color: transparent;\r\n overflow: hidden;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n z-index: 10;\r\n }\r\n\r\n \/* Vertikale Neon-Linien *\/\r\n .neon-lines-vertical {\r\n position: absolute;\r\n top: 0;\r\n left: 5px;\r\n height: 100%;\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n z-index: 30;\r\n }\r\n\r\n .neon-lines-vertical .neon-line {\r\n width: 10px;\r\n height: 0;\r\n background-color: inherit;\r\n animation: neon-line-vertical-animation 8s ease-in-out forwards;\r\n animation-play-state: paused;\r\n }\r\n\r\n \/* Horizontale Neon-Linien von rechts nach links *\/\r\n .neon-lines-horizontal {\r\n position: absolute;\r\n top: 10%;\r\n left: 0;\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px;\r\n z-index: 30;\r\n }\r\n\r\n .neon-lines-horizontal .neon-line {\r\n height: 20px;\r\n width: 0;\r\n background-color: inherit;\r\n animation: neon-line-horizontal-animation 8s ease-in-out forwards;\r\n animation-play-state: paused;\r\n }\r\n\r\n \/* Horizontale Neon-Linien von links nach rechts *\/\r\n .neon-lines-horizontal-left-to-right {\r\n position: absolute;\r\n top: 30%;\r\n left: 0;\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px;\r\n z-index: 30;\r\n }\r\n\r\n .neon-lines-horizontal-left-to-right .neon-line {\r\n height: 40px;\r\n width: 0;\r\n background-color: inherit;\r\n animation: neon-line-horizontal-left-to-right-animation 8s ease-in-out forwards;\r\n animation-play-state: paused;\r\n }\r\n\r\n \/* Dicke vertikale Linien *\/\r\n .neon-lines-vertical-large {\r\n position: absolute;\r\n top: 0;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n height: 100%;\r\n display: flex;\r\n flex-direction: row;\r\n gap: 10px;\r\n z-index: 30;\r\n }\r\n\r\n .neon-lines-vertical-large .neon-line {\r\n width: 250px;\r\n height: 0;\r\n background-color: inherit;\r\n animation: neon-line-vertical-large-animation 8s ease-in-out forwards;\r\n animation-play-state: paused;\r\n }\r\n\r\n \/* Diagonale Neon-Linien *\/\r\n .neon-lines-diagonal {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n z-index: 30;\r\n transform: rotate(45deg);\r\n }\r\n\r\n .neon-lines-diagonal .neon-line {\r\n height: 25px;\r\n background-color: inherit;\r\n transform: translateX(-100vw);\r\n animation: neon-line-diagonal-animation 8s ease-in-out forwards;\r\n animation-play-state: paused;\r\n }\r\n\r\n \/* Farben f\u00fcr Neon-Linien *\/\r\n .neon-line:nth-child(1) { background-color: #FFFFFF; } \/* Wei\u00df *\/\r\n .neon-line:nth-child(2) { background-color: #E03C31; } \/* Rot *\/\r\n .neon-line:nth-child(3) { background-color: #F7D038; } \/* Orange *\/\r\n .neon-line:nth-child(4) { background-color: #46B04A; } \/* Gr\u00fcn *\/\r\n .neon-line:nth-child(5) { background-color: #0067A9; } \/* Blau *\/\r\n\r\n \/* Animationen *\/\r\n @keyframes neon-line-vertical-animation {\r\n 0% { height: 0; transform: translateY(100vh); }\r\n 30% { height: 100%; transform: translateY(0); }\r\n 70% { height: 100%; transform: translateY(0); }\r\n 100% { height: 0; transform: translateY(-100vh); }\r\n }\r\n\r\n @keyframes neon-line-horizontal-animation {\r\n 0% { width: 0; transform: translateX(100vw); }\r\n 30% { width: 100%; transform: translateX(0); }\r\n 70% { width: 100%; transform: translateX(0); }\r\n 100% { width: 0; transform: translateX(-100vw); }\r\n }\r\n\r\n @keyframes neon-line-horizontal-left-to-right-animation {\r\n 0% { width: 0; transform: translateX(-100vw); }\r\n 30% { width: 100%; transform: translateX(0); }\r\n 70% { width: 100%; transform: translateX(0); }\r\n 100% { width: 0; transform: translateX(100vw); }\r\n }\r\n\r\n @keyframes neon-line-vertical-large-animation {\r\n 0% { height: 0; transform: translateY(-100vh); }\r\n 30% { height: 100%; transform: translateY(0); }\r\n 70% { height: 100%; transform: translateY(0); }\r\n 100% { height: 0; transform: translateY(100vh); }\r\n }\r\n\r\n @keyframes neon-line-diagonal-animation {\r\n 0% { transform: translateX(-100vw); }\r\n 30% { transform: translateX(0); }\r\n 70% { transform: translateX(0); }\r\n 100% { transform: translateX(100vw); }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"animation-screen\">\r\n <!-- Vertikale Neon-Linien -->\r\n <div class=\"neon-lines-vertical\">\r\n <div class=\"neon-line\"><\/div>\r\n <div class=\"neon-line\"><\/div>\r\n <div class=\"neon-line\"><\/div>\r\n <div class=\"neon-line\"><\/div>\r\n <div class=\"neon-line\"><\/div>\r\n <\/div>\r\n\r\n <!-- Horizontale Neon-Linien von rechts nach links -->\r\n <div class=\"neon-lines-horizontal\">\r\n <div class=\"neon-line\"><\/div>\r\n <div class=\"neon-line\"><\/div>\r\n <div class=\"neon-line\"><\/div>\r\n <div class=\"neon-line\"><\/div>\r\n <div class=\"neon-line\"><\/div>\r\n <\/div>\r\n\r\n <!-- Horizontale Neon-Linien von links nach rechts -->\r\n <div class=\"neon-lines-horizontal-left-to-right\">\r\n <div class=\"neon-line\"><\/div>\r\n <div class=\"neon-line\"><\/div>\r\n <div class=\"neon-line\"><\/div>\r\n <div class=\"neon-line\"><\/div>\r\n <div class=\"neon-line\"><\/div>\r\n <\/div>\r\n\r\n <!-- Dicke vertikale Linien in der Mitte -->\r\n <div class=\"neon-lines-vertical-large\">\r\n <div class=\"neon-line\"><\/div>\r\n <div class=\"neon-line\"><\/div>\r\n <div class=\"neon-line\"><\/div>\r\n <div class=\"neon-line\"><\/div>\r\n <div class=\"neon-line\"><\/div>\r\n <\/div>\r\n\r\n <!-- Diagonale Neon-Linien -->\r\n <div class=\"neon-lines-diagonal\">\r\n <div class=\"neon-line\"><\/div>\r\n <div class=\"neon-line\"><\/div>\r\n <div class=\"neon-line\"><\/div>\r\n <div class=\"neon-line\"><\/div>\r\n <div class=\"neon-line\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function () {\r\n const verticalLines = document.querySelectorAll('.neon-lines-vertical .neon-line');\r\n const horizontalLines = document.querySelectorAll('.neon-lines-horizontal .neon-line');\r\n const horizontalLeftToRightLines = document.querySelectorAll('.neon-lines-horizontal-left-to-right .neon-line');\r\n const verticalLargeLines = document.querySelectorAll('.neon-lines-vertical-large .neon-line');\r\n const diagonalLines = document.querySelectorAll('.neon-lines-diagonal .neon-line');\r\n\r\n \/\/ Vertikale Linien starten\r\n setTimeout(() => {\r\n verticalLines.forEach((line, index) => {\r\n line.style.animationPlayState = 'running';\r\n line.style.animationDelay = `${index * 0.3}s`;\r\n });\r\n }, 500);\r\n\r\n \/\/ Horizontale Linien (rechts nach links) starten\r\n setTimeout(() => {\r\n horizontalLines.forEach((line, index) => {\r\n line.style.animationPlayState = 'running';\r\n line.style.animationDelay = `${index * 0.3}s`;\r\n });\r\n }, 10500);\r\n\r\n \/\/ Horizontale Linien (links nach rechts) starten\r\n setTimeout(() => {\r\n horizontalLeftToRightLines.forEach((line, index) => {\r\n line.style.animationPlayState = 'running';\r\n line.style.animationDelay = `${index * 0.3}s`;\r\n });\r\n }, 28000);\r\n\r\n \/\/ Dicke vertikale Linien starten\r\n setTimeout(() => {\r\n verticalLargeLines.forEach((line, index) => {\r\n line.style.animationPlayState = 'running';\r\n line.style.animationDelay = `${index * 0.3}s`;\r\n });\r\n }, 37000);\r\n\r\n \/\/ Diagonale Linien starten\r\n setTimeout(() => {\r\n diagonalLines.forEach((line, index) => {\r\n line.style.animationPlayState = 'running';\r\n line.style.animationDelay = `${index * 0.3}s`;\r\n });\r\n }, 46000);\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-285c7f2 elementor-widget elementor-widget-html\" data-id=\"285c7f2\" 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 id=\"image-container\">\r\n <div id=\"image-wrapper\">\r\n <img decoding=\"async\" src=\"https:\/\/www.builtbybricks.art\/wp-content\/uploads\/2025\/01\/tomonaut-1.webp\" alt=\"Tomonaut\" title=\"\">\r\n <\/div>\r\n <div id=\"neon-screenplay-container\">\r\n <span id=\"neon-screenplay\">screenplay by<\/span>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n document.addEventListener(\"DOMContentLoaded\", () => {\r\n const neonTextContainer = document.getElementById(\"neon-screenplay-container\");\r\n const imageWrapper = document.getElementById(\"image-wrapper\");\r\n const imageContainer = document.getElementById(\"image-container\");\r\n\r\n \/\/ Schriftzug nach 18 Sekunden einblenden\r\n setTimeout(() => {\r\n neonTextContainer.style.opacity = 1;\r\n }, 18000);\r\n\r\n \/\/ Bild nach 20 Sekunden einblenden\r\n setTimeout(() => {\r\n imageWrapper.style.opacity = 1;\r\n }, 20000);\r\n\r\n \/\/ Alles nach 28 Sekunden ausblenden\r\n setTimeout(() => {\r\n neonTextContainer.style.opacity = 0;\r\n imageWrapper.style.opacity = 0;\r\n imageContainer.style.opacity = 0;\r\n }, 28000);\r\n });\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7a797a2 e-flex e-con-boxed e-con e-child\" data-id=\"7a797a2\" 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 class=\"elementor-element elementor-element-2e7a4fb elementor-widget elementor-widget-html\" data-id=\"2e7a4fb\" 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 id=\"spacebar-prompt\" onclick=\"redirectToGoogle()\">\r\n Press <span class=\"key\">spacebar<\/span> to skip intro\r\n<\/div>\r\n\r\n<style>\r\n \/* Importiere eine typische 80er-Jahre-Schriftart *\/\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Press+Start+2P&display=swap');\r\n\r\n \/* Spacebar Prompt Styling *\/\r\n #spacebar-prompt {\r\n position: fixed;\r\n bottom: 20px; \/* Position oberhalb der Fu\u00dfzeile *\/\r\n left: 50%;\r\n transform: translateX(-50%);\r\n color: white;\r\n font-size: clamp(0.6rem, 1.5vw, 1.2rem); \/* Dynamische Schriftgr\u00f6\u00dfe mit mind. 0.6rem *\/\r\n text-align: center;\r\n font-family: 'Press Start 2P', cursive;\r\n z-index: 9999; \/* H\u00f6chste Priorit\u00e4t, bleibt \u00fcber allen anderen Elementen *\/\r\n pointer-events: auto; \/* Erm\u00f6glicht Klicks auf den Text *\/\r\n opacity: 1;\r\n animation: fade-in-out 2s infinite; \/* Dauerhafte Animation *\/\r\n white-space: nowrap; \/* Verhindert Zeilenumbr\u00fcche *\/\r\n padding: 0 5px; \/* Mindestabstand von 5px links und rechts *\/\r\n box-sizing: border-box; \/* Padding wird in die Breite einbezogen *\/\r\n max-width: calc(100% - 10px); \/* Sorgt f\u00fcr Abstand von 5px links und rechts *\/\r\n overflow: hidden; \/* Verhindert, dass der Text abgeschnitten wird *\/\r\n }\r\n\r\n \/* Styling f\u00fcr das Wort \"spacebar\" als Button *\/\r\n #spacebar-prompt .key {\r\n display: inline-block;\r\n background: rgba(255, 255, 255, 0.2);\r\n color: white;\r\n padding: 0.4em 0.8em;\r\n border-radius: 5px;\r\n font-weight: bold;\r\n text-align: center;\r\n vertical-align: middle;\r\n line-height: 1.5;\r\n text-shadow: 1px 1px 0 black, \/* Schwarze Kontur f\u00fcr Text *\/\r\n -1px 1px 0 black,\r\n 1px -1px 0 black,\r\n -1px -1px 0 black;\r\n box-shadow: 0 0 0 2px black; \/* Schwarze Kontur um den Button *\/\r\n }\r\n\r\n \/* Animation f\u00fcr den Blink-Effekt *\/\r\n @keyframes fade-in-out {\r\n 0%, 100% {\r\n opacity: 1;\r\n }\r\n 50% {\r\n opacity: 0.5;\r\n }\r\n }\r\n<\/style>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Neon Linien Animation screenplay by Press spacebar to skip intro<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"federated","footnotes":""},"class_list":["post-11775","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/pages\/11775","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/comments?post=11775"}],"version-history":[{"count":1285,"href":"http:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/pages\/11775\/revisions"}],"predecessor-version":[{"id":14182,"href":"http:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/pages\/11775\/revisions\/14182"}],"wp:attachment":[{"href":"http:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/media?parent=11775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}