Möglich, HTML-Inhalt oben auf einem Canvas (Landing Page) zu setzen

Question

Ich habe ein Canvas-Setup mit einer Anzahl von Partikeln, die sich um den Bildschirm bewegen. Wenn der Benutzer klickt, werden weitere Partikel hinzugefügt. Das Problem ist, dass dieses Partikelsystem für eine Zielseite ist.

Ich habe die Leinwand arbeiten, aber wenn ich Text auf der Zielseite hinzufügen möchte, kann ich nicht. Ist das möglich? Ich würde gerne "Willkommen" in der Mitte des Bildschirms haben, aber wenn ich es in den HTML-Code hinzufügen, wo die Partikel sind, ist es nicht sichtbar.

--- Meine HTML ---

<div id="particles-js"></div> 
<div class="count-particles"> 
    <span class="js-count-particles">--</span> particles 
</div> 

--- Die CSS ---

/* ---- reset ---- */ 

body { 
    margin: 0; 
    font:normal 75% Arial, Helvetica, sans-serif; 
} 

canvas { 
    display: block; 
    vertical-align: bottom; 
} 

/* ---- particles.js container ---- */ 

#particles-js { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-color: blue; 
    background-image: url(""); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: 50% 50%; 
} 

/* ---- stats.js ---- */ 

.count-particles{ 
    background: #000022; 
    position: absolute; 
    top: 48px; 
    left: 0; 
    width: 80px; 
    color: #13E8E9; 
    font-size: .8em; 
    text-align: left; 
    text-indent: 4px; 
    line-height: 14px; 
    padding-bottom: 2px; 
    font-family: Helvetica, Arial, sans-serif; 
    font-weight: bold; 
} 

.js-count-particles{ 
    font-size: 1.1em; 
} 

#stats, 
.count-particles{ 
    -webkit-user-select: none; 
    margin-top: 5px; 
    margin-left: 5px; 
} 

#stats{ 
    border-radius: 3px 3px 0 0; 
    overflow: hidden; 
} 

.count-particles{ 
    border-radius: 0 0 3px 3px; 
} 

ich eine Codepen.io Setup haben, wird jede Hilfe sehr geschätzt!

-Codepen.io - http://codepen.io/HoneyBadgerYT/pen/jqKZxo

Answer 1

Wenn Sie ein anderes Element hinzufügen (wie ein h2 oder div), dann müssen Sie, um ihm eine position:absolute und eine z-index, die höher ist als die z-index Ihrer #particle-js

ist

siehe unten html:

(. Beachten Sie, dass ich eine z-index Eigenschaft zu Ihrem #particle-js Elemente hinzugefügt, und ich fügte auch h2 Styling unterhalb)

<div id="particles-js"></div> 
 
<h2>WELCOME</h2> 
 

 

 
<div class="count-particles"> 
 
    <span class="js-count-particles">--</span> particles 
 
</div>

und CSS

/* ---- reset ---- */ 
 

 
body { 
 
    margin: 0; 
 
    font:normal 75% Arial, Helvetica, sans-serif; 
 
} 
 

 
canvas { 
 
    display: block; 
 
    vertical-align: bottom; 
 
} 
 

 
/* ---- particles.js container ---- */ 
 

 
#particles-js { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: blue; 
 
    background-image: url(""); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: 50% 50%; 
 
    z-index:1; 
 
} 
 

 
h2 { 
 
    position:absolute; 
 
    z-index:2; 
 
    width:100%; 
 
    text-align:center; 
 
    color:#ffffff; 
 
    top:0; 
 
    left:0; 
 
} 
 

 
/* ---- stats.js ---- */ 
 

 
.count-particles{ 
 
    background: #000022; 
 
    position: absolute; 
 
    top: 48px; 
 
    left: 0; 
 
    width: 80px; 
 
    color: #13E8E9; 
 
    font-size: .8em; 
 
    text-align: left; 
 
    text-indent: 4px; 
 
    line-height: 14px; 
 
    padding-bottom: 2px; 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    font-weight: bold; 
 
} 
 

 
.js-count-particles{ 
 
    font-size: 1.1em; 
 
} 
 

 
#stats, 
 
.count-particles{ 
 
    -webkit-user-select: none; 
 
    margin-top: 5px; 
 
    margin-left: 5px; 
 
} 
 

 
#stats{ 
 
    border-radius: 3px 3px 0 0; 
 
    overflow: hidden; 
 
} 
 

 
.count-particles{ 
 
    border-radius: 0 0 3px 3px; 
 
}

Answer 2

Sie können dies mit CSS tun

h1 { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    color: white; 
} 

html:

<div id="particles-js"></div> 

<h1>Welcome</h1> 
<div class="count-particles"> 
    <span class="js-count-particles">--</span> particles 
</div> 

siehe Arbeits demo