[html]
<style>
.container {
  display: grid;
  place-items: center;
  height: 100%;
}

.spinner, .spinner__won {
  position: relative;
  overflow-x: hidden;
  background-color: white;
  box-shadow: 0px 5px 7px -2px rgba(0, 0, 0, 0.4);
  border-radius: 5px;
}

.spinner {
  max-width: 610px;
  min-width: 610px;
  border-top: 5px solid black;
  border-bottom: 5px solid black;
}

.spinner__won {
  max-width: 590px;
  min-width: 590px;
  padding: 3px 10px;
  font-size: 24px;
  letter-spacing: 12px;
}

.spinner-items {
  position: relative;
  display: inline-flex;
  margin: 0;
  padding: 0;
  margin-left: -246px;
}

.spinner__marker {
  position: absolute;
  height: 100%;
  width: 3px;
  background-color: yellow;
  transform: translateX(-50%);
  left: 50%;
  top: 0;
}

.spinner-items__item {
  display: block;
  list-style-type: none;
  padding: 32px 0;
  font-size: 32px;
  color: #c2c2c2;
  border-left: 5px solid black;
  width: 117px;
  max-width: 117px;
  overflow: hidden;
  text-align: center;
}

.button3 {
  padding: 21px 46px;
  border-radius: 10px;
  border: none;
  box-shadow: 0px 5px 7px -2px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  background-color: white;
  transition: box-shadow 300ms ease;
}

.button3:hover {
  box-shadow: 0px 2.5px 3.5px -1px rgba(0, 0, 0, 0.2);
}

.win {
  background-color: lemonchiffon;
}
</style>
<script>
/*
* Emoji Spinner inspired by CS:GO Case Opening
*
* I know, the code's a mess. I hope in a few years I'll look back at this and laugh.
* But for now, I'm actually proud of this monster.
*
* With a bit of front-end sprinkles it ain't that bad!
*
* If you're re-using this code. Please refer this as your source.
* Give credit where it's due. With a comment in the code for example.
*/

class SpinnerAnimation {
    constructor({container, list}) {
      this.tickSound = new Audio("h-ttps://freesound.org/data/previews/269/269026_5094889-lq.mp3");
      this.tickSound.playbackRate = 4;
     
      this.winSound = new Audio("h-ttps://freesound.org/data/previews/511/511484_6890478-lq.mp3");
     
      this.firstRound = true;

      this.reset();

      this.spinnerContainer = document.getElementById(container);
      this.spinnerList = spinnerContainer.children.namedItem(list);
      this.spinnerMarker = spinnerContainer.children.namedItem("spinnerMarker");
      this.spinnerItems = this.spinnerList.children;
      this.spinnerWon = document.getElementById("spinnerWon");
    }
 
    reset() {
        this.started = false;
        this.stopped = false;
        this.stopAnimation = false;
        this.lowerSpeed = 0;
        this.ticks = 0;
        this.offSet = 0;
        this.recycle = false;
        this.tick = false;
        this.state = null;
        this.speed = 0;
        this.winningItem = 0;
        this.firstRound = false;
    }

    start(speed = 1200) {
        this.started = true;
        this.speed = speed;
        console.log(this.speed);
        this.loop();
    }

    loop() {
        let dt = 0; // Delta Time is the amount of time between two frames
        let last = 0; // Last time of frame

        // The Animation Loop
        function loop(ms) {

            if(this.recycle) {
                this.recycle = false;
                const item = spinnerList.firstElementChild;
                spinnerList.append(item);
            }

            if(this.tick) {
                this.tick = false;
                this.tickSound.play();
            }

            this.offSet += this.speed * dt;

            const ct = ms / 1000; // MS == The amount of Milliseconds the animation is already going for. Divided by 1000 is the amount of seconds
            dt = ct - last;
            last = ct;

            // Move the item to the left
            this.spinnerList.style.right = this.offSet + "px";
         
            if(this.offSet >= 122 ) {
                this.recycle = true;
                this.offSet = 0;
                this.tick = true;
                this.ticks += 1;
                if(this.ticks >= 20 && (Math.random() * 10) >= 5) {
                    this.stop();
                }
            }

            if(this.stopped) {
                let stopped = false;
                if(!stopped) this.speed -= this.lowerSpeed;

                if(this.speed <= 0) {
                    stopped = true;
                    this.speed = 0;
                }

                if(stopped) {
                    if(this.offSet >= 58.6) {
                        this.offSet += 6;
                    } else {
                        this.offSet -= 6;
                    }

                    if(this.offSet >= 122 || this.offSet <= 0) {
                        this.stopAnimation = true;
                       
                        this.winSound.play();
                     
                        if(this.offSet >= 122) {
                          this.winningItem = 5;
                          this.spinnerItems.item(5).classList.add("win");
                          this.spinnerWon.innerText += this.spinnerItems.item(5).innerText;
                          this.offSet = 122;
                        }
                       
                        if(this.offSet <= 0) {
                          this.winningItem = 4;
                          this.spinnerItems.item(4).classList.add("win");
                          this.spinnerWon.innerText += this.spinnerItems.item(4).innerText;
                          this.offSet = 0;
                        }
                     
                    }
                 
                }
            }

            if(!this.stopAnimation) {
                requestAnimationFrame(loop);
            }
        }

        // Bind Class to loop function
        loop = loop.bind(this);
        requestAnimationFrame(loop);
    }

    stop() {
        this.stopped = true;

        // Calculate a random lower speed
        this.lowerSpeed = Math.ceil(Math.random() * 10) + 1;
    }
}

const startSpinnerBtn = document.getElementById("startSpinner");

const animation = new SpinnerAnimation({
    container: "spinnerContainer",
    list: "spinnerList"
});

startSpinnerBtn.addEventListener("click", (e) => {
    if(animation.started == "ready") { return; }
 
    if(!animation.firstRound) animation.spinnerItems.item(animation.winningItem).classList.remove("win");
    animation.reset();
    animation.start();
});
</script>
<div class="container">
  <div class="spinner" id="spinnerContainer">
    <ul class="spinner-items" id="spinnerList">
      <li class="spinner-items__item" id="8">🐶</li>
      <li class="spinner-items__item" id="9">🐷</li>
      <li class="spinner-items__item" id="1">🐸</li>
      <li class="spinner-items__item" id="2">🐹</li>
      <li class="spinner-items__item" id="3">🐵</li>
      <li class="spinner-items__item" id="4">🐰</li>
      <li class="spinner-items__item" id="5">🐭</li>
      <li class="spinner-items__item" id="6">🐮</li>
      <li class="spinner-items__item" id="7">🐨</li>
    </ul>
    <div class="spinner__marker" id="spinnerMarker"> </div>
  </div>
  <div class="spinner__won" id="spinnerWon"></div>
  <div class="button3" id="startSpinner">Spin Emoji!</div>
</div>
[/html]

Подпись автора

"You don't need to be protected,
Because nothing shocks you any more." © Mesh