Как создать эффект дождя, который вызывается событием? - PullRequest
Новая
       7

Как создать эффект дождя, который вызывается событием?

2 голосов
/ 05 мая 2019

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

В настоящее время я добавляю div и анимирую эффект падения, но каждый дополнительный триггер события добавляется ниже / рядом с первым. 

function appendImage() {
  var img = document.createElement('img');
  img.setAttribute('src', 'http://pixelartmaker.com/art/3ba7f5717ac3c63.png');
  $('#action').append(img);
}
@keyframes slidedown {
  0% {
    margin-top: 0%;
  }
  100% {
    margin-top: 150%;
  }
}

img {
  animation-duration: 20s;
  animation-name: slidedown;
  height: 100px;
  width: 100px;
}
<input type="button" value="Test Button" onclick="appendImage();" />
<div id="action"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

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

codepen здесь.

1 Ответ

1 голос
/ 05 мая 2019

Вы можете использовать фиксированную позицию , чтобы элементы могли перемещаться независимо по области просмотра - теперь вы можете использовать top значение для вашей анимации и влево случайным образом распределить его по горизонтали.

Также обратите внимание на использование animation-fill-mode: forwards, которое гарантирует, что после анимации изображение не вернется в верхнюю часть окна.

См. Демонстрацию ниже и updated codepen here: 

var rainDiv = document.querySelector('#action');
function appendImage() {
  var img = document.createElement('img');
  img.setAttribute('src', 'http://pixelartmaker.com/art/3ba7f5717ac3c63.png');
  img.style.left = Math.floor(Math.random() * 100) + 'vw';
  rainDiv.appendChild(img);
}
img {
  position: fixed;
  animation-duration: 20s;
  animation-name: slidedown;
  animation-fill-mode: forwards;
  height: 100px;
  width: 100px;
  top: 0;
}

@keyframes slidedown {
  to {
    top: 120%;
  }
}
<input type="button" value="Test Button" onclick="appendImage();" />
<div id="action"></div>
...