Canopi Forums
PrevPrev Go to previous topic
NextNext Go to next topic
Last Post 28 Oct 2018 12:39 PM by
Create an Animated Banner image using DnnGo.LayerGallery
�0 Replies
You are not authorized to post a reply.
Author Messages

New Member

New Member

28 Oct 2018 12:39 PM

    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.



    1. Add a DnnGoLayerGallery to a full width pane on your website
    2. 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.
    3. Edit the settings to get the effects you like, I prefer no Ken burns effects and 'Fade' transition
    4. Create four layers at the bottom of the screen. Background, Title, Content and Link
    5. 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




    You are not authorized to post a reply.