Help regarding footer and background animation
Here's the link to webpage -> https://alfaarghyadev.vercel.app/
Does anyone here know how to make the footer section as well as the background animation part, i would be glad if u can share resources where i can learn more about them
alfaarghya.dev - Shape Ideas with Technology
A personal portfolio created by Arghya Das (alfaarghya), a full-stack software developer, focused on crafting meaningful web applications with creativity and technical expertise, turning intricate ideas into real-world digital solutions, one line of code at a time
5 Replies
That site looks to be using JS for the footer (dock) animations. However this can also be achieved using CSS only.
I have put together a quick demo for you.
https://codepen.io/cbolson/pen/jOgMaXz
- I used flex for the buttons container, aligning the buttons themselves at the bottom.
- For the "tooltips" I added a data-attribute on the buttons and used this as the "content" property for a pseudo element.
- On hover, the button increase it's size by 2x (width and height) .
- On hover, the buttons either side increase size by 1.5x
- On hover, the buttons 2 places away increase their size by 1.2x.
Note - I used the :has() selector for some of these so bear in mind that, whilst this now has over 91% browser support, there may be the odd instance when this doesn't work.
Hey chris, thank you very much for looking into this and giving a good explanation .
As for the background animation, it appears to be moving up and down gently whilst at the some time subtly following the mouse as it moves around.
The up and down movement could be done with a CSS animation however following the mouse will require a small amount of JS.
Again, a quick demo:
https://codepen.io/cbolson/pen/LYwRdEM
- Uses a CSS animation to "float" the image up and down by updating it's
translate property.
- The JavaScript code adds an eventlistener to the window to follow the mouse movement, passing it's x and y position. These x and y points are then used to update the image position, this time using the transform property so as to allow the "floating" animation to continue.
- Note - I have defined a MAX_OFFSET value in the JS to limit the distance that the image can move from it's natural position otherwise it would follow the mouse all around the screen which is not what you want.Hey, once again, thank you very much. I’ve been wrapping my head around this for two days and couldn’t find a single hint. Now I understand what’s going on behind the scenes. I was lucky enough to get help from you, and I truly appreciate it!
You're welcome. Glad to be able to help 👍