This page helps you add a slide to the current slideshow. The fields and features of this page are described below:
Fields with * are required.
Going back to the previous page.
A regular title for this slide. Remember that what visitors see as the navigation label at the frontend, is retrieved from this field. In other words, whatever you enter in this field, will be shown as the slide title on the navigation menu on the slideshow output.
Lowercase letters, numbers, and dash are the only characters that are allowed. This field is supposed to be the alias of the slide. So, keep it as a URL.
Container means the output div that slideshow is wrapped by it. This field holds hexadecimal values of colors and color names. CSS color values are all available here.
The time for the transformation of the slide.
Camera FOV *:
The field of view is that part of the world that is visible through the camera at a particular position and orientation in space.
Camera Width *:
This field dictates the width of the slideshow. You can type a number that represents the width in pixels, or use window.innerWidth value that makes the slideshow take the full of its container. If you want to make the slideshow full width, it needs a div that can expand as wide as the browser window is.
Camera Height *:
The slideshow height can be modified here. This field as “Camera width” accepts integer values as slideshow height in pixels and also window.innerHeight is available to fill the entire height of the container by the slideshow. If you set both camera width and camera height to window.innerWidth and window.innerHeight, then place the slideshow in a div that can expand without limits, then you will have a fullscreen slideshow or 3D web page.
Camera Min Distance *:
The minimum distance that the camera can have with the center of the scene.
Camera Max Distance *:
The maximum distance that the camera can have with the center of the scene.
Camera Positions *:
The camera can move from an area to another one with timing, delaying, and easing. This field benefits the Antares keyframe system (AKS). You can have as many positions as you need. The camera will move to each position in the time you assign and with an easing that you think will serve the mood of the scene.
Fade-in Duration (ms) *:
This field takes integer values as milliseconds. If you don’t want the slide to begins with a fade-in effect, you can set the value to 0.
Slide Duration (ms) *:
The time of the slideshow from beginning to the end. This field takes integer values as milliseconds. For example, for 1 second, you need to enter 1000 and for 2 seconds, 2000.
Fade-out Duration (ms) *:
This field, like the other fade effect duration, takes integer values as milliseconds. This field makes the slide fade out after the period that you set in the text field.
Fade-out Delay (ms) *:
Fade out function acts independently. This field creates a delay for the fade-out effect. For example, if the slide duration is 10 seconds and fade out duration is 2 seconds, this field needs to be set to 8000 (8 seconds) to fire the fade-out effect at the right time. So, it ends up at the same time that the whole slide does.
Control Rotate Speed *:
The amount of speed that controls gives to the camera for movement.
Control Auto-rotate Speed *:
The amount of speed of the camera when it is rotating around the scene automatically.
Control Min. Distance *:
A field to control the minimum distance between controls (that the camera is attached to it) and the center of the scene.
Control Max. Distance *:
The maximum distance between controls and the center of the scene. This value needs to be an integer and represents pixels.
You can create a floor for the scene right from here. Another option is creating an object as the floor and position it. But if you would rather this way, then feel free to fill this option by an ID. Lowercase, numbers, underscore, and started with letters.
The CSS class that you would like to give to the floor to have more control over its appearance.
Floor X Position:
The horizontal distance between the floor object and the center of the scene. Requires integer values in pixels.
Floor Y Position:
The vertical distance between the floor object and the center of the scene. Requires integer values in pixels.
Floor Z Position:
The depth of distance between the floor object and the center of the scene. Requires integer values in pixels.
Floor X Rotation:
Rotation of the floor in dimension X. Integer and decimal values are allowed. This value will get divided by Math.PI.
Floor Y Rotation:
Rotation of the floor in dimension Y. Integer and decimal values are allowed. This value will get divided by Math.PI.
Floor Z Rotation:
Rotation of the floor in dimension Z. Integer and decimal values are allowed. This value will get divided by Math.PI.
Another option for styling the floor is writing your CSS directly here. The CSS you apply herewith be injected to the DOM element as inline CSS.
The sound toggle field explains if playing background sound for the slide is enabled.
If this option is in check, the sound will play automatically when the slide begins.
Number of times that the background sound will get played out. If it needs to get played out forever, simple type 0 in this field. The available data type is an integer for sure.
The path to the MP3 version of the background sound.
The path to the OGG version of the background sound.
Sometimes, you may need to have flat content at the top of the 3D scene. This option serves this purpose. Whatever HTML you enter to this field, will be displayed on the slide.
Look-at Keyframes *:
Look-at point is the name of an object that the camera looks at all the time. The look-at point is made to bring the camera focus point under control. You can have as many keyframes you need. On the output, with each keyframe, the camera will change focus to the position that the new keyframe presents.
Show look-at point:
If you are in the development process and need to visually see where the look-at point is at any time, you can check this option. The look-at point is a small white square that appears on the screen when this option is checked.
If you forget to check this option, the slide won’t show up on the output. You can change this value later, on the “Edit slide” page at any time.
Created the slide by inserting the current data on the form to the database.