Computer Science
22 Online
Aratox:
How do I create a gravity-like effect on the ball in the following code?
2 years ago
Join the QuestionCove community and study together with friends!
Sign Up
Aratox:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#circle {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: transparent;
border: 5px solid transparent;
background-clip: padding-box;
animation: changeBorderColor 3s linear infinite;
position: relative;
overflow: hidden;
}
#ball {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
animation: bounce 1s infinite, changeBallColor 3s linear infinite;
}
@keyframes bounce {
0%,
100% {
top: 0;
}
50% {
top: 180px;
}
}
@keyframes changeBorderColor {
0% {
border-color: rgba(255, 0, 0, 1);
}
50% {
border-color: rgba(0, 255, 0, 1);
}
100% {
border-color: rgba(0, 0, 255, 1);
}
}
@keyframes changeBallColor {
0% {
background-color: red;
}
50% {
background-color: green;
}
100% {
background-color: blue;
}
}
</style>
</head>
<body>
<div id="circle">
<div id="ball"></div>
</div>
</body>
</html>
2 years ago
Ylynnaa:
On here or something?
2 years ago
Aratox:
@ylynnaa wrote:
On here or something?
I'm talking about in the code... if you run the code, there should be a ball that appears to be bouncing in a circle, but it's only bouncing up and down within the circle, without the effect of gravity. I'm asking if anyone can help me create a gravity-like effect that will make the ball bounce anywhere within the circle.
2 years ago
Ylynnaa:
Oh then idk sorry
2 years ago
xnonangiex:
what for
2 years ago
Join the QuestionCove community and study together with friends!
Sign Up
Aratox:
Just a project I'm working on at Codepen, which basically allows me to run my own code. It's all for fun, although it's in a few viral YouTube videos, and I'd like to create my own from scratch.
2 years ago
xnonangiex:
ohh
2 years ago
xnonangiex:
im not smart enough for that
2 years ago
Mysterious:
how do you want it? can you explain further
2 years ago
Mysterious:
@aratox wrote:
@ylynnaa wrote:
On here or something?
I'm talking about in the code... if you run the code, there should be a ball that appears to be bouncing in a circle, but it's only bouncing up and down within the circle, without the effect of gravity. I'm asking if anyone can help me create a gravity-like effect that will make the ball bounce anywhere within the circle.
ill just send the code to you in some mins
2 years ago
Join the QuestionCove community and study together with friends!
Sign Up
Aratox:
@mysterious wrote:
@aratox wrote:
@ylynnaa wrote:
On here or something?
I'm talking about in the code... if you run the code, there should be a ball that appears to be bouncing in a circle, but it's only bouncing up and down within the circle, without the effect of gravity. I'm asking if anyone can help me create a gravity-like effect that will make the ball bounce anywhere within the circle.
ill just send the code to you in some mins
I just want it to obey the force of gravity... kinda like something from this video ->
https://www.youtube.com/shorts/5NOlGvNOQnc ... the YouTuber inspired me to make my own, and I've been building it pretty successfully, although I'm pretty sure the one that they have is built in Python, and I only work in HTML, CSS, and JavaScript.
2 years ago
Mysterious:
btw you cant acheive the same results but ill try if i can make it work somehow
2 years ago
Aratox:
I know that I can't, but thank you for helping, you're the only one that's tried so far...
2 years ago
Mysterious:
here is the code but it is for a box
2 years ago
Mysterious:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Box with Circles</title>
<style>
body {
background-color: black;
}
.box {
background-color: transparent;
margin: 0 auto;
width: 500px;
height: 300px;
position: relative;
border-radius: 20px;
border: 3px solid #006699;
overflow: hidden;
}
.box b {
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ffcc00;
position: absolute;
animation: moveX 2s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate, changeBallColor 0.5s linear 0s infinite;
}
@keyframes moveX {
from { left: 0; }
to { left: 480px; }
}
@keyframes moveY {
from { top: 0; }
to { top: 280px; }
}
@keyframes changeBallColor {
from { background-color: #ffcc00; }
to { background-color: #ffffff; }
}
</style>
</head>
<body>
<div class="box" id="box">
<b></b>
</div>
<script>
function getRandomColor() {
return '#' + Math.floor(Math.random()*16777215).toString(16);
}
function changeBallColor() {
const ball = document.querySelector('.box b');
ball.style.backgroundColor = getRandomColor();
}
setInterval(changeBallColor, 500);
function changeBorderColor() {
const box = document.getElementById('box');
box.style.borderColor = getRandomColor();
}
setInterval(changeBorderColor, 500);
</script>
</body>
</html>
2 years ago
Join the QuestionCove community and study together with friends!
Sign Up
Mysterious:
@ Aratox here
@mysterious wrote:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Box with Circles</title>
<style>
body {
background-color: black;
}
.box {
background-color: transparent;
margin: 0 auto;
width: 500px;
height: 300px;
position: relative;
border-radius: 20px;
border: 3px solid #006699;
overflow: hidden;
}
.box b {
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ffcc00;
position: absolute;
animation: moveX 2s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate, changeBallColor 0.5s linear 0s infinite;
}
@keyframes moveX {
from { left: 0; }
to { left: 480px; }
}
@keyframes moveY {
from { top: 0; }
to { top: 280px; }
}
@keyframes changeBallColor {
from { background-color: #ffcc00; }
to { background-color: #ffffff; }
}
</style>
</head>
<body>
<div class="box" id="box">
<b></b>
</div>
<script>
function getRandomColor() {
return '#' + Math.floor(Math.random()*16777215).toString(16);
}
function changeBallColor() {
const ball = document.querySelector('.box b');
ball.style.backgroundColor = getRandomColor();
}
setInterval(changeBallColor, 500);
function changeBorderColor() {
const box = document.getElementById('box');
box.style.borderColor = getRandomColor();
}
setInterval(changeBorderColor, 500);
</script>
</body>
</html>
2 years ago
Mysterious:
@Aratox
@mysterious wrote:
@ Aratox here
@mysterious wrote:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Box with Circles</title>
<style>
body {
background-color: black;
}
.box {
background-color: transparent;
margin: 0 auto;
width: 500px;
height: 300px;
position: relative;
border-radius: 20px;
border: 3px solid #006699;
overflow: hidden;
}
.box b {
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ffcc00;
position: absolute;
animation: moveX 2s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate, changeBallColor 0.5s linear 0s infinite;
}
@keyframes moveX {
from { left: 0; }
to { left: 480px; }
}
@keyframes moveY {
from { top: 0; }
to { top: 280px; }
}
@keyframes changeBallColor {
from { background-color: #ffcc00; }
to { background-color: #ffffff; }
}
</style>
</head>
<body>
<div class="box" id="box">
<b></b>
</div>
<script>
function getRandomColor() {
return '#' + Math.floor(Math.random()*16777215).toString(16);
}
function changeBallColor() {
const ball = document.querySelector('.box b');
ball.style.backgroundColor = getRandomColor();
}
setInterval(changeBallColor, 500);
function changeBorderColor() {
const box = document.getElementById('box');
box.style.borderColor = getRandomColor();
}
setInterval(changeBorderColor, 500);
</script>
</body>
</html>
2 years ago
Aratox:
@mysterious wrote:
@Aratox
@mysterious wrote:
@ Aratox here
@mysterious wrote:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Box with Circles</title>
<style>
body {
background-color: black;
}
.box {
background-color: transparent;
margin: 0 auto;
width: 500px;
height: 300px;
position: relative;
border-radius: 20px;
border: 3px solid #006699;
overflow: hidden;
}
.box b {
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ffcc00;
position: absolute;
animation: moveX 2s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate, changeBallColor 0.5s linear 0s infinite;
}
@keyframes moveX {
from { left: 0; }
to { left: 480px; }
}
@keyframes moveY {
from { top: 0; }
to { top: 280px; }
}
@keyframes changeBallColor {
from { background-color: #ffcc00; }
to { background-color: #ffffff; }
}
</style>
</head>
<body>
<div class="box" id="box">
<b></b>
</div>
<script>
function getRandomColor() {
return '#' + Math.floor(Math.random()*16777215).toString(16);
}
function changeBallColor() {
const ball = document.querySelector('.box b');
ball.style.backgroundColor = getRandomColor();
}
setInterval(changeBallColor, 500);
function changeBorderColor() {
const box = document.getElementById('box');
box.style.borderColor = getRandomColor();
}
setInterval(changeBorderColor, 500);
</script>
</body>
</html>
Thank you!
2 years ago
Aratox:
Ylynnaa:
xnonangiex:
Mysterious:
glomore600:
find someone says that that one person your talking to doesn't really like you should I take their advice and leave or should I ask the person i'm talking t
Addif9911:
Him I dimmed the light that once felt mine, a glow I never meant to lose. I over-read the shadows, let voices crowd the room where only two hearts shouldu20
EdwinJsHispanic:
Poem to my mom who proved my point "You proved my point, I am a failure. but I kinda wish, you were my savior.
Wolfwoods:
The Modern Princess "you spoke so softly to me, held me close when no one else did, loved me in a way no one else dared to.
notmeta:
balance the following equation - alumoinum chlorate --> alumninum chloride + oxyg