Question

In: Computer Science

Write an HTML which will create two moving balls (use div with border-radius to create these...

Write an HTML which will create two moving balls (use div with border-radius to create these balls). The red ball starts its movement from top left corner and the green ball starts its movement from top right corner. Assuming the red ball take diagonal direction and the red ball takes anti-diagonal direction downward. When ball meets in the middle of the screen, the red ball will on top of the green ball (hint: use z-inedx). Make sure these two balls will meet in the center of your screen when during their movements. .

Solutions

Expert Solution

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title> Some title </title>

<style>

.balls{

border-radius: 50%;

  

position: fixed;

width: 50px;

height: 50px;

margin-top: 50px;

  

animation-iteration-count: infinite;

}

#ball1 {

left: 0%;

  

background : red;

animation-name: redball;

animation-duration: 8s;

animation-iteration-count: infinite;

}

#ball2 {

left: 100%;

  

background:green;

animation-name: greenball;

animation-duration: 8s;

animation-iteration-count: infinite;

z-index:-1;

}

@keyframes redball {

  

0% {

top: 0%;

left: 0%;

}

100% {

top : 90%;

left : 90%;

}

}

@keyframes greenball {

0% {

top : 0%;

left : 90%;

}

100% {

top : 90%;

left : 0%;

  

  

}

}

</style>

</head>

<body>

<div class="balls" id="ball1"></div>

<div class="balls" id="ball2"></div>

</body>

</html>

EXPLANATION:

As asked in the question above, the red ball starts its movement from the top left in the diagonal direction and the green ball starts its movement from the top right in the anti-diagonal direction.In the centre of the screen when both the balls meet and they overlap each other, red ball overlaps and be on top of the green ball.

This process is done by the following procedure:-

- open <!DOCTYPE html> , <html> , <head> , <style> tags as we do in our html codes.

- created a class named balls and added the properties that should be included in both the balls.(properties which are common for both).

NOTE : class name is prefixed by " . " by convention.

Added some common properties like width of the ball,height of the ball , radius of the ball

- created two different id's for ball1 and ball2 .

Added some specific properties for both the balls in their id's which shall be given separately like colour of the ball,animation name for the balls.

Note: id's are prefixed by "#" by convention.

- In the #ball2, the z-index is assigned to -1 so that #ball2 is overlaped by #ball1.

An element with greater z-index is always in front of an element with a lower z-index.(so we gave our #ball2 the z-index of -1 which is lower)

-Here is the main thing due to which our balls are moving on the screen: KEYFRAMES

In keyframes we add the position of the ball i.e where should it be on the the screen.

At starting( 0% ) the red ball should be on the top left corner so we made it left:0%; top:0%;

At the end(100%), the red ball should reach the bottom right corner so we made it left:90%; top: 90%;

-Likewise we design our keyframes for green ball also.

-In between the two balls pass by each other and the green ball is overlaped by red ball(as we gave z-index for green ball as -1).

- We open our body tags and div elements which results in the presence of the balls.

Thank you, have a great day!

venereology answered 3 months ago
Next > < Previous

Related Solutions

Overview Students will learn how to use block-level <div> elements in HTML and style them with...
Overview Students will learn how to use block-level <div> elements in HTML and style them with CSS to transform them using various properties such as: position top, left, right, bottom float border border-radius background-color etc. Related Lecture(s) Module 2: Lecture #3 - The Box Model & Positioning Elements Basic Content Create a folder on your local machine in the "csis1430/htdocs" folder called "little-boxes" with the following folder structure: css img js Create an index.html file with multiple (as many as...
use VISUAL STUDIO CODE to write this javascript program Exercise 1 (a) Create a HTML file...
use VISUAL STUDIO CODE to write this javascript program Exercise 1 (a) Create a HTML file that uses createElement and appendChild to dynamically insert three paragraphs when a button is clicked. (b) Create a HTML file that includes JavaScript that is similar to: let recs = [“my item …1”,”my item…2”, …] i.e. an array that contains several CSV item records. When the user clicks a button, each array element will be rendered as a list element. Use a HTML list....
Write the below code to use HTML and JavaScript. 1. a) Write a JavaScript program to...
Write the below code to use HTML and JavaScript. 1. a) Write a JavaScript program to display the current day and time. b) Write a JavaScript program to print the contents of the current window.   c) Write a JavaScript program where the program takes a random integer between 1 to 10 d) Write a JavaScript program to calculate multiplication and division of two numbers (input from the user). e)Write a JavaScript program to create a new string from a given...
Please use HTML and CSS - Create the overlay and popup: Note: this is my original...
Please use HTML and CSS - Create the overlay and popup: Note: this is my original code just add it to to make the next steps please: HTML: <nav> <ul class="Login-button"> LOG IN</ul> </nav> CSS: *{ margin: 0; padding: 0; list-style-type: none; } nav { height: 50px; background: #DEDFE0; display: flex; align-items: center; padding: 0 20px; } .login-button { padding: 5px 8px; cursor: pointer;} .login-button: hover { background: #BCBDC0; } PLEASE do the following: Create a transparent grey overlay over...
Use HTML&CSS& JavaScript to: 3-4) Write a JQuery Ajax program which can communicate with flicker to...
Use HTML&CSS& JavaScript to: 3-4) Write a JQuery Ajax program which can communicate with flicker to get the last pictures taken from any place or related to any concept(s) the user has written in a textbox, say Sydney, train. Some information associated with the image like its topic, time taken, and its link needs to be appeared with it. 3-5) Develop a server which can serve the file you developed in 3-4. 3-6) Add a plugin to the real jQuery...
Two charged metal balls of a different size, radius R1 is bigger than R2, and then...
Two charged metal balls of a different size, radius R1 is bigger than R2, and then connected by a wire. Which ball gets the larger charge? What about charge density? Prove the answer.
Que1.Consider two balls of identical mass. If ball 1 is moving to the right towards stationary...
Que1.Consider two balls of identical mass. If ball 1 is moving to the right towards stationary ball 2 at 1.0 m/s and the two balls collide elastically, what will the final velocities of both balls be? (Hint: consider this simulation.) Que 2.If the same two balls again undergo a collision, but this time the collision is inelastic, what will the final velocities of both balls be? Que 3.What are the conditions for elastic and inelastic collisions? Que 4.Explain how the...
For both JavaScript and HTML: ---------------------------------------------------- Write and test JavaScript scripts for the two exercises that...
For both JavaScript and HTML: ---------------------------------------------------- Write and test JavaScript scripts for the two exercises that follow, debug (if necessary).  When required to write a function, you must include a script to test the function with at least two different data sets.  In all cases, for testing, you must write an HTML file that references the JavaScript file. Output an HTML table of the numbers from 2 to 8 along with their squares and cubes. Create a function titled counter that takes...
A wheel of radius 0.280 m, which is moving initially at 33 m/s, rolls to a...
A wheel of radius 0.280 m, which is moving initially at 33 m/s, rolls to a stop in 215 m. Calculate its linear acceleration.(magnitude only) 2) Calculate its angular acceleration.(magnitude only) 3)The wheel's rotational inertia is 0.195 kg* m2 about its central axis. Calculate the torque exerted by the friction on the wheel, about the central axis.(N*m) (magnitude only)
Write an HTML file for a web page that contains the items below. Use an internal...
Write an HTML file for a web page that contains the items below. Use an internal style sheet to specify all fonts, sizes, colors, and any other aspects of the presentation. Your page should contain the following items: 1) A header with white text on dark green background (just for the header, not the entire page), in Impact font, bold, and centered. 2) Two paragraphs of text, each with dark gray text in Tahoma font, on a light blue background,...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT