SVG Animation: Container Problems - Any Suggestions?
Does anybody know how to create an SVG animation that does not get stuck at the very bottom of your html page: <style> body { background: radial-gradient( #A7C7E7, /* Celestial Blue — peaceful and clear */ #FFFFFF, /* White — openness and clarity */ #D6C3E8 /* Lavender Mist — spiritual wisdom and warmth */ ); } .bubble-container { position: absolute; top: 0; left: 0; width: 100%; height: 0px; /* JS will update dynamically */ pointer-events: none; z-index: -1; overflow: visible; } .svg-bubbles { width: 100%; height: 100%; } </style> </head> <body> Figured that svg and scripts supposed to go after the text and images. Now I got container problems. Please help. <svg> <circle cx="5%" cy="100%" r="10" fill="white"> <animate attributeName="cy" from="100%" to="-100%" begin="0s" dur="18s" repeatCount="indefinite" /> <animate attributeName="opacity" from="1" to="0" dur="18s" begin="0s" repeatCount="indefinite" /> </circle> <circle cx="10%" cy="100%" r="20" fill="white"> <animate attributeName="cy" from="100%" to="-100%" begin="0s" dur="20s" repeatCount="indefinite" /> <animate attributeName="opacity" from="1" to="0" dur="20s" begin="0s" repeatCount="indefinite" /> </circle> <circle cx="15%" cy="100%" r="25" fill="white"> <animate attributeName="cy" from="100%" to="-100%" begin="0s" dur="24s" repeatCount="indefinite" /> <animate attributeName="opacity" from="1" to="0" dur="24s" begin="0s" repeatCount="indefinite" /> </circle> </svg> <script> function updateBubbleCanvas() { const fullHeight = document.body.scrollHeight; const bubbleLayer = document.querySelector(".bubble-container"); const bubbleSvg = document.querySelector(".svg-bubbles"); if (bubbleLayer) bubbleLayer.style.height = `${fullHeight}px`; if (bubbleSvg) bubbleSvg.setAttribute("height", `${fullHeight}px`); } window.addEventListener("load", updateBubbleCanvas); window.addEventListener("resize", updateBubbleCanvas); </script> </body>
Häufig solche Fragen?
Effizienter lernen, kostenlos:
