Hello. I am a total newbie to js and I accepted a project I don’t know how to even start.
I want several instances of a single word to move upwards on the screen like a bubble, but I’m not seeing anything where words move, only shapes. Ideally, the word would also pop when clicked.
I know HTML and CSS fairly well, and so far I have the word, (which is actually “bubbles”) in HTML as
but don’t really know where to go from there with the js. I’ve been trying to teach myself with Beau Carnes’s 3 hour js for beginners but I’m in hour 3 and there isn’t anything concerning websites in there so far. I’ve been trying to find a “how-to” guide on the internet but it looks like no one else has ever wanted their text to float up the page like a bubble, or maybe I’m just looking in the wrong places.
Could somebody please help me? Maybe give me a little direction? I’m stressed af and I realize I probably shouldn’t have taken this job, but I thought it would be a good learning experience. I’m hitting a major wall, though.
Since you said you know HTML and CSS, you might be able to use CSS animation to float the bubbles element.
I’ll link you somethings that may help with moving your bubble:
To change the position of something with JS it would look something like
domElement.style.left = '10px'
//this would move the element to the right
In order to do this the element will need to have the right type of position, and two of them are valid I think, but the only I remember that will work of the top of my head would be absolute which a p tag does not normally have so you would need to set it so.
You can continuously change its position with JS at a slow enough rate as to give the illusion it sliding across the page, but do keep in mind when you set it position its instantly jumping to the spot not moving to it. You perhaps can combine an animation to make this transition more smooth, but I really need to work on my CSS.