Stacking images with Javascript and CSS

Question

I'm using vanilla JS and CSS. I would like to add a pancake (individual PNGs) on top of the previous pancake every time I click on the pancake button ().

However, I'd the pancake to stack on top of each other, instead of flying over the previous. I've tried to do negative margins for the img element in .css, as well as negative height for the
element in .css, but to no success. How can I achieve a neatly stacked pancake?

Current outcome of pancake stack

Desired Outcome

var count = 0;

var imageArray = [
  "img/pancake plate 1.png",
  "img/pancake straweberry 1.png",
  "img/pancake 1.png",
  "img/pancake 2.png",
  "img/pancake 3.png",
  "img/pancake 4.png"
]; // image array oragnised from bottom to top

function addPancake() {

  var pancakeImage = document.createElement("img"); // create the <img> tag
  pancakeImage.setAttribute("src", imageArray[count]); // insert img src="current item" as <img> src
  var insertArea = document.getElementById("pancake-area"); // specify pancake-area <div>

  insertArea.insertBefore(document.createElement("br"), insertArea.childNodes[0]); // add <br> before every new image to show the "stacking" effect
  insertArea.insertBefore(pancakeImage, insertArea.childNodes[0]); // add pancake image before the previous image
  count++;
};

* {
  background-color: beige;
  font-size: 50px;
}

button {
  font-size: 200px;
  margin-left: 25vw;
}

#pancake-area {
  margin-left: 140px;
}

img {
  width: 200px;
  position: relative;
}

<div id="pancake-area">
</div>

<button onclick="addPancake()"></button>

can you upload the images online so we can actually see the image as well as use them in the snippet — xGeo, Jan 26 '22 at 09:29
You can do this easily with flexbox. A negative margin and `column-reverse` is what you need: https://jsfiddle.net/fqs8u1cn/ Assign a random pancake image src to add variation. — , Jan 26 '22 at 09:36
@ChrisG the pancakes are stacking downwards, and the pancakes seem to lose its transparent background when overlapping with each other. I've tried to run the script with transparent backgrounds but they overlap with a background colour. Any ways to fix this? — WanderingDoge, Jan 27 '22 at 01:21
...what do you mean, they're stacking downwards? The visuals you're probably referring to are both due to me working with your screenshot, as opposed to the real PNGs. Give me a few minutes and I'll use the actual graphics. — , Jan 27 '22 at 08:50
@ChrisG an additional question - do you know if there is a way (such as using Javascript) to resize the entire pancake stack so that it can shrink automatically to fit the size of the web page without scrolling? I.e. once the pancake stack's height exceeds that over the screen, is there a way to shrink the entire pancake stack so that it always fits the size of the screen? — WanderingDoge, Jan 27 '22 at 13:34
Yes, after adding the pancake, calculate the total height and the available height, and if the former exceeds the latter, use CSS: `insertArea.style.transform = scale(...);` — , Jan 28 '22 at 10:50

Fabian S. · Answer 1 · 2022-01-26T09:56:36.627

To get the images in reversed order add display: flex; and flex-direction: column-reverse; to the #pancake-area wrapper. This also removed the need of adding the <br/> tags via javascript, so you can drop that.

To get the overlapping add a negative margin-bottom (e.g -50px but you can adjust that number to your needs). This will make the images overlap from top to bottom.

Note: I added a fixed height and a border to make them visible in the example as the image paths are broken. You can drop that cause i suppose the image paths are working for you.

var count = 0;

var imageArray = [
  "img/pancake plate 1.png",
  "img/pancake straweberry 1.png",
  "img/pancake 1.png",
  "img/pancake 2.png",
  "img/pancake 3.png",
  "img/pancake 4.png"
]; // image array oragnised from bottom to top

function addPancake() {

  var pancakeImage = document.createElement("img"); // create the <img> tag
  pancakeImage.setAttribute("src", imageArray[count]); // insert img src="current item" as <img> src
  var insertArea = document.getElementById("pancake-area"); // specify pancake-area <div>
  insertArea.insertBefore(pancakeImage, insertArea.childNodes[0]); // add pancake image before the previous image
  count++;
};

* {
  background-color: beige;
  font-size: 50px;
}

button {
  font-size: 200px;
  margin-left: 25vw;
}

#pancake-area {
  margin-left: 140px;
  display: flex;
  flex-direction: column-reverse;
}

img {
  width: 200px;
  position: relative;
  margin-bottom: -50px;
  /* just for debugging cause image paths are broken: */
  height: 100px;
  border: 1px dotted red;
}

<div id="pancake-area">
</div>

<button onclick="addPancake()"></button>

Thanks a lot! Will go stack the pancakes. – WanderingDoge Jan 26 '22 at 10:31 — WanderingDoge, Jan 26 '22 at 10:31
@WanderingDoge sounds tasty! – Fabian S. Jan 26 '22 at 10:57 — Fabian S., Jan 26 '22 at 10:57

Stacking images with Javascript and CSS

1 Answers1