An interactive banner template for the Desktop Topscroll format, that allows for the easy creation of a “Prismo” creative. The template features three 3D prisms (each with three faces), that simultaneously rotate as the user moves their mouse across the screen (passive interaction). The overall effect allows for three distinct “Scenes”, each composed of one face of each prism. The prisms will automatically rotate every few seconds if no user interaction is detected.
Examples
Format Specs
Prism Backgrounds:
640x1080 - JPG, WEBP or MP4 - 9 background assets total.
Each face of each prism requires its own background asset. Backgrounds are scaled using the “cover” scaling mode, so may appear cropped at the edges - avoid placing important content near the edges of background assets, we recommend using overlays for adding essential elements like logos and CTAs.
Prism Overlays:
Up to 640x1080 (flexible) - PNG or WEBP with transparent background.
Overlays are optional, but recommended for adding key content on top of backgrounds. Overlays are scaled using the “contain” scaling mode, and so will never appear cropped. The overlays will be centred on top of their relevant background asset. For best results, export your overlay assets without any additional empty space, and use the settings within the template to set the width and height as a percentage of each face.
Background (optional):
1920x1080 - JPG or WEBP.
The background is an optional image, that appears behind the prisms. It is partially visible when the prisms rotate. It is purely an aesthetic element to set a mood or ambience, and as it is never fully visible, should not contain any branding or text.
Format description and guidance
If you are using a background image, upload it, otherwise you can choose a colour to appear behind the prisms. You can use any valid CSS background colour, such as a hexcode, rgba, or gradient (the default colour is a dark-grey gradient).
The overlay height and width should be a percentage, relative to the size of each prism face. The default is 80% width and 80% height, but if you would like your overlays to appear larger or smaller than this, you are free to modify these values as required. Overlays will always be centred within each prism face.
For each scene of your prismo, you should add a Click URL, and then a “Left”, “Middle” and “Right” background. These are the three images that will be visible together to form a “scene”, so the idea is that they work together to tell a cohesive story about a specific product or service. To each background, you can also add an overlay, which should be used for any static brand elements (such as logos, CTA, headlines etc) that you want to always be fully visible.
Keep in mind that as the prisms rotate in relation to the position of the mouse cursor, only one prism is physically clickable for each scene. Scene 1 is visible when the mouse is over the left prism. Scene 2 is shown when the mouse moves over the middle prism. Scene 3 is shown when the mouse is over the right prism. For best results, only add CTAs to the clickable prism for each scene, as otherwise users may be confused by buttons that are impossible to click.
Max total file weight:
3.5 MB
Audio
No