Compatibility:

WebSite X5 Evo and Pro

The basic concept is easy: galleries are the best ways of displaying images. However, there are many different ways of doing this, and the results can be very diverse.


With the Scroll Gallery Ver Object, setting up a gallery is really easy, and the result looks pretty catchy: images are displayed vertically, and they move to gradually overlap on top of each other when scrolling down the page. Check out this unique effect on this Preview page.



How this gallery works

To get the most out of this kind of gallery, you first have to understand how it works.


Let's assume you need to add 5 images to the gallery. The first image displayed when you start scrolling down the page is image 1: this image follows the page scroll until it reaches the distance from the top of the browser window you defined with the Top Margin property.


At this point, image 1 stops and stays visible, but as soon as you keep scrolling down, image 2 appears and starts overlapping image 1.


Image 2 will eventually completely overlap and substitute image 1. This will happen as soon as image 3 overlaps the first half of image 2 itself.


And so on up until all the images have been displayed. Of course, if you scroll up the page, the images will move in the opposite direction, gradually displaying those below. 


#tip - Use images of the same size for your gallery, so to make them perfectly overlap on top of each other.


How to set up the image list

  • Double-click the Scroll Gallery Ver you added on the page to open the settings window.
  • Click on Add so to open the File Selection window and import the image file you want to use. 
  • Repeat these steps to add all the images you need.
  • If necessary, use the Remove button to remove the selected file from the list, and the Move up and Move down buttons to change the file order.


How to define the graphic style

  • On the Scroll Gallery Ver window, you will find all the option you need to define the style of your images. The first thing you have to do is to set the Size of your images and possibly activate the Adjust size option: in this way, all the images will take on the same size and proportions. 
  • You can improve your images by working on the Rounded Corners. 
  • Now you have to work on the Top Margin: with this property, you can define the distance from the top of the browser window where the images need to stop and start overlapping.
  • The Margin option defines on the other hand the space between the images of the gallery themselves.
  • You can finally choose the Effect to be displayed when images appear/disappear during the page scroll. For the rotation effects, you can possibly activate the Random Rotation option: set a random end point for the images to overlap as if they were Polaroids scattered on the table.


Are you curious to use this Object on your website pages? Install Scroll Gallery Ver now


You don't have enough Credits to buy this Object? Check out all the Credit packs