Codepen.io integrieren

Egger · 12 November 2019

Guten Tag,
Möchte gerne einen "PEN" von Codepen.io auf meiner Webseite integrieren. (LINK zum "Pen" https://codepen.io/Unna/pen/WQoVWr ) Der "PEN" ist ein animierter Hintergrund und besteht aus HTML, CSS sowie JAVA. Für meine Webseite habe ich bereits eine Ordnerstruktur erstellt und somit Html, CSS und JAVA getrennt. In einem Post hier habe ich schon gelesen dass man hierfür die Settings im oberen rechten Rand nutzen sollte. Wenn Ihr mir es bitte nocheinmal ausführlich erklären könntet wäre ich euch sehr dankbar. Gerne auch mit Video. Vielen Dank im vorraus.

basti1012 · 12 November 2019

was heist integieren ?
Du kannst ein kleines Fenster einbinden das sieht dann so aus wie Codepen nur etwas kleiner.
Oder nur ein Link .
Oder willst du das was du da siehst selber auf deiner Webseite nutzen ?

Egger · 13 November 2019

@basti1012 wie meist du kleines Fenster? Muss man die Codeschnipsle nicht in den richtigen Ordner am richtigen Platz integrieren? Ich dachte ich kann anstelle des festen Bildes das zurzeit auf der Homepage ist einfach die Animation integrieren. Was würdest du in meiner Lage tun um es so einfach wie möglich zu halten und trotzdem den Hovereffekt des Pens zu erhalten? Wie würdest du ein kleines Fenster integrieren? Vielen Dank im vorraus

Sailor · 13 November 2019

Was dort im Pen zu sehen ist, ist ein 'canvas' (https://developer.mozilla.org/de/docs/Web/Guide/HTML/Canvas_Tutorial)- also ein eigenes HTML Element, das sich meines Wissens nicht als Hintergrund einbinden lässt. Wenn es eingebunden wird, dann so, wie es vorgesehen ist als eine Fläche auf der Seite, in der die Animation abgespielt wird.

basti1012 · 14 November 2019

https://basti1012.bplaced.net/index.php?ordner=html&id=695

Sailor schrieb:
das sich meines Wissens nicht als Hintergrund einbinden lässt.

Wie wäre es damit ?

Code:

document.getElementsByTagName('body')[0].style.background = "url(" + canvas.toDataURL() + ")";

oder ist das nicht das gleiche ?

@Egger
meinst du das so