Is there an easier way to use one picture, but show it up on the website many times, with different positionings?

user_14422628 0
Viewed 40

All the code I have for now are down there, I'm a beginner in HTML

So, I want these so called "carrot" images to fall down, from the top of the website as a "loading animation", but the only way I've figured out so far, is to create Multiple versions of one image, and give them all a different ID, since I need every carrot to be in a different position on the X cordinate

I figured the way on how to give each picture the same animation though, and I have the animation done, I just need a way, to create all those images, without that much code, or that's the only way, while all the pictures, also need to be in a random position on the X cordinate, or anything you set it as.

This is my HTML part

   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS</title>
        <link rel="stylesheet" href="stylesheet.css">
    
    </head>
    <body>
        <div id="mainContainer">
            <img id="carrot" src="images/carrot.png" alt="">
            <img id="carrot1" src="images/carrot.png" alt="">
            <img id="carrot2" src="images/carrot.png" alt="">
            <img id="carrot3" src="images/carrot.png" alt="">
        </div>
    
    </body>
    </html>

CSS PART

#carrot {
  width: 56px;
  z-index: 0;
  position: relative;
  right: -10px;
  bottom: 0px;
  animation-name: fall;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
}
#carrot1 {
  width: 56px;
  z-index: 0;
  position: relative;
  right: -190px;
  bottom: 0px;
  animation-name: fall;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
}
#carrot2 {
  width: 56px;
  z-index: 0;
  position: relative;
  right: -290px;
  bottom: 0px;
  animation-name: fall;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
}
#carrot3 {
  width: 56px;
  z-index: 0;
  position: relative;
  right: -500px;
  bottom: 0px;
  animation-name: fall;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
}

@keyframes fall {
  0% { transform: translateY(0px); opacity: 1; }
  25% { opacity: 1; }
  50% { opacity: 0.8; }
  100% { transform: translateY(1400px); opacity: 0.3; }
}
html-helper optimization css html
2 Answers

You can utilize a class in CSS to assign things that are common amongst multiple elements. In this example I made a class falling. You can also use a background URL in CSS in that class which will be applied to all of the elements as well. And in this example I did just that and instead of using img in HTML I used div with a background image. I hope this answer's your question!

.falling {
  background: no-repeat url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimage.flaticon.com%2Ficons%2Fpng%2F512%2F591%2F591329.png&f=1&nofb=1") 50% / 100%;
  width: 56px;
  height: 56px;
  z-index: 0;
  position: relative;
  bottom: 0px;
  animation-name: fall;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
}

#carrot {
  right: -10px;
}

#carrot1 {
  right: -190px;
}

#carrot2 {
  right: -290px;
  }

#carrot3 {
  right: -500px;
}

@keyframes fall {
  0% { transform: translateY(0px); opacity: 1; }
  25% { opacity: 1; }
  50% { opacity: 0.8; }
  100% { transform: translateY(1400px); opacity: 0.3; }
}
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS</title>
        <link rel="stylesheet" href="stylesheet.css">
    
    </head>
    <body>
        <div id="mainContainer">
        <div id="carrot" class="falling"></div>
        <div id="carrot1" class="falling"></div>
        <div id="carrot2" class="falling"></div>
        <div id="carrot3" class="falling"></div>
        </div>
    
    </body>
    </html>

user_111111190

I can offer a solution for javascript. Used by createElement, assigning urls to the image and assigning a class. Note that the mainContainer is empty in the html structure initially.

Also, for each carrot, a .carrot:nth-child() pseudo-class was added to the css to assign a unique rule right.

var container = document.querySelector('#mainContainer'); 

for(var i = 0; i < 4; i++) { 
  var img = document.createElement('img'); 
  img.className = 'carrot';
  img.src = 'https://banner2.cleanpng.com/20180620/gl/kisspng-monument-valley-2-level-cheating-in-video-games-5b29fd2c754be5.5312592115294784444805.jpg';
  container.append(img);
}
.carrot {
  width: 56px;
  z-index: 0;
  position: relative;
  right: -10px;
  bottom: 0px;
  animation-name: fall;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
}

.carrot:nth-child(1) {
  right: -10px;
}

.carrot:nth-child(2) {
  right: -190px;
}

.carrot:nth-child(3) {
  right: -290px;
}

.carrot:nth-child(4) {
  right: -500px;
}

@keyframes fall {
  0% { transform: translateY(0px); opacity: 1; }
  25% { opacity: 1; }
  50% { opacity: 0.8; }
  100% { transform: translateY(1400px); opacity: 0.3; }
}
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS</title>
        <link rel="stylesheet" href="stylesheet.css">
    
    </head>
    <body>
        <div id="mainContainer">
         
        </div>
    
    </body>
    </html>

user_135734440
Related