updated parrlax effect and added hacktype to ghrepo title

Re-designed home page background to show random blob

2 files changed, 72 insertions, 3 deletions

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