summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/css/ghrepo.css22
-rw-r--r--src/css/index.css170
-rw-r--r--src/css/style.css411
-rw-r--r--src/js/getrepo.js6
-rw-r--r--src/js/randomblob.js69
5 files changed, 413 insertions, 265 deletions
diff --git a/src/css/ghrepo.css b/src/css/ghrepo.css
index a620fad9..5d51517b 100644
--- a/src/css/ghrepo.css
+++ b/src/css/ghrepo.css
@@ -30,6 +30,9 @@
background: transparent;
}
+span,p,div {
+ transition: all .3s;
+}
body {
@@ -244,13 +247,14 @@ input:active,
/* border: 0.1px solid var(--accent); */
margin-bottom: 4em;
/* box-shadow: 0 0 10mm rgba(0,0,0,.7); */
+ transition: all 0.3s;
}
.repos:hover {
background: rgba(0, 0, 0, 0.3);
- box-shadow: 0 0 10mm rgba(0,0,0,.7);
- transform: scale(1.01);
- box-shadow: 0 0 20mm rgba(128,128,128,.7);
+ /* box-shadow: 0 0 10mm rgba(0,0,0,.7); */
+ /* transform: scale(1.01); */
+ /* box-shadow: 0 0 20mm rgba(128,128,128,.7); */
transition: all 0.5s;
}
@@ -286,7 +290,7 @@ input:active,
backdrop-filter: blur(20px);
-webkit-transition: all 0.5s;
transition: all 0.5s;
- scroll-snap-align: center
+ scroll-snap-align: center;
/* box-shadow: 0 0 10mm rgba(0,0,0,.7); */
/* background: rgba(128, 128, 128, 0.1); */
}
@@ -349,6 +353,11 @@ input:active,
transition: all 0.5s;
}
+.intro {
+ transform-style: preserve-3d;
+ perspective: 1000px;
+}
+
.user-info {
/* background: transparent; */
background: rgba(128, 128, 128, 0.2);
@@ -357,12 +366,17 @@ input:active,
/* box-shadow: 0 0 10mm rgba(0,0,0,.7); */
}
+.floattext {
+ transform: translateZ(200px);
+}
+
.repo {
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
box-shadow: 0 0 10mm rgba(0,0,0,.7);
overflow: auto;
overflow-x: hidden;
+ transition: all 0.3s
}
.rdescription {
diff --git a/src/css/index.css b/src/css/index.css
index f1e29f41..7f417533 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -2,50 +2,49 @@
/* --primary-color: mediumslateblue; */
/* } */
.wrapper {
- height: 100vh;
- width: 100%;
- top: 0;
- left: 0;
- overflow-x: hidden;
- -ms-overflow-style: none;
- scrollbar-width: none;
- z-index: -6;
+ height: 100vh;
+ width: 100%;
+ top: 0;
+ left: 0;
+ overflow-x: hidden;
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+ z-index: -6;
}
.wrapper::-webkit-scrollbar {
- display: none;
+ display: none;
}
/* main info window ======================================= */
.indexPage {
- overflow: hidden;
- top: 0;
- left: 0;
- margin: 0;
- padding: 0;
- width: 100%;
- height: 100%;
- background-color: rgb(20, 53, 85);
- background-image: url(/images/backgroundNightCity.jpg) ,url(/images/backgroundNightCity.webp);
- background-position: center;
- background-repeat: no-repeat;
- background-size: cover;
- color: #F4E8C1;
- z-index: -10;
+ overflow: hidden;
+ top: 0;
+ left: 0;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100%;
+ /* background-color: rgb(20, 53, 85);
+ background-image: url(/images/backgroundNightCity.jpg) ,url(/images/backgroundNightCity.webp); */
+ background-color: #05010d;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ color: #F4E8C1;
+ z-index: -10;
}
.window {
- position: relative;
- top: 15%;
- left: 10%;
- height: 70%;
- width: 80%;
- background: transparent;
- display: flex;
- justify-content: center;
- align-items: center;
- z-index: 999;
- /* transform-style: preserve-3d; */
- /* perspective: 1000px; */
+ position: relative;
+ top: 15%;
+ left: 10%;
+ height: 70%;
+ width: 80%;
+ background: transparent;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 999;
}
/* .window:after { */
@@ -72,66 +71,87 @@
/* } */
.window .windowWrap {
- position: relative;
- width: 100%;
- height: 100%;
- border: 1px solid rgba(255,255,255, .15);
- border-radius: 1em;
- -webkit-backdrop-filter: blur(16px);
- backdrop-filter: blur(16px);
- box-shadow: 0 0 10mm rgba(0,0,0,1);
- display: flex;
- justify-content: center;
- align-items: center;
- text-align: center;
- z-index: 11;
+ /* transform-style: preserve-3d; */
+ position: relative;
+ /* transform: perspective(1000px); */
+ width: 100%;
+ height: 100%;
+ border: 1px solid rgba(255,255,255,1);
+ border-radius: 1em;
+ -webkit-backdrop-filter: blur(16px);
+ backdrop-filter: blur(16px);
+ box-shadow: 0 0 10mm rgba(0,0,0,1);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ z-index: 11;
}
+/*
.window:hover,
.windowWrap:hover {
- transform: scale(1.1);
- -webkit-transition: all 0.3s;
- transition: all 0.3s;
-}
+ transform: scale(1.1);
+ -webkit-transition: transform 0.3s;
+ transition: transform 0.3s;
+} */
.window .windowWrap .text {
- position: relative;
- width: 100%;
- text-align: center;
- text-shadow: 10px 10px 10px black;
+ position: relative;
+ width: 100%;
+ text-align: center;
}
.window .windowWrap .text .title {
- /* z-index: -1; */
- /* transform: translateZ(30px); */
- font-family: monoton;
- font-size: 7vw;
- text-transform: uppercase
+ /* z-index: -1; */
+ /* transform: translateZ(30px); */
+ font-family: monoton;
+ font-size: 7vw;
+ text-transform: uppercase;
}
.description {
- /* z-index: -1; */
- /* transform: translateZ(30px); */
- font-family: rocksalt;
- font-size: 1.75vw;
+ /* z-index: -1; */
+ /* transform: translateZ(30px); */
+ font-family: rocksalt;
+ font-size: 1.75vw;
}
.title {
- text-shadow: 15px 15px 15px black;
- -webkit-transition: all 0.5s;
- transition: all 0.5s
+ text-shadow: 15px 15px 15px black;
+ -webkit-transition: all 0.5s;
+ transition: all 0.5s;
}
.title:hover {
- transform: scale(1.1);
- -webkit-transition: all 0.5s;
- transition: all 0.5s
+ transform: scale(1.1);
+ -webkit-transition: all 0.5s;
+ transition: all 0.5s
}
.window .windowWrap .text .br {
- display: block;
- height: 0;
- width: 0;
- margin-bottom: 5vh;
+ display: block;
+ height: 0;
+ width: 0;
+ margin-bottom: 5vh;
+}
+
+.text {
+ transform: translateZ(200px);
+ text-shadow: 0 1px 0 #e9e6e6,
+ 0 2px 0 #e9e6e6,
+ 0 3px 0 #e9e6e6,
+ 0 4px 0 #e9e6e6,
+ 0 5px 0 #e9e6e6,
+ 0 6px 0 #e9e6e6,
+ 0 7px 0 #e9e6e6,
+ 0 8px 0 #e9e6e6,
+ 0 9px 0 #e9e6e6,
+ 0 10px 0 #e9e6e6,
+ 0 30px 10px rgba(0,0,0,.7);
}
+.windowWrap, .tilt {
+ transform-style: preserve-3d;
+ perspective: 1000px;
+} \ No newline at end of file
diff --git a/src/css/style.css b/src/css/style.css
index 0240166a..7a75bc53 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,32 +1,32 @@
:root {
- --topBarHeight: 10%;
+ --topBarHeight: 10%;
}
@font-face {
- font-family: hacked;
- src: url(/fonts/Hacked-KerX.ttf);
+ font-family: hacked;
+ src: url(/fonts/Hacked-KerX.ttf);
}
@font-face {
- font-family: smooth;
- src: url(/fonts/SmoothElegantRegular-ZLv3.ttf);
+ font-family: smooth;
+ src: url(/fonts/SmoothElegantRegular-ZLv3.ttf);
}
@font-face {
- font-family: liga;
- src: url(/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf);
+ font-family: liga;
+ src: url(/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf);
}
@font-face {
- font-family: big;
- src: url(/fonts/Big500-8MLOM.ttf);
+ font-family: big;
+ src: url(/fonts/Big500-8MLOM.ttf);
}
@font-face {
- font-family: monoton;
- src: url(/fonts/Monoton.ttf);
+ font-family: monoton;
+ src: url(/fonts/Monoton.ttf);
}
@font-face {
- font-family: rocksalt;
- src: url(/fonts/RockSalt-Regular.ttf);
+ font-family: rocksalt;
+ src: url(/fonts/RockSalt-Regular.ttf);
}
@font-face {
@@ -36,18 +36,18 @@ src: url(/fonts/audiowide.ttf);
/* page setup ============================================= */
* {
- box-sizing: border-box;
- padding: 0;
- margin: 0;
- font-family: liga;
- text-shadow: 0px 0px 1px black;
- transition: all 0.3s;
+ box-sizing: border-box;
+ padding: 0;
+ margin: 0;
+ font-family: liga;
+ text-shadow: 0px 0px 1px black;
+ /* transition: all 0.3s; */
}
body {
- top: 0;
- left: 0;
- transition: background 1s ease-in-out;
+ top: 0;
+ left: 0;
+ transition: background 1s ease-in-out;
}
body::-webkit-scrollbar {
@@ -58,242 +58,266 @@ display: none;
@keyframes slideInTop {
from {
- transform: translateY(-300px);
+ transform: translateY(-300px);
}
to {
- transform: translateY(0);
+ transform: translateY(0);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
- transform: translateY(0px);
+ transform: translateY(0px);
}
40% {
- transform: translateY(30px);
+ transform: translateY(30px);
}
80% {
- transform: translateY(-15px);
+ transform: translateY(-15px);
}
}
@keyframes zoomIn {
0% {
- transform: scale(0.01);
+ transform: scale(0.01);
}
85% {
- transform: scale(1.1);
+ transform: scale(1.1);
}
100% {
- transform: scale(1);
+ transform: scale(1);
}
}
@keyframes zoomOut {
0% {
- transform: scale(1);
+ transform: scale(1);
}
100% {
- transform: scale(0.01);
+ transform: scale(0.01);
}
}
@keyframes reveal {
0% {
- -webkit-filter: blur(32px);
- -moz-filter: blur(32px);
- -o-filter: blur(32px);
- -ms-filter: blur(32px);
- filter: blur(32px);
- -webkit-backdrop-filter: blur(32px);
- backdrop-filter: blur(32px);
- transform: scale(2);
+ -webkit-filter: blur(32px);
+ -moz-filter: blur(32px);
+ -o-filter: blur(32px);
+ -ms-filter: blur(32px);
+ filter: blur(32px);
+ -webkit-backdrop-filter: blur(32px);
+ backdrop-filter: blur(32px);
+ transform: scale(2);
}
}
@keyframes shake {
- 0% { transform: rotate(0deg); }
- 25% { transform: rotate(.5deg); }
- 50% { transform: rotate(0eg); }
- 75% { transform: rotate(-.5deg); }
- 100% { transform: rotate(0deg); }
+ 0% { transform: rotate(0deg); }
+ 25% { transform: rotate(.5deg); }
+ 50% { transform: rotate(0eg); }
+ 75% { transform: rotate(-.5deg); }
+ 100% { transform: rotate(0deg); }
}
@keyframes background-pan {
- from {
- background-position: 0% center;
- }
- to {
- background-position: -200% center;
- }
+ from {
+ background-position: 0% center;
+ }
+ to {
+ background-position: -200% center;
+ }
}
+
+@keyframes fadeIn {
+ from {
+ scale: 0.8;
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ scale: 1;
+ }
+}
+
+@keyframes fadeOut {
+ from {
+
+ }
+ to {
+ opacity: 0;
+ scale: 0.8
+ }
+}
+
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
/* animate class */
.animate {
- -webkit-animation-duration: 0.5s;
- animation-duration: 0.5s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
+ -webkit-animation-duration: 0.5s;
+ animation-duration: 0.5s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
}
.animate.animate--infinite {
- -webkit-animation-iteration-count: infinite;
- animation-iteration-count: infinite;
+ -webkit-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
}
.animate.animation--delay-1s {
- -webkit-animation-delay: 1s;
- animation-delay: 1s;
+ -webkit-animation-delay: 1s;
+ animation-delay: 1s;
}
.animate.animation--delay-p5s {
- -webkit-animation-duration: 0.5s;
- animation-duration: 0.5s;
- animation-delay: 0.5s;
+ -webkit-animation-duration: 0.5s;
+ animation-duration: 0.5s;
+ animation-delay: 0.5s;
}
.animate.animation--delay-p3s {
- -webkit-animation-duration: 0.3s;
- animation-duration: 0.3s;
- animation-delay: 0.3s;
+ -webkit-animation-duration: 0.3s;
+ animation-duration: 0.3s;
+ animation-delay: 0.3s;
}
.animate.animation--fast {
- -webkit-animation-duration: 0.3s;
- animation-duration: 0.3s;
+ -webkit-animation-duration: 0.3s;
+ animation-duration: 0.3s;
}
.animate.animation--slow {
- -webkit-animation-duration: 1s;
- animation-duration: 1s;
+ -webkit-animation-duration: 1s;
+ animation-duration: 1s;
}
/* real utility classes */
.animate.slideInTop {
- animation-name: slideInTop;
- -webkit-transition-timing-function: ease-in;
- transition-timing-function: ease-in;
- -webkit-animation-timing-function: ease-in;
- animation-timing-function: ease-in;
+ animation-name: slideInTop;
+ -webkit-transition-timing-function: ease-in;
+ transition-timing-function: ease-in;
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
}
.animate.bounce {
- -webkit-animation-name: bounce;
- animation-name: bounce;
+ -webkit-animation-name: bounce;
+ animation-name: bounce;
}
.animate.zoomIn {
- -webkit-transition-timing-function: linear;
- transition-timing-function: linear;
- -webkit-animation-name: reveal;
- animation-name: zoomIn;
- animation-name: zoomIn;
+ -webkit-transition-timing-function: linear;
+ transition-timing-function: linear;
+ -webkit-animation-name: reveal;
+ animation-name: zoomIn;
+ animation-name: zoomIn;
}
.animate.zoomOut {
- -webkit-transition-timing-function: linear;
- transition-timing-function: linear;
- -webkit-animation-name: zoomOut;
- animation-name: zoomOut;
+ -webkit-transition-timing-function: linear;
+ transition-timing-function: linear;
+ -webkit-animation-name: zoomOut;
+ animation-name: zoomOut;
}
.animate.reveal {
- -webkit-transition-timing-function: linear;
- transition-timing-function: linear;
- -webkit-animation-name: reveal;
- animation-name: reveal;
+ animation-duration: 50ms;
+ -webkit-transition-timing-function: linear;
+ transition-timing-function: linear;
+ -webkit-animation-name: reveal;
+ animation-name: reveal;
}
.animate.shake {
- -webkit-animation-name: shake;
- animation-name: shake;
+ -webkit-animation-name: shake;
+ animation-name: shake;
}
/* transition */
-* {
- -webkit-transition: all 0.3s;
- transition: all 0.3s;
-}
+/* * {
+ -webkit-transition: all 0.3s;
+ transition: all 0.3s;
+} */
.js-tilt-glare {
- border-radius: 18px;
- overflow: hidden;
+ border-radius: 18px;
+ overflow: hidden;
}
/* topbar styles ========================================== */
header {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 3em;
- justify-content: space-between;
- align-items:center;
- /* background: color(0, 0, 0, .1); */
- z-index: 1000;
- background: rgba(128, 128, 128, 0.2)
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 3em;
+ justify-content: space-between;
+ align-items:center;
+ /* background: color(0, 0, 0, .1); */
+ z-index: 1000;
+ background: rgba(0, 0, 0, 0.2);
+ transition: all 0.3s;
}
.navBar a {
- position: relative;
- height: 100%;
- font-size: 5mm;
- text-transform: capitalize;
- text-align: center;
- text-decoration: none;
- margin-left: 5mm;
- margin-right: 5mm;
- padding-top: 3mm;
- padding-bottom: 3mm;
- border-radius: 8px;
- color: #F4E8C1;
+ position: relative;
+ height: 100%;
+ font-size: 5mm;
+ text-transform: capitalize;
+ text-align: center;
+ text-decoration: none;
+ margin-left: 5mm;
+ margin-right: 5mm;
+ padding-top: 3mm;
+ padding-bottom: 3mm;
+ border-radius: 8px;
+ color: #F4E8C1;
}
.navBar .hleft a {float: left;}
.navBar .hright a {float: right;}
.navBar a::after {
- content: '';
- position: absolute;
- left: 0;
- bottom: 0;
- width: 100%;
- height: 1mm;
- background: rgba(128, 128, 128, 0.2);
- border-radius: 1mm;
- transform: scaleX(0);
- -webkit-transition: all 0.3s;
- transition: all 0.3s;
+ content: '';
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ height: 1mm;
+ background: rgba(128, 128, 128, 0.2);
+ border-radius: 1mm;
+ transform: scaleX(0);
+ -webkit-transition: all 0.3s;
+ transition: all 0.3s;
}
.navBar a:hover::after {
- transform: scaleX(1.1);
+ transform: scaleX(1.1);
}
.navBar a:hover {
- /* background: rgba(255, 255, 255, 0.2); */
- /* outline: ridge rgba(128, 128, 128, .6); */
- -webkit-backdrop-filter: blur(10px);
- backdrop-filter: blur(10px);
- -webkit-transition: all 1s;
- transition: all 1s
+ /* background: rgba(255, 255, 255, 0.2); */
+ /* outline: ridge rgba(128, 128, 128, .6); */
+ -webkit-backdrop-filter: blur(10px);
+ backdrop-filter: blur(10px);
+ -webkit-transition: all 1s;
+ transition: all 1s
}
.navBar a.active::after {
- content: '';
- position: absolute;
- left: 0;
- bottom: 0;
- width: 100%;
- height: 1mm;
- background: rgba(128, 128, 128, .9);
- border-radius: 1mm;
- transform: scaleX(1);
+ content: '';
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ height: 1mm;
+ background: rgba(128, 128, 128, .9);
+ border-radius: 1mm;
+ transform: scaleX(1);
}
.navBar:active,
@@ -303,30 +327,31 @@ header:hover,
#navBarHeader:hover,
#navBarHeader:active
{
- transform: scale(1.005);
- -webkit-backdrop-filter: blur(10px);
- backdrop-filter: blur(10px);
- transition: all 0.5s
+ transform: scale(1.005);
+ -webkit-backdrop-filter: blur(10px);
+ backdrop-filter: blur(10px);
+ transition: all 0.5s
}
.navBar,
header,
#navBarHeader {
- -webkit-backdrop-filter: blur(2.5px);
- backdrop-filter: blur(2.5px);
+ -webkit-backdrop-filter: blur(2.5px);
+ backdrop-filter: blur(2.5px);
+ transition: all 0.5s
}
/* other ================================================== */
.contents {
- margin: 0;
- padding: 0;
- width: 100%;
- height: 100%;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100%;
}
section {
- position: relative;
+ position: relative;
}
.wrapper {
@@ -337,29 +362,49 @@ perspective: 10px;
}
a:hover {
- font-weight: bold;
- text-decoration: underline;
- text-decoration-thickness: 3px;
- -webkit-text-decoration-line: underline;
- text-decoration-line: underline;
- cursor: pointer;
- transition-timing-function: cubic-bezier(.4,0,.2,1);
- transition-duration: .15s;
- text-underline-offset: 1px;
- position: relative;
- height: 100%;
- font-size: 5mm;
- text-transform: capitalize;
- text-align: center;
- margin-left: 5mm;
- margin-right: 5mm;
- padding-top: 3mm;
- padding-bottom: 3mm;
- font-weight: bold;
- -webkit-transition: all .5s;
- transition: all .5s;
- /* border-radius: 8px; */
- /* color: #F4E8C1; */
-}
-
-/* TODO: Check dest if it compatible all browser */ \ No newline at end of file
+ font-weight: bold;
+ text-decoration: underline;
+ text-decoration-thickness: 3px;
+ -webkit-text-decoration-line: underline;
+ text-decoration-line: underline;
+ cursor: pointer;
+ transition-timing-function: cubic-bezier(.4,0,.2,1);
+ transition-duration: .15s;
+ text-underline-offset: 1px;
+ position: relative;
+ height: 100%;
+ font-size: 5mm;
+ text-transform: capitalize;
+ text-align: center;
+ margin-left: 5mm;
+ margin-right: 5mm;
+ padding-top: 3mm;
+ padding-bottom: 3mm;
+ font-weight: bold;
+ -webkit-transition: all .5s;
+ transition: all .5s;
+ /* border-radius: 8px; */
+ /* color: #F4E8C1; */
+}
+
+.blob {
+ min-height: 75%;
+ min-width: 75%;
+ /* aspect-ratio: 1; */
+ background-color: #fff;
+ background: -webkit-gradient(linear, left top, right top, from(#00FFFF), to(mediumpurple));
+ background: linear-gradient(90deg,#0ff,#9370db);
+ border-radius: 50%;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+ filter: blur(7vmax);
+ -webkit-filter: blur(7vmax);
+ height: 15vmax;
+ left: 50%;
+ opacity: .8;
+ position: absolute;
+ top: 50%;
+ translate: -50% -50%;
+ width: 20vmax;
+ z-index: 0;
+ animation-fill-mode: forwards;
+} \ No newline at end of file
diff --git a/src/js/getrepo.js b/src/js/getrepo.js
index 840c4560..b0f5c25d 100644
--- a/src/js/getrepo.js
+++ b/src/js/getrepo.js
@@ -18,12 +18,12 @@ getProfile();
const displayProfile = (profile) => {
const userInfo = document.querySelector('.user-info');
userInfo.innerHTML = `
- <figure>
+ <figure class="floattext">
<a href=${profile.html_url}><img alt="user avatar" src=${profile.avatar_url}></a>
</figure>
- <div>
+ <div class="floattext">
<!-- <h2><a href=${profile.blog}><strong>${profile.name}</strong></a></h2> -->
- <h2><a href=/><strong class="usertitle">${profile.name}</strong></a></h2>
+ <h2><a href=/><strong data-value="${profile.name}" class="usertitle hacktype">${profile.name}</strong></a></h2>
<!-- <h2><a href=${profile.html_url}><strong>${profile.name}</strong></a></h2> -->
<p>${profile.bio}</p>
<p>
diff --git a/src/js/randomblob.js b/src/js/randomblob.js
new file mode 100644
index 00000000..59be98ef
--- /dev/null
+++ b/src/js/randomblob.js
@@ -0,0 +1,69 @@
+var blob = document.querySelector('.blob')
+let isFirstTime = true;
+
+function getRandomInt(min, max) {
+ min = Math.ceil(min);
+ max = Math.floor(max);
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function setRandomBlob() {
+ blob.style.width = getRandomInt(50, 100) + '%';
+ blob.style.height = getRandomInt(50, 100) + '%';
+ blob.style.rotate = getRandomInt(0, 360) + 'deg';
+}
+
+function randomPosition(element) {
+ var x = getRandomInt(0, window.innerWidth);
+ var y = getRandomInt(0, window.innerHeight);
+ element.style.position = 'absolute';
+ element.style.left = x + 'px';
+ element.style.top = y + 'px';
+}
+
+
+function main() {
+ if (!isFirstTime) {
+ let fadeOutAnimation = blob.animate([
+ // keyframes
+ { opacity: .40 },
+ { opacity: 0 }
+ ], {
+ // timing options
+ duration: 3000,
+ iterations: 1,
+ fill: 'forwards'
+ });
+ fadeOutAnimation.onfinish = () => {
+ setRandomBlob();
+ randomPosition(blob);
+ blob.animate([
+ // keyframes
+ { opacity: 0 },
+ { opacity: .40 }
+ ], {
+ // timing options
+ duration: 3000,
+ iterations: 1,
+ fill: 'forwards'
+ });
+ };
+ } else {
+ setRandomBlob();
+ randomPosition(blob);
+ blob.animate([
+ // keyframes
+ { opacity: 0 },
+ { opacity: .40 }
+ ], {
+ // timing options
+ duration: 3000,
+ iterations: 1,
+ fill: 'forwards'
+ });
+ isFirstTime = false;
+ }
+ setTimeout(main, getRandomInt(7500, 30000));
+}
+
+main(); \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2026-11-01 15:48:39 +0000