Random Distribution of images on web page
I am trying to create a website that loads random images from a folder through a json file, place the images with random size on a randomly position on the website and load more when scrolling...i have a prototype, the raw version is working but there's issue with the random distribution and the loading while scrolling, also the images are heavily overlapping. I am making 10 images to show initially and rest on scroll but all 10 images get stack on each other and there is no scroll so can't achieve the infinite scroll thing as well.
I want something similar to this website https://www.steigerconcept.ch/
I don't need the parallax effect and rounded images
is this something you guys can help? I will appreciate it
4 Replies
Well, this has been done using layers
He has used figure tag to do the animation
Look the positioning is absolute, and the left, top, margin values are randomized. Also the data rellax speed changes the scroll speed
I suspect heavy use of JavaScript random here as they loop thought the images :
- Random order
- Random width (no height to maintain the aspect ratio)
- Random left position,probably with a range limit base on the width to ensure that the image doesn’t overflow to the right I have just realized that the images do overflow.
- Random top position with some sort of control to ensure that the images are distributed through the height of the document.
- random shape between “circle” and “non-circle” but with some sort of limit so that there aren’t too many circles.
Looking at the JS on the desktop - they are loading the images in 10 at a time on scroll