JavaScript animation

GameLibrary/wwwroot/css/site.css

@@ -20,18 +20,18 @@ h1 {
     color: #FFD43B;
 }
 
-    .nav-link:hover {
-        color: #FFA500;
-    }
+.nav-link:hover {
+    color: #FFA500;
+}
 
 .btn {
     background-color: #420599;
     color: #FFD43B;
 }
 
-    .btn:hover {
-        background-color: #5935c4;
-    }
+.btn:hover {
+    background-color: #5935c4;
+}
 
 .container {
     width: 90%;
@@ -69,18 +69,19 @@ h1 {
     animation: fadeIn 1.5s ease-in-out;
 }
 
-    .hero-text h1 {
-        font-size: 4em;
-        font-weight: bold;
-        text-transform: uppercase;
-    }
+.hero-text h1 {
+    font-size: 4em;
+    font-weight: bold;
+    text-transform: uppercase;
+}
 
-    .hero-text h2 {
-        margin-top: 0.5em;
-        font-size: 1.8em;
-    }
+.hero-text h2 {
+    margin-top: 0.5em;
+    font-size: 1.8em;
+}
 
-.cta-button, .login-button {
+.cta-button,
+.login-button {
     margin-top: 20px;
     font-size: 1.2em;
     display: inline-block;
@@ -93,11 +94,12 @@ h1 {
     transition: background-color 0.3s, border-color 0.3s;
 }
 
-    .cta-button:hover, .login-button:hover {
-        background-color: #FF8C00;
-        color: white;
-        border-color: #FF8C00;
-    }
+.cta-button:hover,
+.login-button:hover {
+    background-color: #FF8C00;
+    color: white;
+    border-color: #FF8C00;
+}
 
 .scroll-indicator {
     position: absolute;
@@ -120,11 +122,11 @@ h1 {
     box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
 }
 
-    .about-section h2 {
-        font-size: 2.5em;
-        color: #FFD700;
-        margin-bottom: 20px;
-    }
+.about-section h2 {
+    font-size: 2.5em;
+    color: #FFD700;
+    margin-bottom: 20px;
+}
 
 .feature-card {
     background: #000235;
@@ -134,20 +136,20 @@ h1 {
     transition: transform 0.3s, box-shadow 0.3s;
 }
 
-    .feature-card:hover {
-        transform: translateY(-5px);
-        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
-    }
+.feature-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
+}
 
-    .feature-card i {
-        font-size: 2.5em;
-        color: #FFD700;
-        margin-bottom: 10px;
-    }
+.feature-card i {
+    font-size: 2.5em;
+    color: #FFD700;
+    margin-bottom: 10px;
+}
 
-    .feature-card h5 {
-        color: white;
-    }
+.feature-card h5 {
+    color: white;
+}
 
 /* Footer */
 .footer {
@@ -159,13 +161,13 @@ h1 {
     color: white;
 }
 
-    .footer a {
-        color: #FFD700;
-    }
+.footer a {
+    color: #FFD700;
+}
 
-        .footer a:hover {
-            color: #FFA500;
-        }
+.footer a:hover {
+    color: #FFA500;
+}
 
 /* Keyframes for animations */
 @keyframes fadeIn {
@@ -181,7 +183,9 @@ h1 {
 }
 
 @keyframes bounce {
-    0%, 100% {
+
+    0%,
+    100% {
         transform: translateY(0);
     }
 

GameLibrary/wwwroot/js/site.js

@@ -1,8 +1,110 @@
-function previewImage(event) {
+function previewImage(event) {
     const files = event.target.files;
     if (files.length > 0) {
         const preview = document.getElementById('imagePreview');
         preview.src = URL.createObjectURL(files[0]);
         preview.style.display = 'block';
     }
 }
+
+// Function to get a random integer between min and max (inclusive)
+function getRandomInt(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+// Function to get a random integer between min and max (inclusive)
+function getRandomInt1(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+// Flight path configuration for the first spaceship
+const flightPath = {
+    curviness: 1.5,
+    autoRotate: true,
+    values: Array.from({ length: 15 }, (_, i) => ({
+        x: window.innerWidth * (i + 1) * 0.1,
+        y: window.innerHeight * getRandomInt(-10, -1) * 0.1
+    }))
+};
+
+// Flight path configuration for the second spaceship
+const flightPath1 = {
+    curviness: 1.5,
+    autoRotate: false,
+    values: Array.from({ length: 15 }, (_, i) => ({
+        x: window.innerWidth * (i + 1) * -0.1,
+        y: window.innerHeight * getRandomInt1(-10, -1) * 0.1
+    }))
+};
+
+// Create a new timeline for the first spaceship animation
+const tween = new TimelineLite();
+
+// Create a new timeline for the second spaceship animation
+const tween1 = new TimelineLite();
+
+// Add the first spaceship animation to the timeline
+tween.add(
+    TweenLite.to(".RRspaceship", 60, {
+        bezier: flightPath,
+        ease: Power1.easeInOut
+    })
+);
+
+// Add the second spaceship animation to the timeline
+tween1.add(
+    TweenLite.to(".Uspaceship", 60, {
+        bezier: flightPath1,
+        ease: Power1.easeInOut
+    })
+);
+
+// Animate hero section elements on page load
+document.addEventListener("DOMContentLoaded", function () {
+    const heroTitle = document.getElementsByClassName("hero-title")[0];
+    const heroSubtitle = document.getElementsByClassName("hero-subtitle")[0];
+    const heroDescription = document.getElementsByClassName("hero-description")[0];
+    const heroButtons = document.getElementsByClassName("hero-buttons")[0];
+
+    // Set initial opacity to 0 for all hero section elements
+    TweenLite.set([heroTitle, heroSubtitle, heroDescription, heroButtons], { opacity: 0 });
+
+    // Animate opacity to 1 with delays
+    TweenLite.to(heroTitle, 1, { opacity: 1, delay: 1 });
+    TweenLite.to(heroSubtitle, 1, { opacity: 1, delay: 3 });
+    TweenLite.to(heroDescription, 1, { opacity: 1, delay: 5 });
+    TweenLite.to(heroButtons, 1, { opacity: 1, delay: 8 });
+});
+
+// Add hover and touch effects to feature cards
+document.addEventListener('DOMContentLoaded', function () {
+    const featureCards = document.querySelectorAll('.feature-card');
+
+    // Desktop screen size
+    featureCards.forEach(card => {
+        card.addEventListener('mouseover', function () {
+            card.style.transform = 'translateY(-1rem)';
+            card.style.boxShadow = '0px 1rem 3rem rgba(138, 43, 226, 1)';
+        });
+
+        card.addEventListener('mouseout', function () {
+            card.style.transform = 'translateY(0)';
+            card.style.boxShadow = '0 .125rem .25rem rgba(0, 0, 0, .075)';
+        });
+    });
+
+    // Mobile screen size
+    if (window.innerWidth <= 600) {
+        featureCards.forEach(card => {
+            card.addEventListener('touchstart', function () {
+                card.style.transform = 'translateY(-1rem)';
+                card.style.boxShadow = '0px 1rem 3rem rgba(138, 43, 226, 1)';
+            });
+
+            card.addEventListener('touchend', function () {
+                card.style.transform = 'translateY(0)';
+                card.style.boxShadow = '0 .125rem .25rem rgba(0, 0, 0, .075)';
+            });
+        });
+    }
+});