Перемещение элементов
Здравствуйте, у меня есть теги 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;
}
|
перемещение иконок the river of the icons
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,
немного изменил параметры строка 14 и 44 |
| Часовой пояс GMT +3, время: 01:23. |