javascript - document.createElement() style images does not work

Question

Check the code below. In the function called createElement I am taking random image from images array but the problem is I am getting single image animated.

My main goal is to make animation with random images from those 4 images, not single image like now. How can I fix that?

var maxElements = 20;
var duration = 4000;
var toAnimate = [];
var radius = window.innerWidth < window.innerHeight ? window.innerWidth : window.innerHeight;
var distance = radius / 4 <= 250 ? 250 : radius / 4;

//var images = ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C'];
var images = ['https://preview.ibb.co/gZfv09/img2.jpg', 'https://image.ibb.co/bDCBOU/img5.jpg', 'https://preview.ibb.co/gZfv09/img2.jpg', 'https://image.ibb.co/bDCBOU/img5.jpg'];

console.log(images);

var createElements = (function() {
  var fragment = document.createDocumentFragment();
  for (var i = 0; i < maxElements; i++) {
    var el = document.createElement('div');
    el.classList.add('particule');
    el.style.images = images[anime.random(0, 4)];
    toAnimate.push(el);
    fragment.appendChild(el);
  }
  document.body.appendChild(fragment);
})();

var animate = function(el, i) {
  var angle = Math.random() * Math.PI * 3;
  anime({
    targets: el,
    translateX: [0, Math.cos(angle) * distance],
    translateY: [0, Math.sin(angle) * distance],
    scale: [{
        value: [0, .1],
        duration: 4000,
        easing: 'easeOutBack'
      },
      {
        value: 0,
        duration: 4000,
        delay: duration - 8000,
        easing: 'easeInBack'
      }
    ],
    offset: (duration / maxElements) * i,
    duration: duration,
    easing: 'easeOutSine',
    loop: true
  });
}

toAnimate.forEach(animate);

.particule {
  position: absolute;
  top: 5%;
  left: 10%;
  width: 70rem;
  height: 70rem;
  margin: -.5rem 0 0 -.5rem;
  border: 1px solid currentColor;
  transform: scale(0);
  background-image: url('https://preview.ibb.co/gZfv09/img2.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>

<div class="particule">
  <img id="img-1" src="">
  <img id="img-2" src="">
</div>

标签： javascript

Answer 1

You are very close, you just need to set the backgroundImage property of styles.

I've updated the random selection part to avoid attempting to access indices of the images index which are not present.

var maxElements = 20;
var duration = 4000;
var toAnimate = [];
var radius = window.innerWidth < window.innerHeight ? window.innerWidth : window.innerHeight;
var distance = radius / 4 <= 250 ? 250 : radius / 4;

//var images = ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C'];
var images = ['https://preview.ibb.co/gZfv09/img2.jpg', 'https://image.ibb.co/bDCBOU/img5.jpg', 'https://preview.ibb.co/gZfv09/img2.jpg', 'https://image.ibb.co/bDCBOU/img5.jpg'];

console.log(images);

var createElements = (function() {
  var fragment = document.createDocumentFragment();
  for (var i = 0; i < maxElements; i++) {
    var el = document.createElement('div');
    el.classList.add('particule');
    
    var selectedImage = Math.floor(Math.random() * images.length); 
    
    el.style.backgroundImage = `url('${images[selectedImage]}')`; // template literal
    toAnimate.push(el);
    fragment.appendChild(el);
  }
  document.body.appendChild(fragment);
})();

var animate = function(el, i) {
  var angle = Math.random() * Math.PI * 3;
  anime({
    targets: el,
    translateX: [0, Math.cos(angle) * distance],
    translateY: [0, Math.sin(angle) * distance],
    scale: [{
        value: [0, .1],
        duration: 4000,
        easing: 'easeOutBack'
      },
      {
        value: 0,
        duration: 4000,
        delay: duration - 8000,
        easing: 'easeInBack'
      }
    ],
    offset: (duration / maxElements) * i,
    duration: duration,
    easing: 'easeOutSine',
    loop: true
  });
}

toAnimate.forEach(animate);

.particule {
  position: absolute;
  top: 5%;
  left: 10%;
  width: 70rem;
  height: 70rem;
  margin: -.5rem 0 0 -.5rem;
  border: 1px solid currentColor;
  transform: scale(0);
  background-image: url('https://preview.ibb.co/gZfv09/img2.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>

<div class="particule">
  <img id="img-1" src="">
  <img id="img-2" src="">
</div>