Colocando imagens aleatórias no fundo de uma página WEB

Enviado por mrab em 24. Janeiro 2024 - 9:09

Explore uma experiência visual única com este código HTML, CSS e JavaScript que traz à vida uma animação de ícones dinâmica. Nesta página web, imagens se posicionam de maneira aleatória. Descubra como o código combina estilos visuais modernos, posicionamento dinâmico cria uma composição estética e interativa. Insira este código em seu projeto para adicionar um toque visualmente cativante à sua página web. Assista ao vídeo para entender como este código funciona e como você pode incorporá-lo em seus próprios projetos web

Faça o Download do código

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
{
  font-size:2em;
  background: #000;
  color:#fff;
}

p
{
  padding:10px 50px 0px 50px;
  text-align: center;

}

.image {
  width: 170px;
  height: 170px;
  margin-bottom: 10px;
  margin-left: -170px;
  display: block;
  position: absolute;
  z-index: -1;
  opacity: 0.1;
  filter: invert(100%);
  
}

</style>
 
</head>
  <body>
<p>Este código HTML, CSS e JavaScript cria uma <br>
visualização atrativa que a images são carregadas</br>
aletoriamente em uma página web.</p>
 </body>
      <script>
    document.addEventListener('DOMContentLoaded', function () {
      // Função para embaralhar o array
      function shuffleArray(array) {
        for (var i = array.length - 1; i > 0; i--) {
          var j = Math.floor(Math.random() * (i + 1));
          var temp = array[i];
          array[i] = array[j];
          array[j] = temp;
        }
      }

// Array com as URLs das imagens
      var imageUrls = [
        "icones-01",
        "icones-02",
        "icones-03",
        "icones-04",
        "icones-05"
               
      ];

// Embaralhar o array de URLs
      shuffleArray(imageUrls);

// Container das imagens
      var imageContainer = document.querySelector("body");

// Altura do elemento main
      var mainHeight = imageContainer.clientHeight;

// Adicionar as imagens ao longo da altura
      var imageHeight = 100; // Altura máxima de cada imagem
      var numberOfImages = Math.ceil(mainHeight / imageHeight);

for (var i = 0; i < numberOfImages; i++) {
        var imageUrl = imageUrls[i % imageUrls.length];

var span = document.createElement("span");
        span.className = "image";

span.style.left = (Math.random() * 90 ) + "vw"; // Posição horizontal aleatória
        span.style.top = (i*1.2 * imageHeight) + "px"; // Posição vertical ao longo da altura

var img = document.createElement("img");
        img.src = "" + imageUrl + ".png";

span.appendChild(img);

imageContainer.appendChild(span);
      }
    });
  </script>
  </html>

xxxxxxxxxx
 
​
<!DOCTYPE h

Seção:

HTML/CSS