Site URL: https://vinculum.ai/
I'm trying to figure out how to add particles on the left and right sides of a website like this: https://vinculum.ai/
Would someone be able to help me understand how to add code to the margins of a site and allow it to be responsive (like flexbox) so as the page increases/decreases, the particles on the side move back and forth?
I'm not sure what to target the code injection for or how exactly to build this cool thing, but would love to give it a shot :)
Any suggestions?
Site URL: https://www.lightbulb.com.au/home
I am using a code block to embed an animation for the title page and am having a few issues:
Layers: I need the text "connecting people to purpose" and "and strategy to execution" to sit neatly when switching to mobile. Currently the "strategy to execution" part drops off under the animation background. I think that's because the code block is currently inline with the text so pushes the text when re-sizing, but not sure how to fix. In my mind if the animation background sat on z-index:1 and the text sat on z-index:2 it would work, but the column of text still gets pushed
Parallax: I have done some research into parallax for images but am unable to replicate that with this animated effect because it isn't able to be coded in as 'background-attachment: fixed'
Cover page: The main goal is to have the entire screen taken up by this animation and the words on load. Then as you start to scroll the header menu appears. Currently I can't get the menu to appear only on scroll. I also can't get the animation background to appear as the exact same size of screen (especially when moving between ipad and phone size) even though I'm using 'height: 100vh;'
Any help would be much appreciated!