NMoore-STEM
commented
1 year ago Abandoning this idea/concept for now. My original intention was for my portfolio page to refrain from too many GSAP-like animations as they may detract from the information. Also read up on scroll events or attaching a scroll event listener - will avoid implementing this on portfolio page until more brainstorming and prototyping can be done with scroll event throttling...
Will need to modify design (if I can get desired results) wherein when the page loads, splash/hero animates in exact center of screen, then when page is scrolled up, the hero scrolls a bit slower than the rest of the content. In order to do this, a new container needs to be added in HTML (.parallax-parent) which would contain all HTML elements on page starting from #title_cred element (which contains the hero, will need to be lengthened) down to #portfolio or possibly including the footer element as well (will have to see if this pure CSS parallax technique will make footer have undesired scroll behaviour). .parallax-parent will need to use the CSS perspective:1px (can increase this value as needed) in order for any of this to work. Next, #title_cred will need CSS transform:translateZ(-1px) (or more? the more negative the number, the slower the scroll). Not sure if every other element contained in .parallax-parent will need to explicitly have CSS transform:translateZ(0), but all other elements will scroll normally.
It is important to have the hero move up to where the user can see the text between the header and the first section (About me...) before the about me section is scrolled up behind the header. ALSO!!! test the header menu button to make sure this has not created any new issues. translateZ can make elements appear smaller when using negative pixel values, so I can compensate for this by using a value for transform:scale(n) that compliments the z translation.