Stars
This commit is contained in:
GitHub
parent
8c05dff3fd
commit
07edad0ea7
4 changed files with 151 additions and 2 deletions
|
|
@ -4,6 +4,41 @@ fs = require('fs')
|
|||
var config = JSON.parse(fs.readFileSync(path.join(__dirname, 'config.json')))
|
||||
var highlightedWords = config.highlightedWords
|
||||
|
||||
function makeStars() {
|
||||
var html = ""
|
||||
|
||||
for (let index = 0; index < 15; index++) {
|
||||
html += `<div class="star"></div>`
|
||||
}
|
||||
html += "<style>"
|
||||
for (let index = 0; index < 15; index++) {
|
||||
html += `
|
||||
.star:nth-of-type(${index + 1}) {
|
||||
animation: starAnim${index} ${15 + (Math.random() * 15)}s linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation-delay: ${-Math.random() * 15}s;
|
||||
}
|
||||
`
|
||||
var rando = Math.random() * 100
|
||||
html += `@keyframes starAnim${index} {
|
||||
0% {
|
||||
top: -10vh;
|
||||
right: ${rando}vw;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: 110vh;
|
||||
right: calc(${rando}vw + ${5 - (Math.random() * 10)}vw);
|
||||
}
|
||||
}`
|
||||
|
||||
}
|
||||
html += "</style>"
|
||||
|
||||
return html
|
||||
}
|
||||
|
||||
function converter(html) {
|
||||
var highTable = Object.keys(highlightedWords)
|
||||
for (let index = 0; index < highTable.length; index++) {
|
||||
|
|
@ -12,6 +47,8 @@ function converter(html) {
|
|||
html = html.replaceAll(term, replacement)
|
||||
}
|
||||
|
||||
html = html.replaceAll("{BG_EFFECT}", makeStars())
|
||||
|
||||
return html
|
||||
}
|
||||
|
||||
|
|
|
|||
85
resources/stars.html
Normal file
85
resources/stars.html
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<!-- div.star#starn${⬤}*8 -->
|
||||
<div class="star"></div>
|
||||
<div class="star"></div>
|
||||
<div class="star"></div>
|
||||
<div class="star"></div>
|
||||
<div class="star"></div>
|
||||
<div class="star"></div>
|
||||
<div class="star"></div>
|
||||
<div class="star"></div>
|
||||
|
||||
<style>
|
||||
.star {
|
||||
position: fixed;
|
||||
z-index: -2;
|
||||
visibility: hidden;
|
||||
font-size: 0.35rem;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: radial-gradient(white, rgb(255, 255, 255, 0.5) 10%, transparent 50%);
|
||||
}
|
||||
|
||||
.star:nth-of-type(1) {
|
||||
animation: starAnim1 20s linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.star:nth-of-type(2) {
|
||||
animation: starAnim2 27s linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.star:nth-of-type(3) {
|
||||
animation: starAnim3 23s linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.star:nth-of-type(4) {
|
||||
animation: starAnim4 39s linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.star:nth-of-type(5) {
|
||||
animation: starAnim5 30s linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.star:nth-of-type(6) {
|
||||
animation: starAnim6 15s linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.star:nth-of-type(7) {
|
||||
animation: starAnim7 23s linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.star:nth-of-type(8) {
|
||||
animation: starAnim8 18s linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
|
||||
@keyframes starAnim1 {
|
||||
0% {
|
||||
top: -10vh;
|
||||
right: 10vw;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: 110vh;
|
||||
right: 20vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -22,12 +22,22 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Welcome to Violet's Purgatory</h1>
|
||||
<h1>Welcome to <span>Violet's Purgatory</span></h1>
|
||||
{BG_EFFECT}
|
||||
<main>
|
||||
<p>Currently i'm working on the new system for word highlighting!</p>
|
||||
<p>You can see that it is pretty much the same as before, outside of the code being a little bit shorter and
|
||||
more dispersed (I didn't know until recently that "replaceAll" was a function...)</p>
|
||||
<p>The big difference, is unlike the original site, this can apply to all pages!</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae sint magnam laborum architecto ratione est illo praesentium nemo dolorem quisquam at ipsum dignissimos accusantium, tenetur optio nisi culpa sapiente eum!
|
||||
Aperiam, iste. Distinctio iste rem minus explicabo aut, nostrum voluptatum earum sit eveniet, qui harum! At eaque minus dolor, aliquam reiciendis dicta, obcaecati magni dolore nulla vero tempore. Dolor, odio.
|
||||
Fugiat distinctio temporibus ipsa corporis. Rem suscipit atque enim debitis illo animi reiciendis, aliquid ea, neque corporis aut asperiores reprehenderit repudiandae porro veritatis. Autem magni eius enim amet expedita molestiae!
|
||||
Aspernatur ipsam unde porro non, veritatis error! Ipsam nisi fugiat totam, dolore magnam, placeat aperiam aliquam porro necessitatibus et corrupti libero ea officia odio ad quisquam beatae rerum cumque aspernatur.
|
||||
Earum officia quae doloribus culpa veritatis ea architecto provident, nesciunt, assumenda excepturi ipsam pariatur incidunt nobis animi quis fugiat saepe autem a alias tenetur adipisci fuga eos quidem repellat. Fugiat?
|
||||
Pariatur incidunt maxime corrupti dolores impedit ullam quos, in architecto perferendis, culpa sint? Aspernatur impedit repudiandae hic eum veritatis molestiae debitis, incidunt ut pariatur provident explicabo nemo id molestias cumque.
|
||||
Ab cumque accusamus alias. Temporibus beatae assumenda, accusamus nisi vitae qui laboriosam, animi minima sequi officia id exercitationem aliquid quaerat ipsum neque inventore, sint delectus sit dolorem quod! Error, repellendus?
|
||||
Sapiente, minus autem, placeat fugit ipsam iste consequuntur quidem, aperiam natus vero labore reiciendis itaque temporibus non porro? Nostrum laboriosam debitis enim amet? Possimus non sed quas magnam placeat aliquid.</p>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -24,21 +24,35 @@ main {
|
|||
animation: fadeDelay 3s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
|
||||
body > h1 {
|
||||
body>h1 {
|
||||
animation: mainText 3s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
margin: auto;
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
.star {
|
||||
position: fixed;
|
||||
z-index: -2;
|
||||
visibility: hidden;
|
||||
font-size: 0.35rem;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: radial-gradient(white, rgb(255, 255, 255, 0.5) 10%, transparent 50%);
|
||||
}
|
||||
|
||||
@keyframes mainText {
|
||||
0% {
|
||||
transform: translateY(50vh) scale(1.5);
|
||||
opacity: 0;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
height: 0px;
|
||||
transform: translateY(50vh) scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
|
@ -48,13 +62,16 @@ body > h1 {
|
|||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
33% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
66% {
|
||||
opacity: 0;
|
||||
transform: translateY(25vh)
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
|
|
|
|||
Loading…
Reference in a new issue