HTML5 Tips: Design a Dynamic Homepage with Animated Galleries

January 24th 2013 | Designing with Wix

A few days ago we came across a really outstanding Wix website for the Los Angeles based vaudeville circus/theater, Le Tigre Tent.  One thing that really impressed us about their website was their use of an animated grid gallery in the homepage, which made the whole site look more alive, more fun and more in-your-face.

Design a Dynamic Homepage with Animated Gallerie

Le Tigre Tent

This is a feature not many Wix users are aware of, yet it is so easy to do. We wanted to show you how you can add a similar animated gallery to your website with a few simple steps. You can add this gallery to every page on your site, but on the homepage it creates a really powerful effect of wowing site visitors when they just enter the site.

For illustration purposes, we’re using the “Close Up HTML” template, but this works with all Wix HTML5 templates, of course!

Design a Dynamic Homepage with Animated Gallerie

  • Select the area in your homepage where you wish to place the gallery and clear it of any other items.
  • Add a box to give your gallery a frame and more depth. Click “Add” > “Shapes & Lines” and choose “Box”.
Design a Dynamic Homepage with Animated Gallerie
  • Stretch the box to cover the entire area meant for the gallery.
  • Click on the box and then “Change Style” to customize – add colors, shadows, etc.
Design a Dynamic Homepage with Animated Gallerie
  • Now let’s add the gallery. Click “Add”> “Gallery” and choose “Animated Grid”.
Design a Dynamic Homepage with Animated Gallerie
  • Stretch the gallery to cover the area of the box.
  • To customize the gallery, click on it and choose “Settings”.
  • Change the number of rows and columns to fit your needs.
  • Change the margins from 0 to about 10 to get a more spacious look.
  • Under “Transitions”, choose “Vertical”.
Design a Dynamic Homepage with Animated Gallerie
  • Change the duration according to your needs (5 is slowest)
  • We recommend not to choose the “Show Autoplay Button” and the the “Show Navigation Buttons” options.
  • Under “When clicking on image”, choose the behavior you want (“Enter expand mode” is our preference).
Design a Dynamic Homepage with Animated Gallerie
  • Click “Change Style” to customize the gallery’s design: background, mouseover text, etc.

Design a Dynamic Homepage with Animated Gallerie

  • Now return to the gallery, click on it and choose “Organize Images”.
Design a Dynamic Homepage with Animated Gallerie
  • Click “Add Images” and choose either images from your library, from the Wix Free Images library or from your computer.

Design a Dynamic Homepage with Animated Gallerie

  • You can give your photos a title and a description, and use the arrows on the left to change the image order.
  • The number of photos you need to add in order to make the most out of this animated gallery depends on the number of columns and rows you have. If you have 3 rows and 3 columns, you need at least 27 images to make your gallery really diverse.
  • Now with all the images ready, click “Save” and “Preview” to check if everything is just as you want it. You can change the movement speed, expand the margins or play with the image order.

 

Design a Dynamic Homepage with Animated Gallerie