Ich habe eine JS-Animation gemacht, die ich als Hintergrund meiner Homepage verwenden möchte: Ссылка . Aber ich bin ziemlich neu in der Webentwicklung und es ist unklar, wie man verhindern kann, dass das Canvas-Element ein Inline-Objekt auf der Seite ist und es hinter anderen HTML-Elementen platziert. Sehr dankbar für den Rat. Das HTML ist:
%Vor%Im Jahr 2016 würde ich
verwenden %Vor%Hier ist warum:
Viele Leute benutzen canvas { width: 100%; height: 100% } , aber das macht wohl keinen Sinn. Sie möchten nicht, dass die Leinwand zu 100% aus dem Körper besteht. Sie wollen es zu 100% des Bildschirms / Fensters. Das macht canvas { width: 100vw; height: 100vh; } . Es ist 100% der Breite des Darstellungsbereichs und der Höhe des Darstellungsbereichs.
Das bedeutet, dass Sie den Körper nicht auf Höhe einstellen müssen: 100%, was auch keinen Sinn ergibt, besonders wenn die Seite größer als das Fenster / der Bildschirm ist
display: block; behebt einige Probleme mit Bildlaufleisten in bestimmten Browsern. Einige Seiten verwenden html, body { overflow: none; } , aber das macht wiederum keinen Sinn, wenn Ihre Seite größer als der Bildschirm / das Fenster sein muss.
position: fixed; wird die Canvas-Position relativ zum oberen Fensterrand festgelegt, sodass sie nicht mit der Seite blättert. Wenn Sie position: absolute verwenden, wird der Canvas-Bereich von oben nach unten verschoben, wenn die Seite größer als der Bildschirm / das Fenster ist. Zum Beispiel diese Seite .
top: 0; left 0; setzt es oben links. Ohne diese würde es standardmäßig auf seine Standardposition innerhalb der Körperränder gesetzt werden. Oft wird dies durch das Setzen von body { margin: 0; } gelöst, aber das bedeutet, dass Sie am Ende einen anderen Container benötigen, um einen Rand hinzuzufügen, ansonsten wird Ihr normaler Inhalt am Rand des Fensters positioniert.
z-index: -9999; ist dazu da, um es weiter zurückzuzwingen als alles andere, nur für den Fall, dass die Seite selbst negative Werte für z-index
Hier ist ein Beispiel als Ausschnitt
Und hier ist ein Beispiel außerhalb von SO , damit Sie es einfacher in voller Größe sehen können.
iframe s funktionieren auch
Beachten Sie, dass bei einer interaktiven Leinwandanimation die Elemente vor der Leinwand die Maus- / Berührungsereignisse verzehren. Es gibt keine einfache Lösung, die ich dafür kenne. Sie können alles außer diesem Canvas / Iframe als pointer-events: none markieren und den Canvas / Iframe als pointer-events: auto markieren, aber dann stoßen Sie auf das Problem, dass kein Text auf Ihrer Seite ausgewählt werden kann und keine Links angeklickt werden können. Sie könnten dann sagen <a> -Tags setzen, um pointer-events: auto zu haben, also funktionieren Links, aber ich bin mir sicher, dass es hier und da Probleme geben wird, abhängig davon, welche Informationen auf Ihrer Seite sind (versuchen, eine E-Mail-Adresse oder eine Adresse zu kopieren). usw. ...)