1. Creating Teaser element


You have to define an element of class .sven-container and a unique id for teaser within the body section of the html page.

2. Configuring teaser element


You can change the properties of a teaser with the help of adding a list of data-* attributes to the teaser element. In the following example, data-enable-sound attribute is added to the teaser element to enable music to be played in the background.

Here is the complete list of teaser element options(data-* attributes)

Sound Options

Options Values Defaults Description
data-enable-sound 'sound_url' Not set Sets the background music for the teaser. If set "path(url)" to the sound file, the sound will be preloaded and ready to play. If set "false", there will be no sound. Supports mp3 format.

eg: "music/honey.mp3"
data-auto-play-sound true
false		 true starts sound automatically when the intro starts.

It doesn't work in mobile browsers(User interaction is needed to play sound in mobile browsers)
data-auto-stop-sound true
false		 false stops sound automatically when the teaser ends(in the last scene). If you want to play the sound indefinitely, you can set the autoStopSound to false.
data-sound-loop true
false		 false loops the audio indefinitely if set true. If set false, the audio stops after it finishes playing its duration.

Static Image Teaser Options

Options Values Defaults Description
data-static-image 'image_url' Not set Sets the background image for the teaser.

eg: "images/static-image.jpeg"
data-mobile-image 'image_url' Not set Sets the background image for the teaser specifically for mobiles.

eg: "images/mobile-image.jpeg"
data-zoom-origin options 'center center' lets you modify the origin for transformations(zoom) of the background image element.
data-zoom-type 'in'
'out'
'inout'		 'in' It can be set "in" or "out" or "inout". The static image can be zoomed in or out or both by setting this option.
data-zoom-dur 'auto'
(number)		 'auto' user can control the duration of the image zoom through this option. If set "auto", the zoom will last till the completion of the teaser. If set any number (in seconds), the zoom will last only for the given time and stops.
data-zoom-scale false
(number)		 false If set a value greater than 1(need not be an integer. it can be 1.1, 1.5, etc), the image will zoom throughout the intro to reach the defined zoom value.

Video Teaser Options

Options Values Defaults Description
data-static-video 'video_url' Not set Sets the background video for the teaser. It can be either local video_url(html5) or youtube video id as follows

eg: "video/static-video.mp4" (or) "1VwZ1tnDZbs"
data-video-type 'html5'
'youtube'		 'html5' The type of background video to be used in the teaser needs to be set through this attribute.
data-video-mute true
false		 true Mute the audio on the background video.
data-video-quality 'default'
'small'
'medium'
'large'
'hd720'
'hd1080'
'highres'		 'highres' The background video's quality can be set through this attribute. This applies only to youtube video.
data-video-start (number) 0 Set the seconds the background video should start at.
data-video-stop (number) 0 Set the seconds the background video should stop at. If "0", it's ignored.
data-video-loop true
false		 true loops the background video indefinitely if set true. If set false, the video stops after it finishes playing its duration.
data-auto-stop-video true
false		 false stops the background video when the teaser ends.

3. Initializing the Teaser


You should initialize the Sven Teaser Plugin by calling the svenPlugin() method on the target element. Please refer main.js on how it is being used.

4. List of teaser Options


Sven Teaser Plugin has several options to customize. These options can be defined by passing an object with your changed values. Please refer main.js on how it is being used. Check following example.

Here is the complete list of teaser options

Options Values Defaults Description
autoStart true
false		 true starts playing the teaser immediately without the need of user interaction. If false, movie will start only when the "Play" control (button) is clicked.
fullDuration 'default'
(number)		 'default' User can reduce or increase the overall duration of the teaser by adding this attribute. If set "default", the movie plays for the duration as defined in our code which is quite optimal. If set a duration(in seconds), the playback speed of the teaser varies accordingly.

It works only when preloadScenes set to true.
globalFreeze (number) 0 The default freeze time of a scene in a teaser. The freeze(pause) duration (in seconds) between the 'in' animation and 'out' animation of each scene.It can be overridden by adding data-freeze-time attribute to each of the scene.
letterBoxing true
false		 true If set to false, the black bars on the top and bottom of the teaser will not be shown.
preloadScenes true
false		 false If set to true, all the scenes in the teaser are preloaded before started playing. In Internet explorer & mobile browsers, it takes more than a few seconds to preload all scenes as it involves heavy JS processing.

If set to false, only the first scene is preloaded and the teaser starts playing. Other scenes will be processed in a queue by a delay. Please refer queueDelay below
queueDelay (number) 0.05 it's an optimal delay(in seconds) to enable javascript processing of scenes in a queue.

It works only when preloadScenes set to false.
force3DOnDevices true
false		 false If set to true, it forces hardware acceleration in mobile browsers.
videoOnMobiles true
false		 true If set to false, the video will be replaced by corresponding image on mobiles. If you want the video to play on mobile devices, set this to true.
videoVolume 0-1 1 Sets the default volume of the html5 video. It can be decimal (0.5, 0.6, etc.,)
standaloneAudioVolume 0-1 1 Sets the default volume of the standalone audio set using data-enable-sound. It can be decimal (0.5, 0.6, etc.,)
preloadMethod 'xhr'
'tag'		 'tag' To preload audio fully before the teaser starts playing, use 'xhr'.

If you choose 'tag', the audio will be partially loaded depending on the buffer size of the browser allowed and continues streaming lively so that preload time will be fast.

NOTE: When you link to an external music file(from other websites), always use 'tag'. 'xhr' method doesn't allow cross origin url requests by default. You need to tweak the server to do it. It is also simple. Check here
preloadFiles (array) [ ] User can input custom files to be preloaded (in a comma separated list) before the teaser starts playing. For example,

preloadFiles: ["images/bg.jpeg", "images/comingsoon.jpeg"]
fileTimeout (number) 8000 The time in milliseconds to assume preloading an image has failed.
audioTimeout (number) 8000 The time in milliseconds to assume preloading the audio has failed or buffered enough.
videoTimeout (number) 8000 The time in milliseconds to assume preloading the youtube video has failed or buffered enough.
initAfter 0-100 80 It's a percentage value. To allow the teaser to be initiated after all the assets(images and external files mentioned in preloadFiles) are loaded, set initAfter to 100. By default, if 80% of the assets are loaded, the teaser will be initiated.
showAnimationSummary true
false		 false If set 'true', the animation summary of each scene on the teaser will be displayed on the corresponding scene. The animation name, scene duration, in duration, out duration, freeze time and more such info will be displayed.
colors (array) ['#E7464F', '#CDAA20', '#80993B', '#07BABA', '#9B2C9D'] These colors are used for "Animating Colors" Teaser. You can change the order or modify colors
freezeOnBlur true
false		 true Pauses the teaser on page when the user switches to other browser tab or any other application and it will automatically resumes once the tab is active
onTeaserReady callback function function() {} no parameters passed. It executes once the teaser is ready to start.
onTeaserStart callback function function() {} no parameters passed. It executes once the teaser starts.
onTeaserEnd callback function function() {} no parameters passed. It executes once the teaser ends.
onBeforeScene callback function function() {} four parameters passed

scenePos - position of the scene(Index).
$currentScene - the scene Object.
durationInfo - duration object(it includes in, out, full and freeze duration)
masterTS - TimeScale of the teaser.

It executes before each scene starts.
onAfterScene callback function function() {} four parameters passed

scenePos - position of the scene(Index).
$currentScene - the scene Object.
durationInfo - duration object(it includes in, out, full and freeze duration)
masterTS - TimeScale of the teaser.

It executes before each scene ends.
onBeforeFreeze callback function function() {} four parameters passed

scenePos - position of the scene(Index).
$currentScene - the scene Object.
durationInfo - duration object(it includes in, out, full and freeze duration)
masterTS - TimeScale of the teaser.

It executes after each scene "in" animation.

5. Creating Scenes / Slides


You have to define an element of class .sven-slide and a unique id (scene-1, scene-2, scene-3, etc.,) into the teaser element as in the following example.

You can add multiple scenes in the same way.

6. Configuring Scenes / Slides


You can change the properties of a scene / slide with the help of a list of data-* attributes. all attributes are optional.





	
	


        

            
Hello and welcome to

        


	


    
	


        

            
First line of text

            
Second line of text

Here is the complete list of scene options(data-* attributes)

Options Values Defaults Description
data-scene-image 'image_url' Not set Sets the background image for the scene / slide.
data-mobile-image 'image_url' Not set Sets the background image for the scene / slide specially for mobiles.
data-pursue-image 'yes'
'no'		 'no' If set to "yes", the image is inherited by the successor scenes no matter what.

It works only when preloadScenes set to true.
data-alignment 'right-top'
'right-bottom'
'right-center'
'left-top'
'left-bottom'
'left-center'
'center-top'
'center-bottom'
'center-center'		 'center-center' Sets the position of the animation plane on all screens. The styling of these position presets are defined in sven-teaser.css.
data-mobile-alignment 'right-top'
'right-bottom'
'right-center'
'left-top'
'left-bottom'
'left-center'
'center-top'
'center-bottom'
'center-center'		 NOT SET Sets the position of the animation plane on mobile screens. If this is not defined, it will be same as data-alignment attribute.
data-freeze-time 'default'
(number)		 'default' The freeze(pause) duration (in seconds) between the 'in' animation and 'out' animation of each scene. If set 'default', the content stays for the duration as defined in our code which is quite optimal.
data-scene-dur 'default'
(number)		 'default' The duration of the whole scene can be set through this attribute. data-scene-dur is nothing but the addition of 'data-in-dur', 'data-out-dur', 'data-freeze-time'. If this property is set, the values of 'data-in-dur', 'data-out-dur' and 'data-freeze-time' will be ignored.
data-trans transitions list 'none' The transition to be showed before the scene. There are only a few options here. More to be updated soon.
data-mobile-trans transitions list 'none' The transition to be showed before the scene only on mobiles & tablets. There are only a few options here. More to be updated soon.
data-trans-dur 'default'
(number)		 'default' The duration of the transition can be set through this attribute. This property doesn't apply to data-trans "none".

Scene Video Options

Options Values Defaults Description
data-scene-video 'video_url' Not set Sets the background video for the teaser. It can be either local video_url(html5) or youtube video id as follows

eg: "video/static-video.mp4" (or) "1VwZ1tnDZbs"
data-pursue-video 'yes'
'no'		 'yes' If set to "yes", the video is inherited by the successor scenes no matter what.
data-video-type 'html5'
'youtube'		 'html5' The type of background video to be used in the teaser needs to be set through this attribute.
data-video-mute true
false		 true Mute the audio on the background video.
data-video-quality 'default'
'small'
'medium'
'large'
'hd720'
'hd1080'
'highres'		 'highres' The background video's quality can be set through this attribute. This applies only to youtube video.
data-video-start (number) 0 Set the seconds the background video should start at.
data-video-stop (number) 0 Set the seconds the background video should stop at. If "0", it's ignored.
data-video-loop true
false		 true loops the background video indefinitely if set true. If set false, the video stops after it finishes playing its duration.
data-auto-stop-video true
false		 false stops the background video when the teaser ends.

Content Timings & Patterns (Advanced)

Options Values Defaults Description
data-cin-order 'sync'
'delayed'
'onebyone'		 'onebyone' The timing at which each line of text starts "in" animation if multiple lines of text found inside ".content-container".

sync - all lines of text start animating at the same time.

delayed - A small delay be introduced (thru data-cin-delay)at start of each line animation.(except for the first line)

onebyone - The animation works one after the other
data-cin-delay (number) 0.25 The delay(in seconds) with which each line starts "in" animation if data-cin-order is set to "delayed".
data-cout-order 'sync'
'delayed'
'onebyone'		 'onebyone' The timing at which each line of text starts "out" animation if multiple lines of text found inside ".content-container".

sync - all lines of text start animating at the same time.

delayed - A small delay be introduced (thru data-cout-delay)at start of each line animation.(except for the first line)

onebyone - The animation works one after the other
data-cout-delay (number) 0.25 The delay(in seconds) with which each line starts "out" animation if data-cout-order is set to "delayed".
data-cin-pattern 'sequential'
'reverse'
'random'
'median'
'reverse-median'		 'sequential' The pattern at which each line starts "in" animation if multiple lines of text found inside ".content-container".
data-cout-pattern 'sequential'
'reverse'
'random'
'median'
'reverse-median'		 'reverse' The pattern at which each line starts "out" animation if multiple lines of text found inside ".content-container".

7. Adding scene contents


You can add text content to a scene as seen in the example below. Check contents(h1 tags) wrapped inside content-container. It may contain single line of text (or) multiple lines of text as in the example below.

You can also add your own styling class in main.css for each text placeholder instead of lt-main and lt-sub.





	
	


      

          
Hello and welcome to

      


	


  
	


      

          
First line of text

          
Second line of text

8. Configuring scene contents


You can add a few data-* attributes directly to the scene text placheolders(h1 tags) as in the following example.


  


      

  			

  				

  					Hello and welcome to
  				

  			

  		


  		

  			

  				

  					Stomp

Here is the complete list of content options(data-* attributes).

Options Values Defaults Description
data-align 'left'
'right'
'center'		 Not set Positions the text to left, right or center within the content-container
data-box-type 'contain'
'full'		 'contain' This property doesn't apply to the main text. It affects only the subtitle text placeholder(.lt-sub in our example). It decides whether the box in the background stretches to full width of the content-container or contains to the text width.
data-sin animations {"animation": "fade-in"} The "in" animation to be applied to the content.
data-sout animations {"animation": "fade-out"} The "out" animation to be applied to the content.

9. Animations


Here is the list of basic animations available.

Here is the list of rotator animations available. (only one of the following is used in FIDES template)

if you know the basics of GSAP library and JS, you could get how the animations work and could create new animations.

10. List of Transitions


Here is the list of transitions available.