Moving Words With JavaScript

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

Screen Shot 2021-06-04 at 1.26.56 PM

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.

You will need more than a 3 hour video to learn about how to approach this problem with JavaScript. If you have found examples of moving shapes, those shapes are nothing more than elements (i.e. images, svg, etc…) where JavaScript is making them move. Your text (bubbles) is contained in the p element. You would apply the same logic to the p element as you would to most other elements.

Since you said you know HTML and CSS, you might be able to use CSS animation to float the bubbles element.

Below are just a few examples I found after searching for “javascript create animate floating 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.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.