We Keep Coding

Animation using Javascript

I want the div to slide from left to right, and then back again from right left when it reaches the end of the browser using JavaScript.
var imgObj = null;
var animate;
function init() {
imgObj = document.getElementById('animate');
imgObj.style.position = 'fixed';
imgObj.style.left = '0px';
moveRight();
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 1 + '%';
if (imgObj.style.left == '95%') {
clearTimeout(animate)
alert("i am here")
moveLeft();
}
animate = setTimeout(moveRight, 20);
}
function moveLeft() {
imgObj.style.left = parseInt(imgObj.style.left) - 1 + '%';
if (imgObj.style.right == '95%') {
clearTimeout(animate)
alert('i am here2')
moveRight();
}
animate = setTimeout(moveLeft, 20);
}
window.onload = init;
#animate {
width: 5%;
height: 10%;
background-color: red;
}
<div id="animate"></div>

This is an example of a similar animation, started by the button.You should always use variables to change values and not just hardcorde values to elements. In this case pos is the variable that gets changed (pos++ and pos--) and then added to the style-property.
In your Code i think you never stop increasing the % value. So it gets stuck in a scenario where it does +1 -1 +1 -1 forever.
function myMove() {
var elem = document.getElementById("myAnimation");
var pos = 0;
var id = setInterval(frame, 10);
function frame() {
if (pos == 100) {
clearInterval(id);
alert("done");
myMove2();
} else {
pos++;
elem.style.left = pos + '%';
}
}
}
function myMove2() {
var elem = document.getElementById("myAnimation");
var pos = 100;
var id = setInterval(frame, 10);
function frame() {
if (pos == 0) {
clearInterval(id);
alert("done2");
myMove();
} else {
pos--;
elem.style.left = pos + '%';
}
}
}
#myAnimation {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id ="myAnimation"></div>

I wanna repeat function infinite but i couldn't

I wanna do some effect to my background so i tought i can add some shapes flying around but i do only 1 shape i cant loop or anything
i tried call function more than a one time but it doesnt help
function animasyon(a) {
window.onload=function(){
var id = setInterval(anim,5);
$('body').append('<div class=shape></div>');
$('body').append('<div class=shape></div>');
var kutu = document.getElementsByClassName("shape");
var pos = 0;
var x = window.innerWidth;
var y = window.innerHeight;
var borderSize = Math.floor(Math.random() * 3 ) + 1;
var ySize = Math.floor(Math.random() * y ) + 1;
var Size = Math.floor(Math.random() * 30 ) + 5;
var yon = Math.floor(Math.random() *2)+1;
var dolu = Math.floor(Math.random() *2)+1;
if (ySize > 50) { ySize-=20; }
function anim(){
if (pos == x) {
clearInterval(id);
document.getElementById("shape").remove();
}else{
pos++;
kutu[a].style.position = "absolute";
kutu[a].style.border = "solid rgb(119,38,53) "+borderSize+"px";
kutu[a].style.left = pos+"px";
kutu[a].style.width = Size+"px";
kutu[a].style.height = Size+"px";
if (yon == 1) { ySize-=0.2; } else { ySize+=0.2; }
if (dolu==1) {kutu[a].style.background = "rgb(119,38,53)";}
if (kutu[a].offsetTop < 0 || kutu[a].offsetTop > y-30) {document.getElementById("shape").remove();}
kutu[a].style.top = ySize+"px";
}
}
}
}
animasyon(0);

Try Calling 'anim' function in this way
setInterval(function(){anim()},5);

Your problem is that you are assigning window.onload function a value inside the function animasyon
window.onload holds only 1 function. If you call animation function more than once, then the last one will overwrite the first one.
Edit: You need to separate your animation logic from the page load logic. They are completely separate things.
Here is an example of adding multiple objects and animating each separately.
// HTML
<div id="container">
<div id="ball"></div>
<div id="ball2"></div>
<div id="ball3"></div>
<div id="ball4"></div>
</div>
// CSS
#ball, #ball2, #ball3, #ball4 {
background: red;
border: 1px solid #FAFDFA;
display: inline-block;
width: 1em;
height: 1em;
border-radius: 2em;
position: absolute;
}
#ball2 {
background: blue;
}
#ball3 {
background: green;
}
#ball4 {
background: purple;
}
#container {
width: 512px;
height: 512px;
background: black;
position: relative;
}
// JS
const container = document.getElementById('container');
const stageWidth = 512;
const stageHeight = 512;
const makeFall = (elementId) => {
// this function makes an enlement fall in random direction
const animationSpeed = 4;
// your onload function
const ball = document.getElementById(elementId);
let directionX = (Math.random() * animationSpeed * 2) - animationSpeed;
let directionY = Math.random() * animationSpeed;
const setRandomStart = () => {
ball.style.top = '10px';
ball.style.left = (Math.random() * (stageWidth / 2)) + 'px';
directionX = (Math.random() * animationSpeed * 2) - animationSpeed;
directionY = Math.random() * animationSpeed;
}
setRandomStart();
let animationInterval = setInterval(() => {
let px = parseFloat(ball.style.left);
let py = parseFloat(ball.style.top);
px += directionX;
py += directionY;
if (px > stageWidth - 20 || py > stageHeight - 20 || px < -20) {
setRandomStart();
} else {
ball.style.left = px + 'px';
ball.style.top = py + 'px';
}
}, 48);
}
// In Your onload function you can add the elements and then animate
makeFall('ball');
makeFall('ball2');
makeFall('ball3');
makeFall('ball4');
https://jsfiddle.net/753oL8re/4/

How to display progress bar width as decimal?

Hi I have this working java script progress bar which shows progress bar as int.
I want to display the result of percentage as decimal?I have searched a lot in google and stack overflow didn't get what I want.
<html>
<head>
<style>
#myProgress {
width: 100%;
background-color: #ddd;
}
#myBar {
width: 0%;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
}
</style>
</head>
<body>
<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
<div id="myBar">0%</div>
</div>
<button onclick="move()">Click Me</button>
<script>
function move() {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 10);
function frame() {
if (width >= 10) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width *1 + '%'; //want this result as decimal
}
}
}
</script>
</body>
</html>

There you go, buddy. Change the JS as follows (and read the comments):
function move() {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 1); //change the setInterval from 10ms to 1ms, or whatever value you want to make it faster/slower
function frame() {
if (width >= 10) {
clearInterval(id);
} else {
width += 0.1; //change the increment value to 0.1 instead of 1
width = Math.round(width * 10) / 10; // round to nearest decimal
elem.style.width = width + '%';
elem.innerHTML = width + '%';
}
}
}

javascript breathing element - Animation seems to act up after long period of time

So this is my first code snippet that I wrote for fun as part of an exercise. I created a 300 × 300 px box where two corners have their border-radius increased and decreased to create a breathing animation. After a couple of minutes, the animations seem to speed up and flutter.
Does anyone have any idea how to improve the code?
function frame() {
var elem = document.getElementById('box1');
var radius = 0;
var id1 = setInterval(frame1, 20);
var id2 = setInterval(frame2, 20);
function frame1() {
if (radius == 300) {
clearInterval(id1);
setInterval(frame2, 20);
} else {
clearInterval(id2);
radius ++;
elem.style.borderTopRightRadius = radius + 'px';
elem.style.borderBottomLeftRadius = radius + 'px';
}
return radius;
}
function frame2() {
if (radius == 0) {
clearInterval(id2);
setInterval(frame1, 20);
} else {
clearInterval(id1);
radius --;
elem.style.borderTopRightRadius = radius + 'px';
elem.style.borderBottomLeftRadius = radius + 'px';
}
return radius;
}
}
frame()

Using requestAnimationFrame and basing the animation on elapsed time, and some dirty maths
var elem = document.getElementById("box1");
var radius = 0;
var begin;
function frame(v) {
if(begin === undefined) {
begin = v;
}
let radius = Math.abs((300 + (v - begin) / 20) % 600 - 300);
elem.style.borderTopRightRadius = radius + "px";
elem.style.borderBottomLeftRadius = radius + "px";
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
#box1 {
width:500px;
height:500px;
background:dodgerblue;
}
<div id="box1">
</div>
But CSS animation is probably better for such a simple animation
#box1 {
width:500px;
height:500px;
background:dodgerblue;
}
#box1 {
animation:breath 6s infinite linear alternate;
}
#keyframes breath {
from { border-radius: 0 0 0 0; }
to { border-radius: 0 300px 0 300px; }
}
<div id="box1">
</div>
Here's the above two methods, side by side
var elem = document.getElementById("box1");
var radius = 0;
var begin;
var maxRadius = 100;
var x = 60;
function frame(v) {
if(begin === undefined) {
begin = v;
}
let radius = Math.abs((maxRadius + (v - begin) / x) % (maxRadius *2) - maxRadius);
elem.style.borderTopRightRadius = radius + "px";
elem.style.borderBottomLeftRadius = radius + "px";
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
#box1 {
width:200px;
height:200px;
background:dodgerblue;
display:inline-block;
margin-right:20px;
}
#box2 {
width:200px;
height:200px;
background:dodgerblue;
display:inline-block;
}
#box2 {
animation:breath 6s infinite linear alternate;
}
#keyframes breath {
from { border-radius: 0 0 0 0; }
to { border-radius: 0 50% 0 50%; }
}
<div id="box1">
</div>
<div id="box2">
</div>
Both methods should be immune to any timing issues due to tab being in background etc

JavaScript : animation for a div

I want to animate a div (say height 50 px and width 50 px) from left to right in the browser.
I can share my html css part here:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box{
width:100px;
height:100px;
position: absolute;
}
.blue{
background:#00f;
}
.position{
margin-top: 50px;
}
</style>
</head>
<body>
<div class="box blue position" id="move_box"> </div>
<script>
</script>
</body>
</html>
How can I animate the div from left to right according to the condition "moves 10 pixels right and 10 pixels down per second"?
Note: only in JavaScript.
My script:
<script>
var box = document.getElementById('move_box'),
boxPos = 0,
boxLastPos = 0,
boxVelocity = 0.01,
limit = 300,
lastFrameTimeMs = 0,
maxFPS = 60,
delta = 0,
timestep = 1000 / 60,
fps = 60,
framesThisSecond = 0,
lastFpsUpdate = 0,
running = false,
started = false,
frameID = 0;
function update(delta) {
boxLastPos = boxPos;
boxPos += boxVelocity * delta;
// Switch directions if we go too far
if (boxPos >= limit || boxPos <= 0) boxVelocity = -boxVelocity;
}
function draw(interp) {
box.style.left = (boxLastPos + (boxPos - boxLastPos) * interp) + 'px';
box.style.top = (boxLastPos + (boxPos - boxLastPos) * interp) + 'px';
console.log(box.style.top);
}
function panic() {
delta = 0;
}
function begin() {
}
function end(fps) {
/*box.style.backgroundColor = 'blue';*/
}
function stop() {
running = false;
started = false;
cancelAnimationFrame(frameID);
}
function start() {
if (!started) {
started = true;
frameID = requestAnimationFrame(function(timestamp) {
draw(1);
running = true;
lastFrameTimeMs = timestamp;
lastFpsUpdate = timestamp;
framesThisSecond = 0;
frameID = requestAnimationFrame(mainLoop);
});
}
}
function mainLoop(timestamp) {
// Throttle the frame rate.
if (timestamp < lastFrameTimeMs + (1000 / maxFPS)) {
frameID = requestAnimationFrame(mainLoop);
return;
}
delta += timestamp - lastFrameTimeMs;
lastFrameTimeMs = timestamp;
begin(timestamp, delta);
if (timestamp > lastFpsUpdate + 1000) {
fps = 0.25 * framesThisSecond + 0.75 * fps;
lastFpsUpdate = timestamp;
framesThisSecond = 0;
}
framesThisSecond++;
var numUpdateSteps = 0;
while (delta >= timestep) {
update(timestep);
delta -= timestep;
if (++numUpdateSteps >= 240) {
panic();
break;
}
}
draw(delta / timestep);
end(fps);
frameID = requestAnimationFrame(mainLoop);
}
start();
</script>

Check that:
var i = 1;
var div = document.getElementById('move_box');
function myLoop() {
setTimeout(function() {
div.style.top = i * 10 + 'px'
div.style.left = i * 10 + 'px'
i++;
if (i < 5) {
myLoop();
}
}, 1000)
}
myLoop(); // start the loop
.box {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
}
.blue {
background: #00f;
}
.position {
margin-top: 50px;
}
<div class="box blue position" id="move_box"> </div>
JSFiddle