What would be the JavaScript version of the below jQuery code?

Question

What would be the JavaScript version of the below jQuery code?

I am interested in creating a spinning wheel where instead of the entire wheel rotating, only the pointer rotates. I currently have a jQuery code snippet that achieves this effect, but I am looking to convert it into JavaScript.

Current jQuery code:

$( document ).ready(function() {
  var startJP = (164) + (360 * 3);
  $('.jackpot-pointer').animate({  transform: startJP }, {
      step: function(now,fx) {
        $(this).css('-webkit-transform','rotate('+now+'deg)'); 
      },
      duration:6000
  },'linear');
});

My goal is to achieve an effect similar to the one shown here: https://i.sstatic.net/0KArr.gif

javascript jquery html css

Answer 1

Answer №1

Here is an easy demonstration of how you can achieve this using vanilla JavaScript and CSS with the help of CSS animations controlled by JS.

var stage = document.querySelector('#stage');
var rot = document.querySelector('#rotating');

stage.addEventListener('click', function () {
 rot.classList.toggle('animated');
});

#stage {
  position: relative;
  height: 100px;
  background-color: #000;
}

#rotating {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  width: 50px;
  height: 50px;
  background-color: #c00;
  animation: rotate linear 6s;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  transform-origin: 50% 50%;
}

#rotating.animated {
  animation-play-state: running;
}

@keyframes rotate {
  0% {
    transform:  rotate(0deg) ;
  }
  100% {
    transform:  rotate(359deg) ;
  }
}

<div id="stage">
  <div id="rotating"></div>
</div>

You may need to add vendor prefixes in the CSS code depending on the browsers you want to support.

Answer 2

Here is an easy demonstration of how you can achieve this using vanilla JavaScript and CSS with the help of CSS animations controlled by JS.

var stage = document.querySelector('#stage');
var rot = document.querySelector('#rotating');

stage.addEventListener('click', function () {
 rot.classList.toggle('animated');
});

#stage {
  position: relative;
  height: 100px;
  background-color: #000;
}

#rotating {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  width: 50px;
  height: 50px;
  background-color: #c00;
  animation: rotate linear 6s;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  transform-origin: 50% 50%;
}

#rotating.animated {
  animation-play-state: running;
}

@keyframes rotate {
  0% {
    transform:  rotate(0deg) ;
  }
  100% {
    transform:  rotate(359deg) ;
  }
}

<div id="stage">
  <div id="rotating"></div>
</div>

You may need to add vendor prefixes in the CSS code depending on the browsers you want to support.

What would be the JavaScript version of the below jQuery code?

Answer №1

Similar questions

Alignment of inner div within the footer

Tips for resolving highlighted font awesome Facebook icon issue

The ripples can be found at the bottom of the map, not at the front

Updating an array in JavaScript with a dynamically generated key name while working in the ReactJS framework

The functionality of WebDriver Wait is not functioning as expected

How can you enable fullscreen for a featherlight iFrame?

Manipulate numerous documents within MongoDB by updating them with varying data in each

What is the best way to adjust column sizes, setting one with a minimum width while allowing the other to expand to accommodate its content?

How can we generate 3 different arrays, each containing an equal number of items except for the last array, using VueJS?

Enclose chosen images with selection made

When the route is changed, the system must execute a function to verify the authenticity of the token

Apply a specific style conditionally using Angular's ng-repeat directive

The loading time for the Ajax request is unreasonably slow

Navigating through a predetermined list of HTML pages with next and previous options

Passing a variable between two PHP files and then showcasing its value in a separate third file

What could be causing the "undefined" property error in my Vue.js component?

Having trouble with jQuery in Blogger?

The error message "TypeError: self.parent.parent.context.parseInt is not a function" indicates that

What methods can I use to display or conceal certain content based on the user's location?

Navigate to Element ID with Nuxt.js on click