Double text lines Banner templates

Adobe Edge animation


Banner animation sequence

Javascript variables explained

SVG files require proper web server MIME-type configuration


Animated HTML5 (Adobe Edge) Banner templates in 4 formats:

You can easily change:


Banner animation sequence

#1. Logo

For the support of high DPI displays, the logo is in SVG format, but you may replace it with any bitmap image (PNG, JPG or GIF).

#2. Looped texts

These texts (top and bottom) are defined with Javascript in the Array of variables named looped_texts. You may add/remove any number of Array elements as you need, in the templates 5 array elements are used:

#3. Call to action

After the so-called "Looped texts" animation ends, the final stage of the banner with call-to-action button appears:

After that the banner animation starts from beginning.

Javascript variables explained

default_font_size String

Default looped texts' font size. For example "28px". You may set different font sizes for individual texts in array looped_texts.

stage_color String

Banner (Stage) background color. For example "#34495e"

frame_color String

Frame of the banner. By default this variable equals to stage_color (the same color as banner background) so it's invisible. To use other color, change stage_color to the String with HEX color for example "#007bb4"

button_color String

Call to action button color. For example "#ef8e5b"

text_top String

The color of top looped texts. For example "#fff"

text_bottom String

The color of bottom looped texts. For example "#fc0"

url String

URL the browser opens after the click. For example: ""

target String

Target attribute specifies where to open the link. Values: "_blank", "_self", "_parent" or "_top"

looped_texts Array

Settings for individual looped texts:

SVG files require proper web server MIME-type configuration

If SVG files don't show up on web, the server doesn't serve MIME types for SVG files correctly. You should configure server appropriately. There are several ways to do it, depending upon the server type, and your access to server settings.

For example, in Apache server it's done by editing .htaccess configuration file that is hidden - make sure your FTP client shows hidden files. If your server does not have such a file, create a file and name it “.htaccess”, and associate the SVG file extensions with the correct MIME Type; if the file already exists, you can simply add the correct entries to it. The particular line you should add are:

AddType image/svg+xml svg

The .htaccess file should be placed in the directory that contains the SVG file, or any parent directory.

More on this subject: