SPLASHSCREEN VARIATIONS

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