The fluid scrolling skin template can be used for one or both of the side panels of a fluid skin. It uses three sets of image/video backgrounds and overlays, to create responsive side panels that transition as you scroll down the page.
For more information please see our Guide to Skins, which covers:
- The key differences between our Seamless Skin & Fluid Skin formats
- The basics for designing assets for using within the our skin templates
- Tips and best practice for using overlays
Examples
Format Specs
Backgrounds (x3):
- Video - 1080x1920px (9:16) MP4 (Optimised for web)
OR - Image - 800x1440px JPG
Overlays (x3):
- Up to 800x1440px (PNG with transparency), for best results avoid exporting overlay assets with any excess white space, and instead set the size and position within the template.
Note: You are free to use any combination you like of images & videos as backgrounds, provided the total file weight of all assets within the skin does not exceed 3.5MB.
Format description and guidance
The template requires three sets of assets, each consisting of a background, and overlay, and a click URL.
Backgrounds use the “cover” scaling mode by default, so be aware that the edges may appear cropped for different screen sizes and resolutions. You can set the anchor point of the background via background position - this is the transformation point around which the assets will be scaled, and it will be the part of the assets guaranteed to be in view, so make sure to set it to an appropriate value for your specific assets. Be aware that the same settings will be applied to all 3 backgrounds, so design your assets with this in mind.
Overlays appear on top of the background assets, and should be used for essential static brand elements (eg logos, messaging, CTA etc). The overlays use the “contain” CSS behaviour, so will never be cropped. The width and height of the overlays are flexible, you can define a percentage of the total side-panel width/height the overlays should occupy, as well as define minimum and maximum widths (in pixels) to constrain their scaling if you so desire.
You can also set how the overlays are positioned within the skin side-panels. By default they are centered, however you can choose which side or corner they should be anchored to, as well as offset the position on the X or Y axis (custom X/Y position). Custom position offsets will be added to whichever side the asset is positioned from, eg if an overlay is positioned at the bottom, an Overlay Custom Y Position of 10px will set the overlay to be 10px from the bottom of the skin. You can use any valid css unit eg 250px, 50%, 20vh etc.
For best results, export the overlay PNG assets without any excess empty space - this allows the template to handle the overlay scaling and placement more effectively.
Max duration
Autoplaying videos should not exceed 30 seconds in duration.
Click URL
The template supports three separate click URLs (you can also use the same URL across all three).
Max total file weight
Combined file weight of all assets within the entire skin (2 side panels + top banner) must be under 3.5MB.
Audio
Not supported