added lore
This commit is contained in:
parent
ae2a051b96
commit
0199d7e056
@ -32,8 +32,8 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
.plane:after
|
|
||||||
{
|
.plane:after {
|
||||||
bottom: 60%;
|
bottom: 60%;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
@ -44,8 +44,7 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content
|
.content {
|
||||||
{
|
|
||||||
/* 60 Sekunden Animation, die in 3 Sekunden eingeblendet wird */
|
/* 60 Sekunden Animation, die in 3 Sekunden eingeblendet wird */
|
||||||
animation: scroll 60s linear 3s;
|
animation: scroll 60s linear 3s;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -62,19 +61,64 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
particle {
|
||||||
|
border-radius: 50%;
|
||||||
|
left: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', init);
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
create_star_field(100);
|
||||||
|
}
|
||||||
|
|
||||||
|
function create_star_field(n) {
|
||||||
|
for (let i = 0; i < n; i++) {
|
||||||
|
create_star();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function create_star() {
|
||||||
|
|
||||||
|
const x = Math.floor(Math.random() * window.innerWidth);
|
||||||
|
const y = Math.floor(Math.random() * window.innerHeight);
|
||||||
|
|
||||||
|
const star = document.createElement('particle');
|
||||||
|
|
||||||
|
document.body.appendChild(star);
|
||||||
|
|
||||||
|
star.style.position = 'absolute';
|
||||||
|
star.style.opacity = '1';
|
||||||
|
star.style.zIndex = '-1';
|
||||||
|
|
||||||
|
const size = Math.round(Math.random() * 5);
|
||||||
|
|
||||||
|
star.style.height = `${size}px`;
|
||||||
|
star.style.width = `${size}px`;
|
||||||
|
|
||||||
|
star.style.background = '#ffffff';
|
||||||
|
|
||||||
|
star.style.left = `${x}px`;
|
||||||
|
star.style.top = `${y}px`;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="plane">
|
<div class="plane">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet dictum nunc. Phasellus a
|
<p>Der Astronaut <span>username</span> reiste durch die Galaxies und kämpfte für das Gute.</p>
|
||||||
metus purus. Mauris auctor neque ut efficitur condimentum. Vivamus in tortor consequat, rutrum neque in,
|
<p>Mit seinem Raumschiff, die <span>Ariane 5 ECA</span>, befreite er ganze <span>5 Planeten</span> von dem Bösen.</p>
|
||||||
vehicula ipsum. Vestibulum venenatis, lorem sit amet ultricies feugiat, tortor nisi euismod velit, at
|
<p>Ausgestattet mit <span>Schwebepizza</span>, <span>PV-Panel</span>, <span>Rover</span> und einer mutigen Crew, flog er ganze <span>5 Jahre</span> durch das All.</p>
|
||||||
elementum mi mi id sem. Etiam nec dolor quis lacus volutpat lacinia eget eget ante. Suspendisse id
|
<p>Mit dem Kopfgeld der Bösen, von ingesamt <span>5M Dollarn</span>, finanzierte er sich seine Heldensreise.</p>
|
||||||
iaculis enim. Aenean cursus leo accumsan eros pharetra, non tempus ipsum rutrum. Cras vel eros id odio
|
<p>Auf ein neues Abenteuer, <span>username</span>!</p>
|
||||||
lobortis imperdiet. Nunc urna dui, pretium a volutpat eu, imperdiet non ex. </p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user