The Splashscreen
The splashscreen is a preliminary screen that appears before a virtual tour fully loads. It is primarily used to provide visual feedback during loading, display branding (like logos), or, most importantly, to require user interaction to enable audio playback in modern browsers.
In Opus, splashscreens come under two different variations: Node and Image
Version A: Node
Node, as the name implies displays the first panoramic node in the virtual tour. A number of different elements can be layered above the node including;
Logo (jpg, png or svg)
Heading/Title
Description
Alt Description (smartphones)
Start Button (with Text)
Language Buttons
Top/Bottom Gradations
CSS Filters (Blur, Saturation, Tint)
Version A: node with CSS filter “blur”
iPad Pro 13-inch
iPhone 17 Pro - Showing alt text
Visibility and attributes of the elements and effects, except the Enter button, are optional and managed via the Edit Skin Configuration window.
Edit Skin Configuration: Splash Screen
iPhone 17 Pro - Landscape
Edit Skin Configuration: Mobile Landscape
Version B: Fullscreen Image
This version displays a fullscreen image as the background. Overlayed over the panorama are CSS top and bottom gradations, and on top of that is the title, description, enter button, logo and language buttons.
Version B Desktop with Full screen image
iPad Pro 13-inch
iPhone 17 Pro
Version B: Fullscreen Image Edit Skin Configuration Splash Screen settings
iPhone 17 Pro (Mobile Landscape)
Version B: Fullscreen Image Edit Skin Configuration Mobile Landscape settings
Version B: Video
This version displays a fullscreen video as the background. Overlayed over the panorama are CSS top and bottom gradations, and on top of that is the title, description, enter button, logo and language buttons.
Version B Desktop with Full screen Video
iPad Pro
iPhone 17 Pro
ESC CSS Filters
iPhone 17 Pro (Mobile Landscape)
Splash Screens in Action: Video
This is a short video showing the Version A: Node, Version B: Fullscreen Image and Fullscreen Video.
CSS Filters: Saturation
The Saturation CSS filter controls the intensity of the colors in your panorama or background image.
Version A Desktop with Saturation Value = 5
The Version A Splashscreen samples below demonstrate the value of Saturation from 0 to 5
Note: to more clearly show the Saturation effect I’ve applied the change only to the left 50% of the browser viewport.
Splashscren Saturation = 0
Splashscren Saturation = 3
Splashscren Saturation = 1
Splashscren Saturation = 4
Splashscren Saturation = 2 (normal)
Splashscren Saturation = 5
CSS Filters: Blur
Samples coming soon
CSS Filters: Tint
Samples coming soon