Affinity Mobius Animated BannerAdd an Animated Banner to your Mobius Page with IGM2

Add an animated banner to your Mobius page in just a few minutes!

Finished Example...

View the finished example page and then return here to learn how you can make your banner come to life.

This tutorial will show you how to add a banner to your Mobius page and animate it using IGM2.

Required for this tutorial

This tutorial requires PVII Affinity, the Affinity Mobius theme pack, and IGM2

To make the tutorial easier, we've prepared a zip file of 4 images that you can use for practice:

Download the images

Unzip the images and place them inside the art folder of your Affinity site.

Insert the Gallery

Open your Mobius page and switch to Code View. Locate the content DIV:

<div id="content">

Make a new line below it:

<div id="content">
new line - place cursor here

Open the IGM2 interface.

Set Thumbnails, Caption, and Description to None.

Set animation to Ken Burns and deselect (un-check) Auto Set Ken Burns.

Click the Browse... button to the right of the Image Path box and browse to your art folder.

Select surreal-1.jpg as your first image.

Click the Add button and add the remaining 4 surreal images as depicted in the screen capture below.

Select each image in your list and set its Ken Burns Start/Finish parameters as follows:

Start: Vertical:   Center Horizontal: Center Zoom: 1.1 Duration: 8 (seconds)
Finish: Vertical: Center Horizontal: Center Zoom: 1.5

Start: Vertical:   Center Horizontal: Right Zoom: 1.4 Duration: 8 (seconds)
Finish: Vertical: Center Horizontal: Center Zoom: 1

Start: Vertical:   Center Horizontal: Center Zoom: 1.1 Duration: 8 (seconds)
Finish: Vertical: Center Horizontal: Center Zoom: 1.5

Start: Vertical:   Center Horizontal: Left Zoom: 1.5 Duration: 8 (seconds)
Finish: Vertical: Top Horizontal: Center Zoom: 1

Start: Vertical:   Center Horizontal: Right Zoom: 1.45 Duration: 8 (seconds)
Finish: Vertical: Center Horizontal: Center Zoom: 1.1

 

Click the Next: General Gallery Options button

Leaving all other options set to their default values, set Paginator to Below Image with a Pause/Play Control only.

Set Show Initial Image and Pause Time to 7800 (ms).

Set Style Theme to 03-Style Three

Click OK.

CSS Edits

Remove the border from around your gallery

In your p7IGM03.css file, locate the .p7IGM03_FSwrapper rule and delete the border property:

.p7IGM03_FSwrapper {
position: relative;
padding: 0px;
overflow: hidden;
border: 1px solid;
}

Float the Paginator bar over your gallery

Let's use CSS to position the Paginator bar absolutely, give it some transparancy, assign rounded corners, and indent it to follow the Mobius design language.

In your p7IGM03.css file, locate the .p7IGM03-paginator.IGMpaginator-pags-top rule and add background-color, background, position, top, left, width, border-radius, and box-shadow declarations as shown in red below:

.p7IGM03-paginator.IGMpaginator-pags-top {
padding: 10px 0px;
background-color: rgb(20,20,20);
background: rgba(20,20,20,.7);
position: absolute;
top: 0px;
left: 5%;
width: 90%;
border-radius: 0px 0px 8px 8px;
box-shadow: 0px 0px 30px rgba(0,0,0,.8);
}

Change the Paginator down state to teal

The Paginator circles are background images. We'll change the image to a teal one.

In your p7IGM03.css file, locate the .p7IGM03-paginator a.pags-down rule and change the background image to p7IGM-pagsdown-white.png:

.p7IGM03-paginator a.pags-down {
cursor: default;
background-image: url(img/p7IGM-pagsdown-white.png);
background-repeat: no-repeat;
}

Set the gallery image vertical alignment

If you are using an HTML5 or a strict DOCTYPE, browsers will render a tad of white space below your image. This edit prevents that.

In your p7IGM03.css file, locate the .p7IGM03 .p7IGM-canvas rule and add a vertical-align property set to bottom:

.p7IGM03 .p7IGM-canvas {
background-color: transparent;
vertical-align: bottom;
}

Save your files and pat yourself on the back. You are finished!

About Affinity Mobius

A Groundbreaking Addition to your Affinity Toolbox

Mobius Theme Home Page | Mobius Examples | Buy Mobius Now ($45)

Affinity Mobius extends the scope of your Affinity layout choices to include designs suitable for a corporation or professional firm that wants to present a serious image without sacrificing design. Like all Affinity designs, Mobius is mobile-ready and responsive. Mobius comes with a fully commented CSS file to assist you in customizations. Of course, PVII support is always ready to help you whenever needed. Mobius also comes with a suite of custom Dreamweaver Snippets that enable you to customize the row and column configuration of your pages.