Как сделать так, чтобы изображение выпало с экрана?

Question

У меня есть этот код, позволяющий мне разместить случайное изображение рядом с курсором пользователя, используя javascript, и стилизовать его с помощью CSS. Я бы хотел, чтобы изображения падали со страницы через несколько секунд, моей первой мыслью было анимировать позицию, но, видимо, это невозможно?

Как мне этого добиться? Вот мой код javascript и CSS

Javascript

<script>

var myPix = new Array("/img/portfolio/30day.jpg", "/img/portfolio/animationposter.jpg","/img/portfolio/beetle.jpg","/img/portfolio/board.jpg","/img/portfolio/cyanotype.jpg","/img/portfolio/dissent.jpg")
document.addEventListener("click", showCoords);

function showCoords(event)
{

var randomNum = Math.floor(Math.random() * myPix.length);
var yourImage = document.createElement("img");
yourImage.src = myPix[randomNum] ;
yourImage.classList.add("mystyle");
yourImage.style.cssText = " width:360px;height:auto;position:fixed;top:" + event.clientY + "px;left:" + event.clientX + "px;";

document.body.appendChild(yourImage);
}
jQuery.fn.reverse = [].reverse;
</script>

CSS

.mystyle {
border-radius: 20px;
box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.1);
z-index: -2;
width: 360px;
height: auto;
position: fixed;


}

Answer 1

Сначала создайте массив изображений, чтобы вы могли легко получить доступ ко всем своим изображениям. Всякий раз, когда вы создаете изображение, поместите его sh в массив:

var images = [];
function showCoords(event)
{

var randomNum = Math.floor(Math.random() * myPix.length);
var yourImage = document.createElement("img");
yourImage.src = myPix[randomNum] ;
yourImage.classList.add("mystyle");
yourImage.style.cssText = " width:360px;height:auto;position:fixed;top:" + event.clientY + "px;left:" + event.clientX + "px;";
images.push([yourImage,0,0]); // this line is where we add the image. 
//In the same sub-array, put a number, 0, to store the image's age, and a velocity, 0, to make the physics look good. These will be used later.
document.body.appendChild(yourImage);
}

Чтобы анимировать ваши изображения, вам нужно настроить какой-то анимированный l oop и вызвать его в setInterval:

animate = function(){}
setInterval(animate,5); // choose whatever interval you want. Here, it is called every 5 milliseconds

Внутри функции анимации нам нужно добавить logi c, чтобы изменить положение каждого изображения:

animate = function(){
   for(image of images){ // loop over all elements of our array
      image[1] += 1; //increase the age
      if(image[1] > 400){ //if old enough, fall
         image[2] += 0.1; //accelerate, tweak this value to change how strong gravity is
         currentTop = parseFloat(image[0].style.top.replace("px","")); // get the current y position
         currentTop += image[2]; //move
         newTop = String(currentTop) + "px"; //change back to string
         image[0].style.top = newTop; //set the attribute

         if(newTop > document.documentElement.clientHeight){ //if off-screen, remove it
         document.body.removeChild(image[0]);
         images.splice(images.indexOf(image),1); //remove from array
         }
      }
   }
}

Теперь вам должно быть хорошо go . Я протестировал это в Chrome, и это сработало для простого случая, когда у меня было только одно изображение на экране; надеюсь, я не допустил никаких опечаток, написав это здесь. Чтобы изменить скорость, либо измените значение ускорения, либо измените время в setInterval. Надеюсь, это поможет!

Изменить: здесь - это рабочий jsFiddle. Мне пришлось использовать промежутки вместо изображений, потому что у меня нет ваших точных файлов изображений, но все остальное то же самое.