Как я могу сделать эту анимацию отзывчивой? - PullRequest
Новая
       43

Как я могу сделать эту анимацию отзывчивой?

0 голосов
/ 28 апреля 2019

Hy, Прежде всего, я новичок в программировании и на этом сайте, поэтому, пожалуйста, не атакуйте меня:)

Итак, я только что начал новый проект (Gambling site with steamданные входа) Сайт содержит четыре «игры» (Crash, Dice, Roulete, Trade up).Сейчас я работаю над рулеткой, и мне нужно было обратиться за помощью.Я нашел код по этому поводу, и я изменил его, чтобы работать "отлично".Я посмотрел страницу на своем мобильном телефоне, и она не работала хорошо, после первого вращения она пошла назад и анимация полностью потерпела крах (переместилась примерно на 3 цифры и т. Д.).Я попытался с css (background-size: cover), но он перепутался с пикселями и не вращался к правильному числу.Я хотел бы, чтобы этот код вычислял ширину фона измененной страницы и прокручивал ее до идеального числа.

Спасибо за помощь.

Вот код: 

--JS--

    var socket = io.connect("http://94.248.229.179:3000");
    var button = $('.button');
    var items = $('.items');
    var coin_width = 75;
    var numbers = {
      0: 525,
      1: 0,
      2: 150,
      3: 300,
      4: 450,
      5: 675,
      6: 825,
      7: 975,
      8: 1050,
      9: 900,
      10: 750,
      11: 600,
      12: 375,
      13: 225,
      14: 75
    };

        socket.on("roulettenumber", function(data){
      var number = data.roulettenumber;
      var cycles = Math.floor(getRandomArbitrary(2, 8));
      var dev = getRandomArbitrary(0, 72);
      var scroll_amount = ((825 + numbers[number]) + dev) + (1125 * cycles);
      items.removeClass("spin_animation");
      items.css({"background-position-x": "-262.5px"});
      setTimeout(function(){
          items.addClass("spin_animation");
          items.css({"background-position": "-" + scroll_amount + "px"});
        console.log("W: " + number + " SA: " + scroll_amount + " D: " + dev + " C: " + cycles);
      }, 10);
        });

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

--CSS--

    .wrapper {
      overflow: hidden;
      width: 600px;
    }

    .items {
      background-image: url("../img/roulette.png");
        position: relative;
        width: 1125px;
        height: 75px;
    }

    .items:before {
        content: "";
        position: absolute;
        background: #ffd02d;
        height: 100%;
        width: 3px;
        margin: 0 auto;
        left: 0;
        right: 0;
    }

    .spin_animation {
            transition-timing-function: cubic-bezier(0.34, 0.87, 0.52, 1); /* custom */
                transition-duration: 6.79891s;
    }

--HTML--
    <div class="wrapper">
      <button class="button">Spin</button>
      <div class="items"></div>
    </div>

1 Ответ

0 голосов
/ 28 апреля 2019

Что-то выглядит странно в вашем CSS-коде, ширина обертки больше, чем у дочерних элементов, вам, вероятно, нужно сначала это исправить.

Что касается отзывчивости вашей страницы, у вас есть только 2 элементакоторый больше ширины экрана (.wrapper & .items), этот медиа-запрос внизу файла css должен выполнить эту работу: 

@media only screen and (max-width : 1024px) {
  .wrapper {
    width: 100%;
  }
  .items {
    width: 100%;
  }
}

Не забудьте добавить в раздел headВаш HTML-файл этот метатег: 

<meta name="viewport" content="width=device-width, initial-scale=1.0">
...