JavaScript and CSS animations offer dynamic and engaging ways to bring

Question

JavaScript and CSS animations offer dynamic and engaging ways to bring

I'm working on a div section and I want it to come down and rotate when a button is clicked. However, after moving to the bottom, it doesn't rotate as expected but instead returns to its initial position along the Y axis. How can I fix this issue?


let slider = document.getElementsByClassName('slideshow')[0];

function moveFunction() {
  slider.classList.add('movement');
  setTimeout(nextFunction, 5000);
}

function nextFunction() {
  slider.removeAttribute('class', 'movement');
  slider.classList.add('movementAfter');
}


* {
  padding: 0;
  margin: 0;
}

body {
  background-image: url('346767.jpg');
  background-size: cover;
  z-index: 0;
}

#colorbody {
  background-color: rgba(235, 107, 107, 0.425);
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.slideshow {
  height: 100px;
  width: 200px;
  background-color: rgb(68, 0, 255);
  margin: 0 auto;
}

.movement {
  transform: translateY(500px);
  transition: 4s;
}

.movementAfter {
  transform: rotate(360deg);
  background-color: red;
  transition: 2s;
  margin: 0 auto;
  height: 100px;
  width: 200px;
}


        <div class="slideshow" class="movement"></div>
        <button id="chos" onclick="moveFunction()">Click to Move</button>

javascript html css

Answer 1

Answer №1

Below is an example snippet where you can change the animation at different percentages of completion.

If you want to trigger the same animation, you can use setTimeout to remove the class and add it back on click of a button.

Using animations gives you additional functionality and properties to work with as needed.

let slider = document.getElementsByClassName('slideshow')[0];
let btn = document.getElementById('chos');

btn.addEventListener('click', function() {
  slider.classList.add('animate')
  setTimeout(() => {
    slider.classList.remove('animate')
  }, 5000)
})

* {
  padding: 0;
  margin: 0;
}

body {
  background-image: url('346767.jpg');
  background-size: cover;
  z-index: 0;
}

#colorbody {
  background-color: rgba(235, 107, 107, 0.425);
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.slideshow {
  height: 100px;
  width: 200px;
  background-color: rgb(68, 0, 255);
  margin: 0 auto;
}

.slideshow.animate {
  animation: spinTrans 5s;
}

@keyframes spinTrans {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(500px) rotate(360deg)
  }
  100% {
    transform: rotate(0deg) translateY(0px);
    background-color: red;
  }
}

<div class="slideshow"></div>
<button id="chos">click to move</button>

================================================================

Update: If you want to keep the box at the bottom without any movement, you should remove the second function. You can then apply any degree of rotation to it.

Regarding the previous edit: Your code rotates the slideshow by 360deg, but since it goes back to the same state, you don't see any visible changes.
By changing the angle to 90deg, 180deg, 270deg, 450deg, etc., you will see rotations. However, rotating by 0deg, 360deg, or 720deg won't be noticeable.

Here is a working snippet with a 180deg rotation. You can try out different angles mentioned above to see the changes.

let slider = document.getElementsByClassName('slideshow')[0];

function movingfunc() {
  slider.classList.add('movement')
}

* {
  padding: 0;
  margin: 0;
}

body {
  background-image: url('346767.jpg');
  background-size: cover;
  z-index: 0;
}

#colorbody {
  background-color: rgba(235, 107, 107, 0.425);
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.slideshow {
  height: 100px;
  width: 200px;
  background-color: rgb(68, 0, 255);
  margin: 0 auto;
}

.movement {
  transform: translateY(500px) rotate(360deg);
  transition: 4s;
  background-color: red;
}

<div class="slideshow" class="movement"></div>
<button id="chos" onclick="movingfunc()">click to move</button>

Answer 2

Below is an example snippet where you can change the animation at different percentages of completion.

If you want to trigger the same animation, you can use setTimeout to remove the class and add it back on click of a button.

Using animations gives you additional functionality and properties to work with as needed.

let slider = document.getElementsByClassName('slideshow')[0];
let btn = document.getElementById('chos');

btn.addEventListener('click', function() {
  slider.classList.add('animate')
  setTimeout(() => {
    slider.classList.remove('animate')
  }, 5000)
})

* {
  padding: 0;
  margin: 0;
}

body {
  background-image: url('346767.jpg');
  background-size: cover;
  z-index: 0;
}

#colorbody {
  background-color: rgba(235, 107, 107, 0.425);
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.slideshow {
  height: 100px;
  width: 200px;
  background-color: rgb(68, 0, 255);
  margin: 0 auto;
}

.slideshow.animate {
  animation: spinTrans 5s;
}

@keyframes spinTrans {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(500px) rotate(360deg)
  }
  100% {
    transform: rotate(0deg) translateY(0px);
    background-color: red;
  }
}

<div class="slideshow"></div>
<button id="chos">click to move</button>

================================================================

Update: If you want to keep the box at the bottom without any movement, you should remove the second function. You can then apply any degree of rotation to it.

Regarding the previous edit: Your code rotates the slideshow by 360deg, but since it goes back to the same state, you don't see any visible changes.
By changing the angle to 90deg, 180deg, 270deg, 450deg, etc., you will see rotations. However, rotating by 0deg, 360deg, or 720deg won't be noticeable.

Here is a working snippet with a 180deg rotation. You can try out different angles mentioned above to see the changes.

let slider = document.getElementsByClassName('slideshow')[0];

function movingfunc() {
  slider.classList.add('movement')
}

* {
  padding: 0;
  margin: 0;
}

body {
  background-image: url('346767.jpg');
  background-size: cover;
  z-index: 0;
}

#colorbody {
  background-color: rgba(235, 107, 107, 0.425);
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.slideshow {
  height: 100px;
  width: 200px;
  background-color: rgb(68, 0, 255);
  margin: 0 auto;
}

.movement {
  transform: translateY(500px) rotate(360deg);
  transition: 4s;
  background-color: red;
}

<div class="slideshow" class="movement"></div>
<button id="chos" onclick="movingfunc()">click to move</button>

JavaScript and CSS animations offer dynamic and engaging ways to bring

Answer №1

Similar questions

Automatic closure of Info Window on Google Maps is not functioning as expected

How is it that connecting an event listener to a React child component can be done in a way that resembles simply passing a prop

What is the best method for eliminating a character from all elements in jQuery classes?

What is the easiest way to update the border color of a radio button in Material-UI?

Unpredictable Dependency Outcomes in Node.js

What is the method for specifying input type in an HTML document?

Check if the DIV element does not exist in the DOM before using the

Specialized hover mission

Coordinating multiple API requests for optimal performance

ReactJS safeguarded route redirection/refresh obstacle

Using Sass to Loop through Specific Items

Identify the absence of search results in an Ajax request to the search page before rendering the HTML content

Utilizing HTML imports in Typescript for efficient use as TemplateStringLiteral

The HTTPOnly cookie is not accessible within the getServerSideProps function in Next.js

Struggling to contain the image inside my div element

Incorporating a download link with the combination of canvg and amcharts

Converting an HTML form with empty values into JSON using JavaScript and formatting it

Rephrase the ajax call and the data retrieved

Receiving data dynamically from Highcharts results in an additional legend appearing in the chart display

Incomplete DOM elements in jQuery are like puzzles that need to be solved