Created
January 4, 2023 12:42
-
-
Save ateszdn/68492ddf745ed0921f85289929de8c18 to your computer and use it in GitHub Desktop.
VR2 - sound section
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <section id="sound-section" class="pinned-section" style="height: 5401px; background-color: rgb(216, 220, 231); position: relative;"> | |
| <div style="top: 0px; left: 0px; position: sticky; width: 100%; height: 896px; will-change: transform; overflow: hidden visible;"> | |
| <div class="relative w-full h-full overflow-hidden"> | |
| <div class="absolute top-0 left-0 flex items-start justify-center w-full h-full"> | |
| <div class="relative w-full h-screen " id="vid_container_magávalragadó3dhangzás" style="height: 100%;"><video class="absolute top-0 object-cover w-screen h-screen transform -translate-x-1/2 left-1/2" loop="" id="vid_el_magávalragadó3dhangzás" style="height: 100%;" playsinline="" preload="auto" poster="https://gmedia.playstation.com/is/image/SIEPDC/section4b-video-poster?qlt=87,1&resMode=bilin&fmt=jpg&scl=1" aria-label="" title="Magával ragadó 3D hangzás"> | |
| <source src="https://gmedia.playstation.com/is/content/SIEPDC/global_pdc/en/hardware/psvr2/channel-specific-content/pdc/2022/overview/akqa/video/section4b-bg.mp4#t=0.04" type="video/mp4">Your browser does not support HTML5 video. | |
| </video> | |
| <div style="visibility: hidden;" class="pointer-events-auto button-wrapper "><button class="absolute cursor-pointer text-center block bg-transparent transition-opacity duration-300 border-0 h-7.5 p-0 no-underline z-1 appearance-none " style="top: 84px; right: 20px;" type="button" aria-label="pause video"><img aria-hidden="true" class="w-7.5 h-7.5 hidden " src="https://playstation.com/content/dam/global_pdc/en/hardware/psvr2/channel-specific-content/pdc/2022/overview/akqa/static/media/play-button.svg" alt="play icon" data-di-id="759b3b7f-a469e962" width="30" height="30"><img aria-hidden="true" class="w-7.5 h-7.5 " src="https://playstation.com/content/dam/global_pdc/en/hardware/psvr2/channel-specific-content/pdc/2022/overview/akqa/static/media/pause-button.svg" alt="pause icon" data-di-id="759b3b7f-2056021f" width="30" height="30"></button></div> | |
| </div> | |
| <div class="absolute flex top-0 left-0 pl-[6%] w-full h-full px-9 items-end pb-[20%] justify-center md:pb-0 md:items-center md:justify-start"> | |
| <div class="max-w-[100%] pb-9 sm:pb-0 md:max-w-[300px] lg:max-w-[400px] xl:max-w-[500px]" style="opacity: 0; visibility: hidden; transform: translate(0%, 50%);"> | |
| <div class="flex flex-col " style="width: 100%;"> | |
| <div></div> | |
| <div class="w-[300px] sm:w-[576px] md:w-full"> | |
| <h3 class="text-black text-left text-body-xs sm:text-body-s-m lg:text-body-l xl:text-body-xl font-sst-roman "><span>Érezheted egy karakter jelenlétét, amint a füledbe suttog, megtalálhatod barátaidat és ellenségeidet lövéseik vagy lépéseik alapján, miközben hihetetlenül valósághű hanghatások vesznek körül<sup>1</sup>, mivel a játékon belüli hang dinamikusan alkalmazkodik a pozíciódhoz és fejmozgásaidhoz<sup>1</sup> a Tempest 3D AudioTech<sup>2</sup> segítségével.</span></h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute top-0 left-0 w-full h-full z-1 flex items-center justify-center bg-gradient-to-t from-[#A9ADC4] to-[#D8DCE8] pointer-events-none" style="opacity: 1; visibility: inherit;"> | |
| <div class="absolute object-contain w-full h-full overflow-visible min-w-[152%] md:min-h-[132%] lg:min-w-0 lg:min-h-[152%]" style="margin-top: -89px;"> | |
| <div class="object-contain w-full h-full" style="transform: translate(0%, 27.925%) translate3d(0px, 0px, 0px);"> | |
| <div id="sound-shapes" class="flex items-center justify-center object-contain w-full h-full"><img id="disc1" src="https://gmedia.playstation.com/is/image/SIEPDC/section4a-disc-1?fmt=png-alpha&scl=1" class="absolute" aria-hidden="true" style="transform: scale(-0.7, 0.7) translate(-872.239px, -556.379px); margin-top: 114px;" loading="lazy" alt="" data-di-id="4aa0d6fc-f498352"><img id="disc2" src="https://gmedia.playstation.com/is/image/SIEPDC/section4a-disc-2?fmt=png-alpha&scl=1" class="absolute" aria-hidden="true" style="transform: scale(-0.7, 0.7) translate(-761.548px, 436.654px); margin-top: 304px;" loading="lazy" alt="" data-di-id="4aa0d6fc-745701b1"><img id="disc3" src="https://gmedia.playstation.com/is/image/SIEPDC/section4a-disc-3?fmt=png-alpha&scl=1" class="absolute" aria-hidden="true" style="transform: scale(-0.7, 0.7) translate(-548.145px, 244.646px); margin-top: 570px;" loading="lazy" alt="" data-di-id="4aa0d6fc-eb8d822f"><img id="disc4" src="https://gmedia.playstation.com/is/image/SIEPDC/section4a-disc-4?fmt=png-alpha&scl=1" class="absolute" aria-hidden="true" style="transform: scale(-0.7, 0.7) translate(873.672px, -698.148px); margin-top: 912px;" loading="lazy" alt="" data-di-id="4aa0d6fc-826a0477"><img id="disc5" src="https://gmedia.playstation.com/is/image/SIEPDC/section4a-disc-5?fmt=png-alpha&scl=1" class="absolute" aria-hidden="true" style="transform: scale(-0.7, 0.7) translate(840.448px, 34.124px); margin-top: 1331px;" loading="lazy" alt="" data-di-id="4aa0d6fc-1db087e9"><img id="echo1" src="https://gmedia.playstation.com/is/image/SIEPDC/section4a-echo-1?fmt=png-alpha&scl=1" class="absolute" aria-hidden="true" style="transform: scale(-0.7, 0.7) translate(-562.395px, -420.598px); margin-top: 798px;" loading="lazy" alt="" data-di-id="4aa0d6fc-a1a49831"><img id="echo2" src="https://gmedia.playstation.com/is/image/SIEPDC/section4a-echo-2?fmt=png-alpha&scl=1" class="absolute" aria-hidden="true" style="transform: scale(-0.7, 0.7) translate(521.439px, -685.267px); margin-top: 266px;" loading="lazy" alt="" data-di-id="4aa0d6fc-daba1ad2"><img id="echo3" src="https://gmedia.playstation.com/is/image/SIEPDC/section4a-echo-3?fmt=png-alpha&scl=1" class="absolute" aria-hidden="true" style="transform: scale(-0.7, 0.7) translate(685.919px, 460.444px); margin-top: 1825px;" loading="lazy" alt="" data-di-id="4aa0d6fc-4560994c"></div> | |
| </div> | |
| </div> | |
| <div class="max-w-[300px] sm:max-w-[576px] md:max-w-[640px] lg:max-w-[740px] xl:max-w-[1165px] flex items-center"> | |
| <h1 class="pt-16 text-center uppercase text-[46px] sm:text-[66px] lg:text-[76px] xl:text-[116px] leading-none text-black w-[300px] sm:w-[600px] md:w-[700px] lg:w-[800px] xl:w-[1172px] font-mont-heavy" style="transform: translate(0%, 50%); opacity: 0; visibility: hidden;"><span>Magával ragadó 3D hangzás</span></h1> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| gsap.registerPlugin(ScrollTrigger); | |
| ScrollTrigger.defaults({ | |
| toggleActions: "play reverse restart reverse", | |
| //scroller: "#sensory-experience", | |
| markers: false | |
| }); | |
| gsap.to("#sound-shapes #disc1, #sound-shapes #echo2", { | |
| scrollTrigger: { | |
| trigger: ".scroller-wrapper", | |
| //pin: true, | |
| scrub: 3, | |
| start: "10% center", | |
| end: "bottom 0%" | |
| }, | |
| y: -1500, | |
| ease: "none", | |
| duration: 5 | |
| }); | |
| gsap.to("#sound-shapes #disc4, #sound-shapes #disc5, #sound-shapes #echo1", { | |
| scrollTrigger: { | |
| trigger: ".scroller-wrapper", | |
| //pin: true, | |
| scrub: 3, | |
| start: "10% center", | |
| end: "bottom 0%" | |
| }, | |
| y: -2500, | |
| ease: "none", | |
| duration: 5 | |
| }); | |
| gsap.to("#sound-shapes #disc2, #sound-shapes #disc3, #sound-shapes #echo3", { | |
| scrollTrigger: { | |
| trigger: ".scroller-wrapper", | |
| //pin: true, | |
| scrub: 3, | |
| start: "15% center", | |
| end: "bottom 0%" | |
| }, | |
| y: -3000, | |
| ease: "none", | |
| duration: 7 | |
| }); | |
| gsap.to("h1", { | |
| scrollTrigger: { | |
| trigger: ".scroller-wrapper", | |
| //pin: true, | |
| scrub: true, | |
| start: "12% center", | |
| end: "bottom 0%" | |
| }, | |
| y: -200, | |
| opacity: 1, | |
| visibility: "inherit", | |
| ease: "none", | |
| duration: .2 | |
| }); | |
| gsap.to("h3", { | |
| scrollTrigger: { | |
| trigger: ".scroller-wrapper", | |
| //pin: true, | |
| scrub: true, | |
| start: "18% center", | |
| end: "bottom 0%" | |
| }, | |
| y: -200, | |
| opacity: 1, | |
| visibility: "inherit", | |
| ease: "none", | |
| duration: .2 | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script> | |
| <script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| h1 { | |
| font-size: 5rem; | |
| font-weight: 900; | |
| max-width: 50rem; | |
| } | |
| video { | |
| opacity: .5; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment