2.1 Stomp Generator using JS (Old Method)

If the New Stomp Intro Builder is not working for you, choose this method to generate your intro. You don't need PHP (or) a Server setup for this to work.

Enter exactly 100 words and Click on generate button. The code will be generated and ready to be copied.

Just copy the code to a new html file and move it to the template folder. That's it.

There are two generators available for generating the corresponding demo variant.

• Stomp Generator Local Video — for generating the local video demo.
• Stomp Generator Youtube Video — for generating the youtube video demo.

3.1. Local / Remote Server

Prefer to use a local server. You definitely need a Local / Remote Server for the Stomp Generator to work as the script is written in PHP. If you have any questions, please send us a mail.

3.2. Set Folder Permissions

You need to set the file permissions of your generated folder to 0755 (or) 0777 for the Stomp Generator to work.

3.3. Revert Folder Permissions

Once the Stomp Intro is generated, revert the file permissions of your generated folder back to 0755 for security reasons.

3.4. Delete Generator

Once everything is setup and your site is ready to go live, kindly delete the generator and generated folder for security reasons.

9.0. Preload All Scenes

preloadScenes - 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.

By default, preloadScenes is set to false.

Locate main.js file in the js folder and find the following property(go to line 189) and change the value to true.

preloadScenes: false,

9.1. Add / Change music on the teaser

Choose the demo variant(html file). Add (or) Replace data-enable-sound attribute with your own sound url in the teaser element like the following.

IMPORTANT!!! Please make sure to include / upload the ogg format of the audio to the same folder as the mp3 file (for supporting Android Native Browser) with the same file name.

9.2. Add / Change Video to any of the scenes

You could add local / youtube video to any of the scenes in the teaser.

Choose the demo variant(html file). Add (or) Replace data-scene-video="video/Particles.mp4" data-video-type="html5" attribute with your own local / youtube video url to any of the scenes like the following.

9.2.1 ADD LOCAL VIDEO

			

				

					Hello and welcome to
				
			
		

9.2.2 ADD YOUTUBE VIDEO

			

				

					Hello and welcome to
				
			

9.2. Contact Form Configuration

Locate contact.php file in the php folder and find the following lines and change the values accordingly.

// Contact Configuration
$yourMail = "YOUR_MAIL_HERE";
$yourName = "YOUR_NAME_HERE";
$subject = "Inquiry from website";

9.3. MailChimp integration

Locate subscribe.php file in the php folder and find the following lines and change the values accordingly.

// MailChimp Configuration
$api_key = "YOUR_API_KEY"; // ENTER YOUR API KEY HERE
$list_id = "YOUR_LIST_ID"; // ENTER YOUR LIST ID HERE

9.4. Add Image to any of the scenes

You could add image to any of the scenes in the teaser.

Choose the demo variant(html file). Add (or) Replace data-scene-image="images/backgrounds/slide-5.jpg" attribute with your own image url to any of the scenes like the following.

	

		

			images
		
	

IMPORTANT!!! Note the use of data-pursue-video="yes" otherwise the video won't show in other successor scenes. Advanced data-* attributes that can added to configure each scene on your teaser can be found here...

9.5. Set Launch Date(Countdown)

Locate main.js file in the js folder and find the following lines(Starting from line 149) and change the date accordingly.

/* ==================================================================
5.0 Initialize Countdown
TTBD : Revert to previous version as in Sven
================================================================== */
$(".st-countdown").countdown("2017/12/01", function(event) {
    $(this).text(
        event.strftime('%D Days %H:%M:%S')
    );
});

9.6. Set / Change font for the teaser

You could add custom (or) google font to your teaser.

9.6.1 SET CUSTOM FONT

Step 1: Locate the custom css file (index-local.css in our case) associated with the selected demo variant(index-local.html) and find the following lines and Replace the font files and other declarations with your custom font

/* ==================================================================
1.0 Custom Font Declarations(if any)
================================================================== */
@font-face {
    font-family:'TeXGyreHeros';
    src: url('../fonts/TeXGyreHeros-Bold.eot');
	src: url('../fonts/TeXGyreHeros-Bold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/TeXGyreHeros-Bold.woff2') format('woff2'),
		url('../fonts/TeXGyreHeros-Bold.woff') format('woff'),
		url('../fonts/TeXGyreHeros-Bold.svg#TeXGyreHeros-Bold') format('svg');
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0-10FFFF;
}

/* 2.1 Font Style Declarations and Other Fixes
-------------------------------------------------------------- */
.fontLoaded .sven-container { /* Teaser Font */
    font-family: 'TeXGyreHeros', sans-serif;
}

Step 2: Locate the main.js file and find the following lines and replace the font-family with your custom font family

    /* ==================================================================
    1.0 Load Custom, Google Fonts
    ================================================================== */
    WebFont.load({
        custom: {
            families: [ 'TeXGyreHeros' ]
        },
        google: {
            families: ['Poppins:300,400,500,600']
        },
        classes: false,
        timeout: 5000,
        fontactive: function(familyName, fvd) {
            if(familyName == "TeXGyreHeros") {
                document.documentElement.className += " fontLoaded";
                isFontActive = true;
                $(document).trigger("fontActive");
            }
        },
        fontinactive: function(familyName, fvd) {
            if(familyName == "TeXGyreHeros") {
                isFontActive = true;
                $(document).trigger("fontActive");
            }
        }
    });

9.6.2 ADD GOOGLE FONT

Step 1: Locate the custom css file (index-local.css in our case) associated with the selected demo variant(index-local.html) and find the following lines and Replace the font name with your google font. Replace "TeXGyreHeros" with the google font you wish to use.

    /* 2.1 Font Style Declarations and Other Fixes
    -------------------------------------------------------------- */
    .fontLoaded .sven-container { /* Teaser Font */
        font-family: 'TeXGyreHeros', sans-serif;
    }

    /* Could be replaced with the "Ralway" google font like below*/

    /* 2.1 Font Style Declarations and Other Fixes
    -------------------------------------------------------------- */
    .fontLoaded .sven-container { /* Teaser Font */
        font-family: 'Raleway', sans-serif;
    }

Step 2: Locate the main.js file and load your google font like the following.

    /* ==================================================================
    1.0 Load Custom, Google Fonts
    ================================================================== */
    WebFont.load({
        google: {
            families: ['Raleway:300,400,500,600']
        },
        classes: false,
        timeout: 5000,
        fontactive: function(familyName, fvd) {
            if(familyName == "Raleway") {
                document.documentElement.className += " fontLoaded";
                isFontActive = true;
                $(document).trigger("fontActive");
            }
        },
        fontinactive: function(familyName, fvd) {
            if(familyName == "Raleway") {
                isFontActive = true;
                $(document).trigger("fontActive");
            }
        }
    });