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 config = JSON.parse(fs.readFileSync(path.join(__dirname, 'config.json')))
|
||||||
var highlightedWords = config.highlightedWords
|
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) {
|
function converter(html) {
|
||||||
var highTable = Object.keys(highlightedWords)
|
var highTable = Object.keys(highlightedWords)
|
||||||
for (let index = 0; index < highTable.length; index++) {
|
for (let index = 0; index < highTable.length; index++) {
|
||||||
|
|
@ -12,6 +47,8 @@ function converter(html) {
|
||||||
html = html.replaceAll(term, replacement)
|
html = html.replaceAll(term, replacement)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html = html.replaceAll("{BG_EFFECT}", makeStars())
|
||||||
|
|
||||||
return html
|
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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Welcome to Violet's Purgatory</h1>
|
<h1>Welcome to <span>Violet's Purgatory</span></h1>
|
||||||
|
{BG_EFFECT}
|
||||||
<main>
|
<main>
|
||||||
<p>Currently i'm working on the new system for word highlighting!</p>
|
<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
|
<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>
|
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>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>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -24,21 +24,35 @@ main {
|
||||||
animation: fadeDelay 3s cubic-bezier(0.075, 0.82, 0.165, 1);
|
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);
|
animation: mainText 3s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||||
margin: auto;
|
margin: auto;
|
||||||
max-width: 75%;
|
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 {
|
@keyframes mainText {
|
||||||
0% {
|
0% {
|
||||||
transform: translateY(50vh) scale(1.5);
|
transform: translateY(50vh) scale(1.5);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
height: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
50% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
height: 0px;
|
||||||
transform: translateY(50vh) scale(1);
|
transform: translateY(50vh) scale(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: translateY(0) scale(1);
|
transform: translateY(0) scale(1);
|
||||||
}
|
}
|
||||||
|
|
@ -48,13 +62,16 @@ body > h1 {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
33% {
|
33% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
66% {
|
66% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(25vh)
|
transform: translateY(25vh)
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: none;
|
transform: none;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue