diff --git a/GameLibrary/Pages/Index.cshtml b/GameLibrary/Pages/Index.cshtml index 482e5cf..3ef0afb 100644 --- a/GameLibrary/Pages/Index.cshtml +++ b/GameLibrary/Pages/Index.cshtml @@ -9,356 +9,356 @@ -
- - -
- -
-
-

Discover Our Library

-

Review And Collect Your Games

-

Create a free account or log in to start your journey.

-
- Create a Free Account - -
-
-
- Scroll Down
- - chevron-double-down -
-
- - spaceship - spaceship1 - - -
-
-

What Is GameLibrary?

-

- GameLibrary is the ultimate platform for gamers. Track your game collection, review the games you - love, and - add upcoming titles to your library. Join a vibrant community of gaming enthusiasts today! -

-
-
-
- - - - -
Track Your Games
-

Keep an organized list of all your favorite games in one place.

-
-
-
-
- - - - -
Review & Share
-

Share your reviews and ratings with the gaming community.

-
-
-
-
- - - - -
Plan for the Future
-

Stay updated with upcoming game releases and add them to your wishlist.

-
-
-
-
-
-
- - - - - - - +
+ + +
+ +
+
+

Discover Our Library

+

Review And Collect Your Games

+

Create a free account or log in to start your journey.

+
+ Create a Free Account + +
+
+
+ Scroll Down
+ + chevron-double-down +
+
+ + spaceship + spaceship1 + + +
+
+

What Is GameLibrary?

+

+ GameLibrary is the ultimate platform for gamers. Track your game collection, review the games you + love, and + add upcoming titles to your library. Join a vibrant community of gaming enthusiasts today! +

+
+
+
+ + + + +
Track Your Games
+

Keep an organized list of all your favorite games in one place.

+
+
+
+
+ + + + +
Review & Share
+

Share your reviews and ratings with the gaming community.

+
+
+
+
+ + + + +
Plan for the Future
+

Stay updated with upcoming game releases and add them to your wishlist.

+
+
+
+
+
+
+ + + + + diff --git a/GameLibrary/wwwroot/js/site.js b/GameLibrary/wwwroot/js/site.js index d94f18e..02477e7 100644 --- a/GameLibrary/wwwroot/js/site.js +++ b/GameLibrary/wwwroot/js/site.js @@ -12,7 +12,6 @@ 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; } @@ -21,89 +20,77 @@ function getRandomInt1(min, max) { const flightPath = { curviness: 1.5, autoRotate: true, - values: Array.from({ length: 15 }, (_, i) => ({ + path: Array.from({ length: 15 }, (_, i) => ({ x: window.innerWidth * (i + 1) * 0.1, - y: window.innerHeight * getRandomInt(-10, -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) => ({ + path: Array.from({ length: 15 }, (_, i) => ({ x: window.innerWidth * (i + 1) * -0.1, - y: window.innerHeight * getRandomInt1(-10, -1) * 0.1 - })) + y: window.innerHeight * getRandomInt1(-10, -1) * 0.1, + })), }; // Create a new timeline for the first spaceship animation -const tween = new TimelineLite(); +gsap.timeline() + .to(".RRspaceship", { + duration: 60, + motionPath: flightPath, + ease: "power1.inOut", + }); // 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 - }) -); +gsap.timeline() + .to(".Uspaceship", { + duration: 60, + motionPath: flightPath1, + ease: "power1.inOut", + }); // 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]; + const heroTitle = document.querySelector(".hero-title"); + const heroSubtitle = document.querySelector(".hero-subtitle"); + const heroDescription = document.querySelector(".hero-description"); + const heroButtons = document.querySelector(".hero-buttons"); // Set initial opacity to 0 for all hero section elements - TweenLite.set([heroTitle, heroSubtitle, heroDescription, heroButtons], { opacity: 0 }); + gsap.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 }); + gsap.to(heroTitle, { opacity: 1, duration: 1, delay: 1 }); + gsap.to(heroSubtitle, { opacity: 1, duration: 1, delay: 3 }); + gsap.to(heroDescription, { opacity: 1, duration: 1, delay: 5 }); + gsap.to(heroButtons, { opacity: 1, duration: 1, delay: 8 }); }); // Add hover and touch effects to feature cards document.addEventListener('DOMContentLoaded', function () { const featureCards = document.querySelectorAll('.feature-card'); - // Desktop screen size + // Desktop hover effects 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('mouseover', () => { + gsap.to(card, { y: -16, boxShadow: "0 1.5rem 3rem rgba(138, 43, 226, 1)", duration: 0.2 }); }); - - card.addEventListener('mouseout', function () { - card.style.transform = 'translateY(0)'; - card.style.boxShadow = '0 .125rem .25rem rgba(0, 0, 0, .075)'; + card.addEventListener('mouseout', () => { + gsap.to(card, { y: 0, boxShadow: "0 .125rem .25rem rgba(0, 0, 0, .075)", duration: 0.2 }); }); }); - // Mobile screen size + // Mobile touch effects 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('touchstart', () => { + gsap.to(card, { y: -16, boxShadow: "0 1.5rem 3rem rgba(138, 43, 226, 1)", duration: 0.2 }); }); - - card.addEventListener('touchend', function () { - card.style.transform = 'translateY(0)'; - card.style.boxShadow = '0 .125rem .25rem rgba(0, 0, 0, .075)'; + card.addEventListener('touchend', () => { + gsap.to(card, { y: 0, boxShadow: "0 .125rem .25rem rgba(0, 0, 0, .075)", duration: 0.2 }); }); }); }