KUENZLERWEDER Animation<\/title>\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.11.2\/gsap.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/d3\/7.8.2\/d3.min.js\"><\/script>\n <style>\n @font-face {\n font-family: 'Akzidenz-Grotesk-BQ-Light-Extended';\n src: url('\/wp-content\/uploads\/2024\/03\/akzidenz-grotesk-bq-light-extended.otf') format('opentype');\n }\n\n body {\n margin: 0;\n font-family: 'Akzidenz-Grotesk-BQ-Light-Extended', sans-serif;\n }\n\n .theme-default-block {\n max-width: 100%;\n width: 100%;\n height: 60vh; \/* H\u00f6he 60% der Viewport-H\u00f6he *\/\n min-height: 500px; \/* Mindesth\u00f6he *\/\n margin: 0 auto;\n padding: 40px;\n box-sizing: border-box;\n text-align: center;\n background-color: #BCBCBC;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n #kuenzler, #weder {\n display: inline-block;\n font-size: clamp(2rem, 8vw, 8vh); \/* Dynamische Schriftgr\u00f6\u00dfe *\/\n color: #0a7b37;\n white-space: nowrap;\n text-align: center;\n line-height: 1;\n }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"theme-default-block\" id=\"animation-block\">\n <div id=\"kuenzler\">KUENZLER<\/div>\n <div id=\"weder\">\n <span class=\"weder-char\" id=\"w\">W<\/span>\n <span class=\"weder-char\" id=\"e\">E<\/span>\n <span class=\"weder-char\" id=\"d\">D<\/span>\n <span class=\"weder-char\" id=\"e2\">E<\/span>\n <span class=\"weder-char\" id=\"r\">R<\/span>\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n const colors = [\"#0a7b37\", \"#366735\", \"#3aaa62\", \"#043f19\", \"#073a19\", \"#466651\", \"#608c6f\", \"#429b61\", \"#00a83c\", \"#0f873a\"];\n const kuenzler = d3.select(\"#kuenzler\");\n const wederChars = [\n d3.select(\"#w\"),\n d3.select(\"#e\"),\n d3.select(\"#d\"),\n d3.select(\"#e2\"),\n d3.select(\"#r\")\n ];\n\n function checkBlockSize() {\n const block = document.getElementById(\"animation-block\");\n const blockHeight = block.offsetHeight;\n const blockWidth = block.offsetWidth;\n console.log(`Block Height: ${blockHeight}px`);\n console.log(`Block Width: ${blockWidth}px`);\n }\n\n function changeColor() {\n const randomColor = colors[Math.floor(Math.random() * colors.length)];\n kuenzler.style(\"color\", randomColor);\n setTimeout(changeColor, 3000);\n }\n\n function animateCharWave(char, delay) {\n char.transition()\n .delay(delay)\n .duration(2000)\n .ease(d3.easeSinInOut)\n .style(\"opacity\", 0.7)\n .transition()\n .duration(2000)\n .ease(d3.easeCubicInOut)\n .style(\"opacity\", 0.3)\n .transition()\n .duration(2000)\n .ease(d3.easeElastic)\n .style(\"opacity\", 1)\n .on(\"end\", function() { animateCharWave(char, delay); });\n }\n\n function animateWederChars() {\n wederChars.forEach((char, i) => {\n animateCharWave(char, i * 500);\n });\n }\n\n \/\/ Start der Animationen\n changeColor();\n animateWederChars();\n\n \/\/ \u00dcberpr\u00fcfe die Blockgr\u00f6\u00dfe nach dem Laden des Dokuments\n checkBlockSize();\n \/\/ \u00dcberpr\u00fcfe die Blockgr\u00f6\u00dfe erneut, wenn das Fenster ge\u00e4ndert wird\n window.addEventListener('resize', checkBlockSize);\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p>Restelbergstrasse 89 8044 Z\u00fcrich<\/p>\n","protected":false},"excerpt":{"rendered":"<p>KUENZLERWEDER Animation KUENZLER W E D E R Restelbergstrasse 89 8044 Z\u00fcrich<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"home.php","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-32","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kuenzlerweder.com\/index.php?rest_route=\/wp\/v2\/pages\/32","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kuenzlerweder.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kuenzlerweder.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kuenzlerweder.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kuenzlerweder.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=32"}],"version-history":[{"count":118,"href":"https:\/\/kuenzlerweder.com\/index.php?rest_route=\/wp\/v2\/pages\/32\/revisions"}],"predecessor-version":[{"id":190,"href":"https:\/\/kuenzlerweder.com\/index.php?rest_route=\/wp\/v2\/pages\/32\/revisions\/190"}],"wp:attachment":[{"href":"https:\/\/kuenzlerweder.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":32,"date":"2024-03-07T09:36:49","date_gmt":"2024-03-07T09:36:49","guid":{"rendered":"https:\/\/kuenzlerweder.com\/?page_id=32"},"modified":"2024-09-11T09:58:52","modified_gmt":"2024-09-11T09:58:52","slug":"kuenzler-weder","status":"publish","type":"page","link":"https:\/\/kuenzlerweder.com\/","title":{"rendered":"Kuenzler Weder"},"content":{"rendered":"\n

<\/p>\n\n\n\n\n\n\n \n \n KUENZLERWEDER Animation<\/title>\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.11.2\/gsap.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/d3\/7.8.2\/d3.min.js\"><\/script>\n <style>\n @font-face {\n font-family: 'Akzidenz-Grotesk-BQ-Light-Extended';\n src: url('\/wp-content\/uploads\/2024\/03\/akzidenz-grotesk-bq-light-extended.otf') format('opentype');\n }\n\n body {\n margin: 0;\n font-family: 'Akzidenz-Grotesk-BQ-Light-Extended', sans-serif;\n }\n\n .theme-default-block {\n max-width: 100%;\n width: 100%;\n height: 60vh; \/* H\u00f6he 60% der Viewport-H\u00f6he *\/\n min-height: 500px; \/* Mindesth\u00f6he *\/\n margin: 0 auto;\n padding: 40px;\n box-sizing: border-box;\n text-align: center;\n background-color: #BCBCBC;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n #kuenzler, #weder {\n display: inline-block;\n font-size: clamp(2rem, 8vw, 8vh); \/* Dynamische Schriftgr\u00f6\u00dfe *\/\n color: #0a7b37;\n white-space: nowrap;\n text-align: center;\n line-height: 1;\n }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"theme-default-block\" id=\"animation-block\">\n <div id=\"kuenzler\">KUENZLER<\/div>\n <div id=\"weder\">\n <span class=\"weder-char\" id=\"w\">W<\/span>\n <span class=\"weder-char\" id=\"e\">E<\/span>\n <span class=\"weder-char\" id=\"d\">D<\/span>\n <span class=\"weder-char\" id=\"e2\">E<\/span>\n <span class=\"weder-char\" id=\"r\">R<\/span>\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n const colors = [\"#0a7b37\", \"#366735\", \"#3aaa62\", \"#043f19\", \"#073a19\", \"#466651\", \"#608c6f\", \"#429b61\", \"#00a83c\", \"#0f873a\"];\n const kuenzler = d3.select(\"#kuenzler\");\n const wederChars = [\n d3.select(\"#w\"),\n d3.select(\"#e\"),\n d3.select(\"#d\"),\n d3.select(\"#e2\"),\n d3.select(\"#r\")\n ];\n\n function checkBlockSize() {\n const block = document.getElementById(\"animation-block\");\n const blockHeight = block.offsetHeight;\n const blockWidth = block.offsetWidth;\n console.log(`Block Height: ${blockHeight}px`);\n console.log(`Block Width: ${blockWidth}px`);\n }\n\n function changeColor() {\n const randomColor = colors[Math.floor(Math.random() * colors.length)];\n kuenzler.style(\"color\", randomColor);\n setTimeout(changeColor, 3000);\n }\n\n function animateCharWave(char, delay) {\n char.transition()\n .delay(delay)\n .duration(2000)\n .ease(d3.easeSinInOut)\n .style(\"opacity\", 0.7)\n .transition()\n .duration(2000)\n .ease(d3.easeCubicInOut)\n .style(\"opacity\", 0.3)\n .transition()\n .duration(2000)\n .ease(d3.easeElastic)\n .style(\"opacity\", 1)\n .on(\"end\", function() { animateCharWave(char, delay); });\n }\n\n function animateWederChars() {\n wederChars.forEach((char, i) => {\n animateCharWave(char, i * 500);\n });\n }\n\n \/\/ Start der Animationen\n changeColor();\n animateWederChars();\n\n \/\/ \u00dcberpr\u00fcfe die Blockgr\u00f6\u00dfe nach dem Laden des Dokuments\n checkBlockSize();\n \/\/ \u00dcberpr\u00fcfe die Blockgr\u00f6\u00dfe erneut, wenn das Fenster ge\u00e4ndert wird\n window.addEventListener('resize', checkBlockSize);\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p>Restelbergstrasse 89 8044 Z\u00fcrich<\/p>\n","protected":false},"excerpt":{"rendered":"<p>KUENZLERWEDER Animation KUENZLER W E D E R Restelbergstrasse 89 8044 Z\u00fcrich<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"home.php","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-32","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kuenzlerweder.com\/index.php?rest_route=\/wp\/v2\/pages\/32","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kuenzlerweder.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kuenzlerweder.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kuenzlerweder.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kuenzlerweder.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=32"}],"version-history":[{"count":118,"href":"https:\/\/kuenzlerweder.com\/index.php?rest_route=\/wp\/v2\/pages\/32\/revisions"}],"predecessor-version":[{"id":190,"href":"https:\/\/kuenzlerweder.com\/index.php?rest_route=\/wp\/v2\/pages\/32\/revisions\/190"}],"wp:attachment":[{"href":"https:\/\/kuenzlerweder.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}