diff --git a/asset/font/SSTBold.TTF b/asset/font/SSTBold.TTF new file mode 100644 index 00000000..48bf0bea Binary files /dev/null and b/asset/font/SSTBold.TTF differ diff --git a/asset/font/SSTBoldCn.TTF b/asset/font/SSTBoldCn.TTF new file mode 100644 index 00000000..cce3eee8 Binary files /dev/null and b/asset/font/SSTBoldCn.TTF differ diff --git a/asset/font/SSTBoldIt.TTF b/asset/font/SSTBoldIt.TTF new file mode 100644 index 00000000..c10610ee Binary files /dev/null and b/asset/font/SSTBoldIt.TTF differ diff --git a/asset/font/SSTHeavy.TTF b/asset/font/SSTHeavy.TTF new file mode 100644 index 00000000..6cb8be5c Binary files /dev/null and b/asset/font/SSTHeavy.TTF differ diff --git a/asset/font/SSTHeavyIt.TTF b/asset/font/SSTHeavyIt.TTF new file mode 100644 index 00000000..ff433118 Binary files /dev/null and b/asset/font/SSTHeavyIt.TTF differ diff --git a/asset/font/SSTLight.TTF b/asset/font/SSTLight.TTF new file mode 100644 index 00000000..92765ca1 Binary files /dev/null and b/asset/font/SSTLight.TTF differ diff --git a/asset/font/SSTLightIt.TTF b/asset/font/SSTLightIt.TTF new file mode 100644 index 00000000..9c03840d Binary files /dev/null and b/asset/font/SSTLightIt.TTF differ diff --git a/asset/font/SSTMedium.TTF b/asset/font/SSTMedium.TTF new file mode 100644 index 00000000..6a188403 Binary files /dev/null and b/asset/font/SSTMedium.TTF differ diff --git a/asset/font/SSTMediumCn.TTF b/asset/font/SSTMediumCn.TTF new file mode 100644 index 00000000..551ac459 Binary files /dev/null and b/asset/font/SSTMediumCn.TTF differ diff --git a/asset/font/SSTMediumIt.TTF b/asset/font/SSTMediumIt.TTF new file mode 100644 index 00000000..c36d1683 Binary files /dev/null and b/asset/font/SSTMediumIt.TTF differ diff --git a/asset/font/SSTRg.TTF b/asset/font/SSTRg.TTF new file mode 100644 index 00000000..6c9836d6 Binary files /dev/null and b/asset/font/SSTRg.TTF differ diff --git a/asset/font/SSTRgCn.TTF b/asset/font/SSTRgCn.TTF new file mode 100644 index 00000000..7f395740 Binary files /dev/null and b/asset/font/SSTRgCn.TTF differ diff --git a/asset/font/SSTRgIt.TTF b/asset/font/SSTRgIt.TTF new file mode 100644 index 00000000..e92b95bd Binary files /dev/null and b/asset/font/SSTRgIt.TTF differ diff --git a/asset/images/3d-pulse-headset-range-image-block-03-en-13sep22 (1).webp b/asset/images/3d-pulse-headset-range-image-block-03-en-13sep22 (1).webp new file mode 100644 index 00000000..0a46d97e Binary files /dev/null and b/asset/images/3d-pulse-headset-range-image-block-03-en-13sep22 (1).webp differ diff --git a/asset/images/DualSense-Edge-image-block-01-en-24aug22.webp b/asset/images/DualSense-Edge-image-block-01-en-24aug22.webp new file mode 100644 index 00000000..8551c302 Binary files /dev/null and b/asset/images/DualSense-Edge-image-block-01-en-24aug22.webp differ diff --git a/asset/images/Media-Remote-square-image-block-ps5-01-en-09oct20.webp b/asset/images/Media-Remote-square-image-block-ps5-01-en-09oct20.webp new file mode 100644 index 00000000..33c97393 Binary files /dev/null and b/asset/images/Media-Remote-square-image-block-ps5-01-en-09oct20.webp differ diff --git a/asset/images/PlayStation-5.webp b/asset/images/PlayStation-5.webp new file mode 100644 index 00000000..aac4423c Binary files /dev/null and b/asset/images/PlayStation-5.webp differ diff --git a/asset/images/banner/EA-Sports-PGA-tour-homepage-hero-desktop-en-02-04apr23.webp b/asset/images/banner/EA-Sports-PGA-tour-homepage-hero-desktop-en-02-04apr23.webp new file mode 100644 index 00000000..0ea4ca04 Binary files /dev/null and b/asset/images/banner/EA-Sports-PGA-tour-homepage-hero-desktop-en-02-04apr23.webp differ diff --git a/asset/images/banner/RE4-remake-hero-desktop-02-en-09nov22.webp b/asset/images/banner/RE4-remake-hero-desktop-02-en-09nov22.webp new file mode 100644 index 00000000..78acf5f8 Binary files /dev/null and b/asset/images/banner/RE4-remake-hero-desktop-02-en-09nov22.webp differ diff --git a/asset/images/banner/Spring-Sale-homepage-hero-desktop-01-22mar23$en.webp b/asset/images/banner/Spring-Sale-homepage-hero-desktop-01-22mar23$en.webp new file mode 100644 index 00000000..f21d30a5 Binary files /dev/null and b/asset/images/banner/Spring-Sale-homepage-hero-desktop-01-22mar23$en.webp differ diff --git a/asset/images/banner/Wild-hearts-hero-desktop-01-en-25oct22.webp b/asset/images/banner/Wild-hearts-hero-desktop-01-en-25oct22.webp new file mode 100644 index 00000000..f7db8031 Binary files /dev/null and b/asset/images/banner/Wild-hearts-hero-desktop-01-en-25oct22.webp differ diff --git a/asset/images/banner/atsv-tmop-banner-desktop-01-4apr23.webp b/asset/images/banner/atsv-tmop-banner-desktop-01-4apr23.webp new file mode 100644 index 00000000..0756b876 Binary files /dev/null and b/asset/images/banner/atsv-tmop-banner-desktop-01-4apr23.webp differ diff --git a/asset/images/banner/god-of-war-ragnarok-ngplus-homepage-hero-banner-desktop-01-en-31mar23.webp b/asset/images/banner/god-of-war-ragnarok-ngplus-homepage-hero-banner-desktop-01-en-31mar23.webp new file mode 100644 index 00000000..3ae51a43 Binary files /dev/null and b/asset/images/banner/god-of-war-ragnarok-ngplus-homepage-hero-banner-desktop-01-en-31mar23.webp differ diff --git a/asset/images/banner/nba2k23-s6-hero-banner-desktop-01-en-28mar23.webp b/asset/images/banner/nba2k23-s6-hero-banner-desktop-01-en-28mar23.webp new file mode 100644 index 00000000..c6ffa042 Binary files /dev/null and b/asset/images/banner/nba2k23-s6-hero-banner-desktop-01-en-28mar23.webp differ diff --git a/asset/images/dualsense-collection-image-block-01-en-01sep22.webp b/asset/images/dualsense-collection-image-block-01-en-01sep22.webp new file mode 100644 index 00000000..27ef599f Binary files /dev/null and b/asset/images/dualsense-collection-image-block-01-en-01sep22.webp differ diff --git a/asset/images/hd-camera-square-image-block-ps5-01-en-07dec20.webp b/asset/images/hd-camera-square-image-block-ps5-01-en-07dec20.webp new file mode 100644 index 00000000..68ca76bb Binary files /dev/null and b/asset/images/hd-camera-square-image-block-ps5-01-en-07dec20.webp differ diff --git a/asset/images/horizontal-product-0.webp b/asset/images/horizontal-product-0.webp new file mode 100644 index 00000000..7d2f8574 Binary files /dev/null and b/asset/images/horizontal-product-0.webp differ diff --git a/asset/images/horizontal-product-1.webp b/asset/images/horizontal-product-1.webp new file mode 100644 index 00000000..fe1c5e84 Binary files /dev/null and b/asset/images/horizontal-product-1.webp differ diff --git a/asset/images/horizontal-product-2.webp b/asset/images/horizontal-product-2.webp new file mode 100644 index 00000000..428a46b1 Binary files /dev/null and b/asset/images/horizontal-product-2.webp differ diff --git a/asset/images/horizontal-product-3.webp b/asset/images/horizontal-product-3.webp new file mode 100644 index 00000000..578a632d Binary files /dev/null and b/asset/images/horizontal-product-3.webp differ diff --git a/asset/images/horizontal-product-4.webp b/asset/images/horizontal-product-4.webp new file mode 100644 index 00000000..72989ce2 Binary files /dev/null and b/asset/images/horizontal-product-4.webp differ diff --git a/asset/images/horizontal-product-5.webp b/asset/images/horizontal-product-5.webp new file mode 100644 index 00000000..ff71702b Binary files /dev/null and b/asset/images/horizontal-product-5.webp differ diff --git a/asset/images/horizontal-product-6.webp b/asset/images/horizontal-product-6.webp new file mode 100644 index 00000000..36157695 Binary files /dev/null and b/asset/images/horizontal-product-6.webp differ diff --git a/asset/images/logo/EA-Sports-PGA-Tour-logo-en-01-29mar23.webp b/asset/images/logo/EA-Sports-PGA-Tour-logo-en-01-29mar23.webp new file mode 100644 index 00000000..e002e082 Binary files /dev/null and b/asset/images/logo/EA-Sports-PGA-Tour-logo-en-01-29mar23.webp differ diff --git a/asset/images/logo/Spring-Sale-part-1-logo-01-22mar23$en-us.webp b/asset/images/logo/Spring-Sale-part-1-logo-01-22mar23$en-us.webp new file mode 100644 index 00000000..c22895ad Binary files /dev/null and b/asset/images/logo/Spring-Sale-part-1-logo-01-22mar23$en-us.webp differ diff --git a/asset/images/logo/atsv-logo-01-en-05apr23.webp b/asset/images/logo/atsv-logo-01-en-05apr23.webp new file mode 100644 index 00000000..c9a53e92 Binary files /dev/null and b/asset/images/logo/atsv-logo-01-en-05apr23.webp differ diff --git a/asset/images/logo/god-of-war-ragnarok-no-shadow-logo-01-03nov22$en.webp b/asset/images/logo/god-of-war-ragnarok-no-shadow-logo-01-03nov22$en.webp new file mode 100644 index 00000000..c43c7902 Binary files /dev/null and b/asset/images/logo/god-of-war-ragnarok-no-shadow-logo-01-03nov22$en.webp differ diff --git a/asset/images/logo/nba2k23-logo-01-en-28mar23.webp b/asset/images/logo/nba2k23-logo-01-en-28mar23.webp new file mode 100644 index 00000000..e6c8edb0 Binary files /dev/null and b/asset/images/logo/nba2k23-logo-01-en-28mar23.webp differ diff --git a/asset/images/logo/psvr2-black-logo-01-en-05jan22.webp b/asset/images/logo/psvr2-black-logo-01-en-05jan22.webp new file mode 100644 index 00000000..3bea5d69 Binary files /dev/null and b/asset/images/logo/psvr2-black-logo-01-en-05jan22.webp differ diff --git a/asset/images/logo/resident-evil-4-remake-logo-01-ps5-15jun22$en.webp b/asset/images/logo/resident-evil-4-remake-logo-01-ps5-15jun22$en.webp new file mode 100644 index 00000000..50fe385d Binary files /dev/null and b/asset/images/logo/resident-evil-4-remake-logo-01-ps5-15jun22$en.webp differ diff --git a/asset/images/logo/wild-hearts-logo-01-en-30nov22.webp b/asset/images/logo/wild-hearts-logo-01-en-30nov22.webp new file mode 100644 index 00000000..6534ddc1 Binary files /dev/null and b/asset/images/logo/wild-hearts-logo-01-en-30nov22.webp differ diff --git a/asset/images/ps5-console-cover-range-image-block-01-en-06sep22.webp b/asset/images/ps5-console-cover-range-image-block-01-en-06sep22.webp new file mode 100644 index 00000000..36157695 Binary files /dev/null and b/asset/images/ps5-console-cover-range-image-block-01-en-06sep22.webp differ diff --git a/asset/video/psvr2-homepage-hero-video-desktop-01-en-14feb23.mp4 b/asset/video/psvr2-homepage-hero-video-desktop-01-en-14feb23.mp4 new file mode 100644 index 00000000..c733ad57 Binary files /dev/null and b/asset/video/psvr2-homepage-hero-video-desktop-01-en-14feb23.mp4 differ diff --git a/css/main.css b/css/main.css new file mode 100644 index 00000000..740bcb5f --- /dev/null +++ b/css/main.css @@ -0,0 +1,525 @@ +@font-face { + font-family: 'sst'; + src: url('/asset/font/SSTRg.TTF') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'sst-light'; + src: url('/asset/font/SSTLight.TTF') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'sst-bold'; + src: url('/asset/font/SSTBold.TTF') format('truetype'); + font-weight: normal; + font-style: normal; +} + +* { + font-family: 'sst', cursive, sans-serif; +} + +.sony-bar { + height: 36px; + background-color: #000; + text-align: right; +} + +.sony-bar .sony-logo { + display: inline-block; + width: 75px; + height: 100%; + background-image: url('https://www.playstation.com/etc.clientlibs/global_pdc/clientlibs/clientlibs-jetstream/resources/assets/fonts/sony_logo.svg'); + background-repeat: no-repeat; + background-position: center; + margin: 0 8px; +} + +/* NAV */ + +header .shared-nav-container { + background-color: #fff; + padding: 0 1.25rem; + box-sizing: border-box; + width: 100%; + top: auto; + z-index: 10000; +} + +header .shared-nav-container.scrolled { + top: 0; + left: 0; + position: fixed; + transform: translateZ(0px); +} + +.shared-nav { + height: 64px; +} + +.shared-nav--menu-closed { + display: flex; + height: 100%; +} + +.shared-nav__ps-logo-container { + display: flex; + padding-right: 0.5rem; + align-items: center; +} + +.shared-nav__primary-list { + display: flex; + height: 100%; +} + +.shared-nav__primary-item { + display: flex; + color: #1f1f1f; + font-weight: 500; + height: 100%; + position: relative; +} + +.shared-nav__primary-item button { + display: flex; + align-items: center; + background-color: rgba(0, 0, 0, 0); + border: 0; + padding-left: 5px; + font-size: 13px; + font-weight: 400; + cursor: pointer; +} + +.shared-nav__primary-item button span { + margin-top: 5px; + color: #999; +} + +.shared-nav__primary-item button:hover { + color: #0070d1; +} + +.shared-nav__primary-item button:hover span { + color: #0070d1; +} + +.sign-in-container { + flex-grow: 1; + display: flex; + align-items: center; + justify-content: flex-end; +} + +.sign-in-container--button-container button { + width: 80px; + color: #fff; + background-color: #0070cc; + border: 0; + padding: 0 6px 0 6px; + border-radius: 999px 999px 999px 999px; + cursor: pointer; +} + +.sign-in-container--button-container button:hover { + background-color: #005499; +} + +.sign-in-container--button-container button span { + font-size: 16px; + letter-spacing: 0.4px; + line-height: 1.5; +} + +.search-icon-container { + display: flex; + align-items: center; +} + +.search-icon-container button { + background-color: rgba(0, 0, 0, 0); + border: 0; + padding: 0; + margin-left: 14px; + height: 100%; + cursor: pointer; +} + +.search-icon-container button svg { + height: 23px; + width: 23px; +} + +.main-container { + height: 1500px; +} + +.inner-div { + width: 886px; + height: 100%; + z-index: 9999; + margin: auto; +} + +/* Game Wrapper */ + +.main-container .game-wrapper { + line-height: 1.5em; +} + +.main-container .game-wrapper.scrolled { + padding-top: 64px; +} + +.game-wrapper { + line-height: 1.5em; +} + +.game-wrapper .swiper-container .banner { + position: relative; +} + +.game-wrapper .swiper-container .banner .banner__keyart { + height: 739.125px; + width: 1314.739; + background-color: #dee0ec; +} + +.game-wrapper .swiper-container .banner .banner__keyart::before { + top: 0; + left: 0; + width: 100%; + height: 100%; + content: ''; + position: absolute; + z-index: 20; + background: linear-gradient(to right, #dee0ec 0%, #dee0ec00 50%); +} + +.game-wrapper .swiper-container .banner .banner__keyart video { + object-fit: cover; + object-position: top right; + width: 100%; + height: 100%; + opacity: 0; +} + +.game-wrapper .swiper-container .banner .banner__keyart img { + width: 100%; + height: 100%; +} + +.game-wrapper .swiper-container .banner .banner__content-wrapper { + position: absolute; + top: 0; + padding: 48px 0; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: auto; + z-index: 999; +} + +.game-wrapper .swiper-container .banner .banner__content-wrapper .inner-div { + display: flex; + flex-direction: column; + justify-content: center; +} + +.game-wrapper + .swiper-container + .banner + .banner__content-wrapper + .inner-div + .banner-logo { + opacity: 0; + width: 422.953px; +} + +.game-wrapper + .swiper-container + .banner + .banner__content-wrapper + .inner-div + .banner-logo + .banner-logo-inner { + width: calc((37.16px * 4) + (3 * 2.5rem)); +} + +.game-wrapper + .swiper-container + .banner + .banner__content-wrapper + .inner-div + .banner-logo + .banner-logo-inner + img.vr { + width: 114.312px; + height: 100%; + display: block; +} + +.game-wrapper + .swiper-container + .banner + .banner__content-wrapper + .inner-div + .banner-logo + .banner-logo-inner + img { + width: 100%x; + height: 100%; + display: block; +} + +.game-wrapper + .swiper-container + .banner + .banner__content-wrapper + .inner-div + .content { + width: 422.953px; + height: unset; + margin-block-start: 1.5rem; + opacity: 0; +} + +.game-wrapper + .swiper-container + .banner + .banner__content-wrapper + .content + .title-block { + line-height: 1.5em; +} + +.game-wrapper + .swiper-container + .banner + .banner__content-wrapper + .content + .title-block + h2 { + font-size: calc((1rem * 2.44141)); +} + +.game-wrapper + .swiper-container + .banner + .banner__content-wrapper + .content + .title-block + p { + font-size: calc(1rem); +} + +.game-wrapper + .swiper-container + .banner + .banner__content-wrapper + .content + .button-block { + line-height: 1rem; +} + +/* Hardware Wrapper */ + +.hardware-wrapper { + overflow: hidden; +} + +.hardware-wrapper .swiper-container { + width: 886px; + height: 100%; + z-index: 9999; + margin: auto; +} + +.hardware-wrapper .swiper-container .swiper-wrapper .swiper-slide { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 1.5rem; + height: 459.734px; + opacity: 0; + margin-block-end: 2rem; +} + +.hardware-wrapper .swiper-container .swiper-wrapper .swiper-slide-active { + opacity: 1; +} + +/* Content */ + +.content { + height: inherit; + font-family: 'sst-light', sans-serif; + display: flex; + flex-direction: column; + justify-content: center; + overflow: hidden; +} + +.title-block { + text-align: left; + margin-block-end: 2rem; +} + +.title-block h3 { + font-size: calc(1rem * 1.95312); + line-height: 1.5em; +} + +.title-block p { + opacity: 0.9; + font-size: calc(1rem * 1.25); + line-height: 1.5em; + margin-block-start: 16px; +} + +.button-block { + font-family: 'sst-bold'; + cursor: pointer; +} + +.button-block .button-container { + display: flex; +} + +.button-block .button-container .button a { + text-decoration: none; + background-color: transparent; + color: rgb(255, 255, 255); + display: block; + margin: 0.25rem; + padding: 2px; +} + +.button-block .button-container .button a .button__inner { + padding: 10px 14px; + border-radius: 2rem; +} + +.button-block .button-container .button .blue .button__inner { + background-color: rgb(0, 112, 204); +} + +.button-block .button-container .button .red .button__inner { + outline: none; + background-color: rgb(213, 59, 0); +} + +.button-block .button-container .button .red:hover { + box-shadow: 0 0 0 2px rgb(192, 52, 0); + border-radius: 2rem; +} + +.button-block .button-container .button .blue:hover { + box-shadow: 0 0 0 2px rgb(0, 112, 204); + border-radius: 2rem; +} + +.button-block .button-container .button a .button__inner span { + line-height: 1em; + font-size: 14px; +} + +.hardware-image { + height: inherit; + max-width: 100%; + width: 100%; + box-sizing: border-box; +} + +.hardware-image img { + width: 100%; + height: 100%; + object-fit: contain; + object-position: center; +} + +.hardware-wrapper .swiper-pagination { + display: flex; + position: relative; + bottom: 0; + /* padding-bottom: 2.5rem; */ + padding-bottom: 40px; +} + +.hardware-wrapper .inner-div .swiper-pagination-bullet { + position: relative; + border-radius: 0%; + margin: 0; + margin-inline-end: 12px; + width: unset; + height: unset; + background-color: transparent; + cursor: pointer; + opacity: 0.8; +} + +.hardware-wrapper .inner-div .swiper-pagination-bullet::before { + content: ''; + position: absolute; + top: -6px; + left: -6px; + width: calc(100% + 6px); + height: calc(100% + 6px); + border: 3px solid transparent; +} + +.hardware-wrapper .inner-div .swiper-pagination-bullet:hover { + opacity: 1; +} + +.hardware-wrapper .inner-div .swiper-pagination-bullet-active { + opacity: 1; +} + +.hardware-wrapper .inner-div .swiper-pagination-bullet-active::before { + animation: bullet-animation 0.4s ease-in-out forwards; + border-color: #0072ce; + border-radius: calc(0.5rem + 8px); +} + +@keyframes bullet-animation { + from { + border-color: transparent; + } + to { + border-color: #0072ce; + border-radius: calc(0.5rem + 8px); + } +} + +.hardware-wrapper + .inner-div + .swiper-pagination-bullet + .media-block + .media-block__inner + img { + padding-left: 1rem; + padding-right: 1rem; + padding-block-start: 1rem; + width: 84.289px; + height: 49.406px; + object-fit: contain; +} + +.hardware-wrapper + .inner-div + .swiper-pagination-bullet + .media-block + .media-block__inner.text { + line-height: 1.5rem; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + text-align: center; + width: 116.289px; + font-family: 'sst-light', sans-serif; +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..fef44f55 --- /dev/null +++ b/index.html @@ -0,0 +1,485 @@ + + + + + + + + PlayStation® Official Site: Consoles, Games, Accessories & More + + + + + + + + + + + +
+ + + +
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+

Playstation 5 Console

+

+ Experience an all-new generation of incredible PlayStation + games. PS5 consoles are currently in stock. +

+
+ +
+
+ PlayStation Hardware Image +
+
+
+
+
+

DualSense™ Wireless Controller

+

+ Immerse yourself in the gaming experience with a + controller the supports responsive haptic feedback and + dynamic trigger effects. +

+
+ +
+
+ PlayStation Hardware Image +
+
+
+
+
+

PULSE 3D™ Wireless Headset

+

+ Enjoy a seamless wireless experience with a headset + fine-tuned for 3D Audio on PS5 consoles. +

+
+ +
+
+ PlayStation Hardware Image +
+
+
+
+
+

DualSense Edge™ Wireless Controller

+

+ Get an edge in gameplay with remappable buttons, tunable + triggers and sticks, changeable stick caps, back buttons, + and more. +

+
+ +
+
+ PlayStation Hardware Image +
+
+
+
+
+

Media Remote

+

+ Conveniently control movies, streaming services and more + on your PS5 console with an intuitive layout. +

+
+ +
+
+ PlayStation Hardware Image +
+
+
+
+
+

HD Camera

+

+ Add yourself to your gameplay videos and broadcasts with + smooth, sharp, full-HD capture. +

+
+ +
+
+ PlayStation Hardware Image +
+
+
+
+
+

PS5 Console Covers

+

+ Personalise your PlayStation 5 or PlayStation 5 Digital + Edition console with a vibrant array of new colour + options. +

+
+ +
+
+ PlayStation Hardware Image +
+
+
+
+
+
+
+
+
+
+ + + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 00000000..154db5ae --- /dev/null +++ b/js/main.js @@ -0,0 +1,72 @@ +const sharedNav = document.querySelector('.shared-nav-container'); +const gameWrapper = document.querySelector('.game-wrapper'); +let navIsScrolled = false; + +window.addEventListener('scroll', () => { + if (!navIsScrolled && scrollY > 37) { + navIsScrolled = true; + sharedNav.classList.add('scrolled'); + gameWrapper.classList.add('scrolled'); + } else if (navIsScrolled && scrollY < 37) { + navIsScrolled = false; + sharedNav.classList.remove('scrolled'); + gameWrapper.classList.remove('scrolled'); + } +}); + +const fadeEls = document.querySelectorAll('.fade-in'); +fadeEls.forEach((fadeEl, index) => { + gsap.to(fadeEl, 1, { + delay: (index + 1) * 0.6, + opacity: 1, + }); +}); + +new Swiper('.game-wrapper .swiper-container', { + allowTouchMove: false, + slidesPerView: 1, +}); + +new Swiper('.hardware-wrapper .swiper-container', { + centeredSlides: true, + allowTouchMove: false, + effect: 'fade', + fadeEffect: { + crossFade: true, + fadeOut: 500, + fadeIn: 500, + delay: 2000, + }, + slidesPerView: 1, + pagination: { + el: '.hardware-wrapper .swiper-pagination', + clickable: true, + renderBullet: function (index, className) { + let spanArray = [ + `PS5 Console`, + `DualSense™ Wireless Controller`, + `PULSE 3D™ Wireless Headset`, + `DualSense Edge`, + `Media Remote`, + `HD Camera`, + `PS5 Console Covers`, + ]; + let paginationTemplate = ` +
+
+
+ +
+
+ + ${spanArray[index]} + +
+
+
+ + `; + return paginationTemplate; + }, + }, +});