Форум

Retro_1477 · #1 (**permalink**) 24.07.2018, 08:18

Здравствуйте, у меня есть теги i которые создаёт скрипт. Нужно сделать так, чтобы эти иконки перемещались с левой части экрана до правой постоянно. При этом иконки начинают движение за экраном и заходят за экран, и если можно сделать перемещение сразу при загрузке.

<div class="field container-fluid"></div>

$(document).ready(function($) {
  var $BodyWidth, BodyHeight,
  instagram_count = 3;

  BodyHeight = $(".field").height(); //измерение высоты
  BodyWidth = $(".field").width();//измерение ширины

 //Спаун ИКОНОК
  for (var i = 0; i < instagram_count; i++) {
    var ICON = $("<i class='bg-icon'>Inst</i>").appendTo(".container-fluid") 
        .addClass('inst'+i);//присвоение индивидуального класса 
        ICON.css('top:0');
        var transform = 'translate( 0px, ' +  getRandom(BodyHeight)  + 'px)' 
        ICON.css('transform', transform);
  }

//Перемещение иконок
  setInterval (function(){
    for (var i = 0; i < instagram_count; i++){
    $('.inst'+i).css({ 
  'transform' : 'translate('+ getRandom(BodyWidth) +'px, '+ getRandom(BodyHeight) +'px)' //присваиваются новые координаты для перемещения
});
}
  }, 5000); 

});

//Функция для рандомного числа
function getRandom(upper) {
  return Math.random() * upper;
}

рони · #2 (**permalink**) 24.07.2018, 11:13

Retro_1477,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css"> .field{
      height: 300px;
      position: relative;
      overflow: hidden;
  }
  .bg-icon{
      position: absolute;
      transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
      height: 50px;
      width: 50px;
      background-color: #228B22;
      color: #FFFFFF;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(document).ready(function($) {
    var $BodyWidth, BodyHeight, instagram_count = 30;
    BodyHeight = $(".field").height();
    BodyWidth = $(".field").width();
    for (var i = 0; i < instagram_count; i++) {
        $("<i class='bg-icon'>Inst</i>")
        .appendTo(".container-fluid")
        .on("transitionend", move)
        .trigger("transitionend")
    }

    function move() {
        var h = getRandom(BodyHeight - 70);
        this.style.transition = "none";
        this.style.transform = "translate( -70px, " + h + "px)";
        var that = this;
        window.setTimeout(function() {
            that.style.transition = getRandom(5000) + 3000 + "ms";
            that.style.transform = "translate( " + (BodyWidth + 70) + "px, " + h + "px)"
        }, getRandom(3000))
    }

    function getRandom(upper) {
        return Math.random() * upper | 0
    }
});
  </script>
</head>

<body>
<div class="field container-fluid"></div>
</body>
</html>

Retro_1477 · #3 (**permalink**) 24.07.2018, 11:56

ууууу
Спасибо большое)

рони · #4 (**permalink**) 24.07.2018, 12:46

Retro_1477,
немного изменил параметры строка 14 и 44

Форум

Справочник

Discord чат

Курсы javascript