More buttons, animation, and color (pt. 1)

Style, color, and animation are pertinent regarding the composition of an interactive and brilliant HTML page. while the markup and script that we talk about today is far from elegant it certainly is interactive.

We will continue to explore the document object model and how it can change items and actions of an HTML page like making a heading change and animating a cube to move from the top left of a container to the bottom right.

We start initially with the linking of both the style sheet and the script to the HTML

We then move on to setting up the heading to change background color and font by linking the ID of an h2 tag.

Then we add a button to change the style.color which will change the color of the font, we change the font type by using style.fontFamily, we change the size of the font via style.fontSize, and lastly we change the background color of the h2 tag with style.backgroundColor to cyan. This is what the button looks like when we are done:

with this button and the h2 tag we set up prior, along with the css style we setup, which looks like this:

The h2 heading goes from this:

to this:

Now we move on to the animation.

We first start like how we did previously, by making an h2 tag. we then make a button that activates the function myMove() which moves the the div tag we create later by pressing the button.

we now create two div tags one as a container and one as the object we will animate. These two divs, the button, and the h2 were coded as such:

we then program the function myMove().

Animation is not quite as simple and to be quite honest I am still very poor at it currently as I myself need to practice more. Essentially it boils down to taking frame intervals and iterating on those frames to change the position of an object, hence the document “object” model.

with this we will have a cube move from top left to bottom right like so:

And that is how we learned to animate within HTML and JavaScript through the document object model or DOM.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s