We all want to have a nice looking animated banner on our home page. Well DnnGO.LayerGallery is a great tool, but I always had issues getting the animation and tranpsarent background into the Image. So here is how I created the effect below.

- Add a DnnGoLayerGallery to a full width pane on your website
- Add a new slide, and select your background image at 2000 x 480 in size and aligned Left. The left is important because that sets the co-ordinate reference system for the slide, so the settings below would need to be adjusted if you use a differetn alignment.
- Edit the settings to get the effects you like, I prefer no Ken burns effects and 'Fade' transition
- Create four layers at the bottom of the screen. Background, Title, Content and Link
- Edit the settings as per the table below. It is important to note that when you're trying to set the background colour you're setting it with an Alpha channel 'rgba(0,0,0,0.4)' this means 'Black' with a transparency of 40%, so you can play with this and have a blue background for example rgba(0,0,255,0.4). The thing with LayerGaller si that if you tab out of this field it will reset the cvalue to an RGB value. This is a bug I think, so what you have to do is type in the value, and then click in another field. This works most fo the time, but it is a pain. If it doesn't work first up then just try a few time.
And Ta da, you're done. If you want more slides make sure you use the 'Copy' link at the top right of the screen. This will save you a heap of time.
Setting |
Background |
Title |
Content |
Link |
Content |
- |
Your Title |
Your Content |
Your Link |
Data Settings - data-x |
0 |
25 |
25 |
25 |
Data Settings - data-y |
50 |
55 |
145 |
250 |
Data Settings - data-start |
1000 |
1500 |
2000 |
2500 |
Data Settings - data-easing |
easeOutExpo |
easeOutExpo |
easeOutExpo |
easeOutExpo |
Styles - Width |
700px |
- |
- |
- |
Styles - Height |
300px |
- |
- |
- |
Styles - Top |
50px |
- |
- |
- |
Styles - Left |
50px |
- |
- |
- |
Styles - Padding Top |
25px |
- |
- |
- |
Styles - Padding Right |
25px |
- |
- |
- |
Styles - Padding Bottom |
25px |
- |
- |
- |
Styles - Padding Left |
25px |
- |
- |
- |
Styles - Backgound color |
rgba(0,0,0,0.4) |
- |
- |
- |
Styles - Rounded Corners |
7px |
- |
- |
- |
Attributes - Class |
- |
Banner_Title |
Banner_Content |
Banner_More |