{"id":256,"date":"2026-03-10T12:38:51","date_gmt":"2026-03-10T12:38:51","guid":{"rendered":"https:\/\/pisam.de\/?page_id=256"},"modified":"2026-03-28T07:51:06","modified_gmt":"2026-03-28T07:51:06","slug":"animation","status":"publish","type":"page","link":"https:\/\/pisam.de\/index.php\/animation\/","title":{"rendered":"Animation"},"content":{"rendered":"\n<p class=\"has-text-align-center\" style=\"font-size:clamp(20.515px, 1.282rem + ((1vw - 3.2px) * 1.224), 33px);\">Pferdekopfnebel im Sternbild Orion<\/p>\n\n\n\n<div style=\"height:55px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<!-- KEN-BURNS SLIDER HTML + AUDIO + BUTTONS -->\n<div class=\"kenburns-slider\">\n  <img decoding=\"async\" src=\"https:\/\/pisam.de\/wordpress\/wp-content\/uploads\/2026\/03\/Pferdekopfnebel.jpg\" alt=\"Bild 1\">\n  <img decoding=\"async\" src=\"https:\/\/pisam.de\/wordpress\/wp-content\/uploads\/2026\/03\/PKN_2.jpg\" alt=\"Bild 2\">\n  <img decoding=\"async\" src=\"https:\/\/pisam.de\/wordpress\/wp-content\/uploads\/2026\/03\/IC-434-0013H-scaled.jpg\" alt=\"Bild 3\">\n<\/div>\n\n<!-- Audio -->\n<audio id=\"slider-audio\" preload=\"auto\" src=\"https:\/\/pisam.de\/wordpress\/wp-content\/uploads\/2026\/03\/02-Milonga-Del-Angel.mp3\"><\/audio>\n\n\n\n<!-- CSS -->\n<style>\n  \/* Slider Container *\/\n  .kenburns-slider {\n    position: relative;\n    overflow: hidden;\n    width: 100%;\n    height: 500px; \/* anpassen *\/\n  }\n\n  \/* Alle Bilder *\/\n  .kenburns-slider img {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    opacity: 0;\n    transform: scale(1);\n    transition: opacity 2s ease, transform 10s ease;\n    z-index: 0;\n  }\n\n  \/* Erstes Bild sichtbar beim Laden *\/\n  .kenburns-slider img:first-child {\n    opacity: 1;\n  }\n\n  \/* Aktives Bild \u2013 sichtbar, aber ohne Zoom *\/\n  .kenburns-slider img.active {\n    opacity: 1;\n    transform: scale(1);\n    z-index: 1;\n  }\n\n  \/* Ken-Burns-Zoom nur wenn Slider l\u00e4uft *\/\n  .kenburns-slider.running img.active {\n    transform: scale(1.5);\n  }\n\n\n<\/style>\n\n<!-- JavaScript -->\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n  const slider = document.querySelector(\".kenburns-slider\");\n  const slides = slider.querySelectorAll(\"img\");\n  const startBtn = document.getElementById(\"start-slider-btn\");\n  const stopBtn = document.getElementById(\"stop-slider-btn\");\n  const audio = document.getElementById(\"slider-audio\");\n\n  let index = 0;\n  let intervalId = null;\n\n  if (slides.length === 0 || !startBtn || !stopBtn) return;\n\n  \/\/ Erstes Bild sichtbar, noch kein Zoom\n  slides[0].classList.add(\"active\");\n\n  \/\/ Start Button\nstartBtn.addEventListener(\"click\", function() {\n  if (intervalId) return; \/\/ Doppelstart verhindern\n\n  slider.classList.add(\"running\");\n  startBtn.style.display = \"none\";\n\n  \/\/ Musik starten \u2013 Browser-Sicherheitsproblem beim zweiten Start umgehen\n  if (audio) {\n    audio.pause();          \/\/ sicherstellen, dass keine alte Instanz l\u00e4uft\n    audio.currentTime = 0;  \/\/ zur\u00fccksetzen\n    audio.load();           \/\/ neu laden\n    audio.play().catch(e => console.log(\"Audio blockiert:\", e));\n  }\n\n  \/\/ Slider starten\n  intervalId = setInterval(function() {\n    slides[index].classList.remove(\"active\");\n    index = (index + 1) % slides.length;\n    slides[index].classList.add(\"active\");\n  }, 10000); \/\/ 10 Sekunden pro Bild\n});\n\n  \/\/ Stop Button\n  stopBtn.addEventListener(\"click\", function() {\n    if (intervalId) {\n      clearInterval(intervalId);\n      intervalId = null;\n    }\n\n    slider.classList.remove(\"running\");\n\n    \/\/ Alle Bilder zur\u00fccksetzen\n    slides.forEach(slide => slide.classList.remove(\"active\"));\n    index = 0;\n    slides[0].classList.add(\"active\");\n\n    \/\/ Musik stoppen\n    if (audio) {\n      audio.pause();\n      audio.currentTime = 0;\n    }\n\n    startBtn.style.display = \"inline-block\";\n  });\n});\n<\/script>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-buttons is-content-justification-right is-layout-flex wp-container-core-buttons-is-layout-d445cf74 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\" id=\"start-slider-btn\"><a class=\"wp-block-button__link wp-element-button\">Start<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\" id=\"stop-slider-btn\"><a class=\"wp-block-button__link wp-element-button\">Stopp<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-text-align-center\" style=\"font-size:clamp(20.515px, 1.282rem + ((1vw - 3.2px) * 1.224), 33px);\">Bilder aus dem Universum April 2013, Hakos Namibia<\/p>\n\n\n\n<div style=\"height:55px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/pisam.de\/Kameras\/Bilder_aus_dem_Universum_April_2013.mp4\"><\/video><\/figure>\n\n\n\n<div style=\"height:44px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><video controls src=\"https:\/\/pisam.de\/wordpress\/wp-content\/uploads\/2026\/03\/Sternhimmel-Sellendorf.mp4\"><\/video><\/figure><div class=\"wp-block-media-text__content\">\n<p>Sternenhimmel in Sellendorf<\/p>\n<\/div><\/div>\n\n\n\n<div style=\"height:44px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><video controls src=\"https:\/\/pisam.de\/wordpress\/wp-content\/uploads\/2026\/03\/Polarlichter-10.Mai-2024.mp4\"><\/video><\/figure><div class=\"wp-block-media-text__content\">\n<p>Polarlichter in Sellendorf<\/p>\n<\/div><\/div>\n\n\n\n<div style=\"height:44px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><video controls src=\"https:\/\/pisam.de\/wordpress\/wp-content\/uploads\/2026\/03\/MerkurVor-Sonne_2.m4v\"><\/video><\/figure><div class=\"wp-block-media-text__content\">\n<p>Merkur vor der Sonne<\/p>\n<\/div><\/div>\n\n\n\n<div style=\"height:44px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><video controls src=\"https:\/\/pisam.de\/wordpress\/wp-content\/uploads\/2026\/03\/Coma-Galaxienhaufen.mp4\"><\/video><\/figure><div class=\"wp-block-media-text__content\">\n<p>Coma-Galxienhaufen<\/p>\n<\/div><\/div>\n\n\n\n<div style=\"height:44px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><video controls src=\"https:\/\/pisam.de\/wordpress\/wp-content\/uploads\/2026\/03\/Virgo-Galaxien-Haufen-mit-Jet-in-M-87.mp4\"><\/video><\/figure><div class=\"wp-block-media-text__content\">\n<p>Virgo-Galaxienhaufen mit Jet in M 87<\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Pferdekopfnebel im Sternbild Orion Bilder aus dem Universum April 2013, Hakos Namibia Sternenhimmel in Sellendorf Polarlichter in Sellendorf Merkur vor der Sonne Coma-Galxienhaufen Virgo-Galaxienhaufen mit Jet in M 87<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-256","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pisam.de\/index.php\/wp-json\/wp\/v2\/pages\/256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pisam.de\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pisam.de\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pisam.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pisam.de\/index.php\/wp-json\/wp\/v2\/comments?post=256"}],"version-history":[{"count":59,"href":"https:\/\/pisam.de\/index.php\/wp-json\/wp\/v2\/pages\/256\/revisions"}],"predecessor-version":[{"id":666,"href":"https:\/\/pisam.de\/index.php\/wp-json\/wp\/v2\/pages\/256\/revisions\/666"}],"wp:attachment":[{"href":"https:\/\/pisam.de\/index.php\/wp-json\/wp\/v2\/media?parent=256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}