Как реализовать тряску элементов без css и jquey ui?

Question

window.onload = load;

let N = 10;
let K = 0;
let play = true;
function load() {
    var stop = document.getElementById("stop");
    stop.onclick = RectStop;
    var start = document.getElementById("start");
    start.onclick = Rect;
    while(K!=N){
        let div = document.createElement("div");
        div.className = "rectangle";
        var area = document.getElementById("rectanglearea");
        area.append(div);
        var w = document.getElementById("rectanglearea").offsetWidth;
        var h = document.getElementById("rectanglearea").offsetHeight;
        var dx = randomInteger(0, w-100);
        var dy = randomInteger(0, h-100);
        $('.rectangle').eq(K).css('top',dy);
        $('.rectangle').eq(K).css('left',dx);
        $('.rectangle').eq(K).css('top',dy);
        $('.rectangle').eq(K).css('left',dx);
        div.setAttribute("onclick", "this.remove()");
       K++;
    }
    K=0;
}

function randomInteger(min, max) {
    var rand = min - 0.5 + Math.random() * (max - min + 1)
    rand = Math.round(rand);
    return rand;
  }
  
function RectStop(){
    play = true;
}

function Rect()
         {
        if(play==true){
        play = false;
        changeColor();
        function changeColor(){
        while(K!=N){
         color = 'rgb('+randomInteger(0,255)+','+ randomInteger(0,255)+','+ randomInteger(0,255)+")";
         $('.rectangle').eq(K).css('background-color',color);
         K++;
        }
        K=0;
        if(play==false){
        setTimeout(changeColor,1000);    
        }
    }
    }
        
  }

#rectanglearea {
    width: 700px;
    height: 500px;
    border: 2px solid black;
    position: relative;
}

.rectangle {
    width: 50px;
    height: 50px;
    border: 2px solid black;
    position: absolute;
    
}

.rectangle{
    transform: translate(0, 10px);
 }
 
 @keyframes shake-rectangle{
   0% { transform: translate(-1px, 9px); }
   33% { transform: translate(-1px, 11px); }
   66% { transform: translate(1px, 11px); }
   100% { transform: translate(1px, 9px); }
 }
 
 .rectangle:hover {
   animation: shake-rectangle .16s infinite alternate;
 }

<!DOCTYPE html>
<html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Цветные прямоугольники</title>
        <link href="rect.css" type="text/css" rel="stylesheet" />
        <script src="rect.js" type="text/javascript"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript"></script>
    </head>

    <body>
        <div id="rectanglearea"></div>
        
        <div>
            <button id="start">Пуск!</button> <button id="stop">Стоп</button>
        </div>
    </body>
</html>

Как реализовать тряску элементов без использования анимации CSS. При помощи событий mouseover/mouseout? P.S. Качество кода оставляет желать лучшего, но всё же помогите только с реализацией функции.

Answer 1

Так что-ли?

Рандомная тряска элемента по оси X и Y только через JS, с возможностью менять диапазон тряски ...

const main = document.querySelector('.main');
const blocks = document.querySelectorAll('.block');

const mainW = main.offsetWidth;
const mainH = main.offsetHeight;

const triaskaX = 10;
const triaskaY = 20;

let elem = null;
let triaskaController = null;

for (elem of blocks) {

  elem.style.left = randomNumber(0, mainW - elem.offsetWidth - triaskaX) + 'px';
  elem.style.top = randomNumber(0, mainH - elem.offsetHeight - triaskaY) + 'px';

  elem.addEventListener('mouseover', (e) => {
    elem = e.target;
    triaskaController = setInterval(triaska, 10);
  })

  elem.addEventListener('mouseout', (e) => {
    elem.style.transform = null;
    clearInterval(triaskaController);
  })
}

function triaska() {
  elem.style.transform = `translate(
    ${randomNumber(-triaskaX, triaskaX)}px,
    ${randomNumber(-triaskaY, triaskaY)}px
  )`;
}

function randomNumber(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

body {
  margin: 0;
  width: 100%;
  min-height: 100vh;
}

.main {
  width: 100%;
  min-height: 100vh;
}

.block {
  width: 50px;
  height: 50px;
  transition: .1s;
  position: absolute;
  border: 2px solid #000;
}

<div class="main">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

БЛОГ НА HUSL

Как реализовать тряску элементов без css и jquey ui?

Ответы (1 шт):