How to reverse css keyfrmames animation by only using javascript? [duplicate] - javascript

This question already has answers here:
How do I re-trigger a WebKit CSS animation via JavaScript?
(9 answers)
Closed 4 months ago.
document.querySelector(".fall").addEventListener("click", function () {
document.querySelector(".ball").style.animation = "anim 2s forwards";
});
//my try below
document.querySelector(".up").addEventListener("click", function () {
document.querySelector(".ball").style.animation = "anim 2s forwards reverse";
});
body{
display: flex;
justify-content: center;
}
button{
margin-top: 150px;
margin-right: 20px;
padding: 5px;
}
.box{
height: 20px;
width: 100px;
background-color: royalblue;
position: absolute;
top: 100px;
}
.ball{
height: 20px;
width: 20px;
background-color: red;
border-radius: 50%;
position: absolute;
top: 0;
}
#keyframes anim {
100%{
top: 80px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="ball"></div>
<div class="box"></div>
<button class="fall">Fall ↓</button>
<button class="up">Up ↑</button>
<script src="index.js"></script>
</body>
</html>
I wnna jump up smoothly this red ball by cliking Up ↑ button after clicking Fall ↓ button. I tride it by setting animation property with extra reverse but it's not working. It's jumping up suddenly. How can i achieve smooth jumping up transition by using only keyframes and javascript.

Here is my quick solution.
The animation was removed by setting animation as "" in animationend event listener.
The ball's top position is also set when related event listener is triggered.
const ball = document.querySelector(".ball");
const fallButton = document.querySelector(".fall");
const upButton = document.querySelector(".up");
fallButton.addEventListener("click", function() {
ball.style.animation = "anim 2s forwards";
ball.addEventListener("animationend", function() {
ball.style.top = "80px";
ball.style.animation = "";
});
});
upButton.addEventListener("click", function() {
ball.style.top = 0;
ball.style.animation = "anim 2s forwards reverse";
ball.addEventListener("animationend", function() {
ball.style.top = 0;
ball.style.animation = "";
});
});
body {
display: flex;
justify-content: center;
}
button {
margin-top: 150px;
margin-right: 20px;
padding: 5px;
}
.box {
height: 20px;
width: 100px;
background-color: royalblue;
position: absolute;
top: 100px;
}
.ball {
height: 20px;
width: 20px;
background-color: red;
border-radius: 50%;
position: absolute;
top: 0;
}
#keyframes anim {
100% {
top: 80px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="ball"></div>
<div class="box"></div>
<button class="fall">Fall ↓</button>
<button class="up">Up ↑</button>
<script src="index.js"></script>
</body>
</html>

Related

Why does my carousel rotate when the page loads, but then stops completely? [duplicate]

This question already has answers here:
Script Tag - async & defer
(12 answers)
Closed 8 days ago.
I am creating a full-stack application and for my hero page, I am working on adding a carousel that rotates images in the background.
So far I have created the HTML, CSS, and JavaScript files.
When the page loads, it rotates but then the carousel stops working and just stays on the first line.
I am not too sure if there is an error in my code but I would appreciate it if someone helped me out.
var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
function changeSlide() {
for (var i = 0; i < slides.length; i++) {
slides[i].style.opacity = 0;
}
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].style.opacity = 1;
}
setInterval(changeSlide, 3000);
*{
margin: 0%;
padding: 0%;
}
/*------------------------------Hero Page---------------------------------*/
.carousel {
width: 100%;
height: 700px;
position: relative;
overflow: hidden;
}
.slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slide:first-child {
opacity: 1;
}
.slide-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
}
.slide-1 {
background-image: url(Images/derek-baumgartner-A7sfB4yKS7s-unsplash.jpg);
}
.slide-2 {
background-image: url(Images/andrew-bain-jO_Q3EY_T0E-unsplash.jpg);
}
.slide-3 {
background-image: url(Images/aaron-dowd-N7PDwky8doM-unsplash.jpg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="practice.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="practice.css">
<title>Welcome to Washington State - Home Page</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<!------------Hero Page-------------->
<header>
<div class="carousel">
<div class="slide slide-1">
<div class="slide-content">Slide 1</div>
</div>
<div class="slide slide-2">
<div class="slide-content">Slide 2</div>
</div>
<div class="slide slide-3">
<div class="slide-content">Slide 3</div>
</div>
</div>
</header>
</body>
The problem is that you are loading your script before the page has been created and the script is running as soon as it is loaded.
You can add defer to the script, like so:
<script src="practice.js" defer></script>
Or you can move the script to the end of the HTML.
Script Tag - async & defer would be a good source of information to read for this problem.
To make it easier to see your problem, I removed your images and simply set a background-color, height, and width in the CSS to see the slides and I reduced the delay in setInterval to 1500.
var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
function changeSlide() {
for (var i = 0; i < slides.length; i++) {
slides[i].style.opacity = 0;
}
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].style.opacity = 1;
}
setInterval(changeSlide, 1500);
* {
margin: 0%;
padding: 0%;
}
/*------------------------------Hero Page---------------------------------*/
.carousel {
width: 100%;
height: 700px;
position: relative;
overflow: hidden;
}
.slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slide:first-child {
opacity: 1;
}
.slide-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
}
.slide-1 {
background-color: red;
height: 150px;
width: 200px;
}
.slide-2 {
background-color: green;
height: 150px;
width: 200px;
}
.slide-3 {
background-color: blue;
height: 150px;
width: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="practice.js" defer></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="practice.css">
<title>Welcome to Washington State - Home Page</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<!------------Hero Page-------------->
<header>
<div class="carousel">
<div class="slide slide-1">
<div class="slide-content">Slide 1</div>
</div>
<div class="slide slide-2">
<div class="slide-content">Slide 2</div>
</div>
<div class="slide slide-3">
<div class="slide-content">Slide 3</div>
</div>
</div>
</header>
</body>

How to fix the animation?

The blue block collapses and unfolds, and I need it to appear and perform an animation where it slides down
It's all about slideToggle(300) - this is the very animation of folding and unfolding. I don't want to change the code too much, what can I do about it?
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JS</title>
<link rel="stylesheet" href="stylet.css">
<script src="javat.js"></script>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="button" class="content_toggles"\>
<input type="button" class="content_blocks"\>
</body>
</html>
css
body {
background-color: gray;
}
.content_toggles {
position: absolute;
z-index: 1;
width: 100px;
height: 100px;
background-color: yellow;
border: none;
border-radius: 10px;
background-image: url("img/builderhall1.png");
background-size: 100px;
background-repeat: no-repeat;
}
.content_blocks {
display: none;
position: absolute;
z-index: 2;
margin-top: 100px;
width: 100px;
height: 100px;
background-color: blue;
border: none;
border-radius: 10px;
}
jquery
$(document).ready(function(){
$('.content_toggles').click(function(){
$('.content_blocks').slideToggle(300);
document.getElementById("content_blocks").style.display = "block";
return false;
});
});
I'm not really sure what you're asking here - you should clarify by writing what the issue you're facing is, and what the expected result should be. However, I did notice that you're including your JS file before you load the jQuery library. Simply swap the order of these two lines, or else your javascript code won't work. This is because your javascript code uses jQuery, but you are loading your code before you initialize the jQuery library. Change your HTML to look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JS</title>
<link rel="stylesheet" href="stylet.css">
<script src="jquery-3.6.0.min.js"></script>
<script src="javat.js"></script>
</head>
<body>
<input type="button" class="content_toggles"\>
<input type="button" class="content_blocks"\>
</body>
</html>
I also noticed you are trying to access the content_blocks element by its ID, but you define it by class. Instead of document.getElementById("content_blocks").style.display = "block"; do
// vanilla JS
document.querySelector(".content_blocks").style.display = "block";
// jQuery
$('.content_blocks').style.display = "block";
Or you can do
<input type="button" id="content_toggles"\>
<input type="button" id="content_blocks"\>
Do you mean something like this?
$(document).ready(function(){
$('.content_toggles').click(function(){
$('.content_blocks').slideToggle(300);
});
});
body {
background-color: gray;
}
.content_toggles {
position: absolute;
width: 100px;
height: 100px;
background-color: yellow;
border: none;
border-radius: 10px;
background-image: url("img/builderhall1.png");
background-size: 100px;
background-repeat: no-repeat;
}
.content_blocks {
display: none;
position: absolute;
margin-top: 100px;
width: 100px;
height: 100px;
background-color: blue;
border: none;
border-radius: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JS</title>
<link rel="stylesheet" href="stylet.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="javat.js"></script>
</head>
<body>
<input type="button" class="content_toggles"\>
<input type="button" class="content_blocks"\>
</body>
</html>

document.querySelectorAll doesn't apply despite the HTML adjusting

I'm trying to get all the divs within a div with document.querySelectorAll. Interestingly, when I set in the JS the height to 1000, the explorer's scroller enlarges accordingly (only the balloon doesn't get bigger). What am I doing wrong?
'use strict';
var gElBalloons;
function init() {
gElBalloons = document.querySelectorAll('.balloons');
setInterval(moveBalloons, 1000);
}
function moveBalloons() {
for (var i = 0; i < gElBalloons.length; i++) {
gElBalloons[i].style.height = 1000 + 'px';
}
}
body {
margin: 10%;
}
.balloon-1 {
display: block;
width: 120px;
height: 145px;
background-color: red;
border-radius: 80%;
position: absolute;
}
.balloon-2 {
display: block;
width: 120px;
height: 145px;
background-color: blue;
border-radius: 80%;
left: 40%;
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Balloons</title>
<link rel="stylesheet" href="./css/main.css" />
</head>
<body onload="init()">
<div class="balloons">
<div class="balloon-1"></div>
<div class="balloon-2"></div>
</div>
<script src="./js/main.js"></script>
</body>
</html>
For now, I just want to test and make sure it works correctly.
It seems that your selector selected the wrong div. If you want to make the ball bigger, you should select balloon-1 and balloon-2 instead of their container balloons.
'use strict';
var gElBalloons;
function init() {
gElBalloons = document.querySelectorAll('.balloons > div');
setInterval(moveBalloons, 1000);
}
function moveBalloons() {
for (var i = 0; i < gElBalloons.length; i++) {
gElBalloons[i].style.height = 1000 + 'px';
}
}
body {
margin: 10%;
}
.balloon-1 {
display: block;
width: 120px;
height: 145px;
background-color: red;
border-radius: 80%;
position: absolute;
}
.balloon-2 {
display: block;
width: 120px;
height: 145px;
background-color: blue;
border-radius: 80%;
left: 40%;
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Balloons</title>
</head>
<body onload="init()">
<div class="balloons">
<div class="balloon-1"></div>
<div class="balloon-2"></div>
</div>
</body>
</html>

how to translate img from its position on button click?

I am trying to translate my image from it position to some pixel for some time (example 5 sec).on button click
could you please suggest how to do this ? I am using translateX but not working. how to give time here ?
document.querySelector("#img").style.translateX = "-100px";
here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
.abc {
width: 400px;
height: 400px;
background-color: red;
}
.img {
position: absolute;
top: 0vh;
left: 0;
content: " ";
background-image: url("./a.png");
background-size: 100% 100%;
width: 100%;
height: 50vh;
opacity: 0.4;
}
</style>
</head>
<body>
<div class="abc">
<img src="./a.png" class="img" id="img" />
hello
</div>
<button onclick="pre()">Pre</button>
<button onclick="next()">Next</button>
<script>
function next() {
document.querySelector("#img").style.translateX = "-100px";
}
function pre() {
document.querySelector("#img").style.translateX = "100px";
}
</script>
</body>
</html>
https://codesandbox.io/s/ancient-cookies-ewepg?file=/index.html:0-1056
const img = document.querySelector("#img");
function next() {
img.classList.remove("horizTranslateReverse");
img.classList.add("horizTranslate");
}
function pre() {
img.classList.remove("horizTranslate");
img.classList.add("horizTranslateReverse");
}
.abc {
width: 400px;
height: 400px;
background-color: red;
}
.img {
position: absolute;
top: 0vh;
left: 0;
content: " ";
background-image: url("https://images.unsplash.com/photo-1622515658990-017acdeeade3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=282&q=80 282w");
background-size: 100% 100%;
width: 50%;
height: 50vh;
opacity: 0.4;
-webkit-transition: 3s;
-moz-transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
transition: 3s;
}
.img.horizTranslate {
margin-left: 50% !important;
}
.img.horizTranslateReverse {
margin-left: 0% !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<div class="abc">
<img src="https://images.unsplash.com/photo-1622515658990-017acdeeade3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=282&q=80 282w" class="img" id="img" />
hello
</div>
<button onclick="pre()">Pre</button>
<button onclick="next()">Next</button>
</body>
</html>
Specify transition-duration in the style of image.
The correct way to specify translate is:
document.querySelector("#img").style.transform = "translateX(100px)";
Here's the code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
.abc {
width: 400px;
height: 400px;
background-color: red;
}
.img {
position: absolute;
top: 0vh;
left: 0;
content: " ";
background-color: green;
background-image: url("./a.png");
background-size: 100% 100%;
width: 100%;
height: 50vh;
opacity: 0.4;
transition-duration: 2s;
}
</style>
</head>
<body>
<div class="abc">
<img src="./a.png" class="img" id="img" />
hello
</div>
<button onclick="pre()">Pre</button>
<button onclick="next()">Next</button>
<script>
let translateNextCount = 1;
function next() {
document.querySelector("#img").style.transform = `translateX(${translateNextCount * 100}px)`;
translateNextCount++;
}
function pre() {
document.querySelector("#img").style.transform = "translateX(-100px)";
}
</script>
</body>
</html>

Horizontal scrolling in Android Chrome with JavaScript not working as expected

I have just created a little testcode, you can find it here
http://paloula.de/test/width_002.html
It works fine under Chrome/Windows but not if you simulate a mobile phone under Chrome/Windows (e.g. Galaxy S5) or under Android mobile phone with Chrome: The page is scrolling left, but maximum of scrollLeft is not reached.
Is it the css? Is it the meta-tag? The calculation seems to be correct.
Any ideas? Thank you!
Full Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<style>
* {
margin: 0;
padding: 0;
}
HTML {
display: block;
position: relative;
height:100%;
}
BODY {
display: block;
position: relative;
min-height: 100%;
/* overflow-y: scroll; */
}
</style>
</head>
<body id="body">
<div style="background-color: #FF0000; display: block; position: relative; width: 1700px; height: 50px;">
<div style="background-color: #0000FF; display: block; position: absolute; width: 50px; height: 50px; right: 0"></div>
<div style="background-color: #FF00FF; display: block; position: absolute; width: 50px; height: 50px; left: 0"></div>
</div>
<script>
var scrollWidth = document.documentElement.scrollWidth;
var clientWidth = document.documentElement.clientWidth;
var offsetWidth = document.documentElement.offsetWidth;
console.log(scrollWidth);
console.log(clientWidth);
console.log(offsetWidth);
var maxScrollLeft = scrollWidth - clientWidth;
console.log("maxScrollLeft " + maxScrollLeft)
setTimeout(function() {
window.scrollTo(maxScrollLeft, 0);
}, 1);
setTimeout(function() {
window.scrollTo(0, 0);
}, 500);
</script>
</body>
</html>
The solution is to add minimum-scale=1 to the meta/viewport tag
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1"/>

Categories