Help is on the way!

RIGHT4 - Custom Html

In the RIGHT4 position we use 2 Custom HTML Modules to create the text two the right of the image. The first module is used for full website view and has scrolling text. Create a new HTML Module and insert the following mark up in the text area. Assign the position ONLY to the home page. *Note: Use HTML mode to enter the code in the module. Do not use a WYSIWYG editor and make sure to use the module class: scrolltext

<div class="midarticlewrap1">
<h1 class="slidetitle2">
Tincidunt Dolor erat
vivamus vulputate
</h1>
<h2 class="slidetitle3">Tincidunt donec saggitis  
onare vivamus malesuada potenti</h2>
<p>Posuere ornare vulputate sit erat ad et quam in. Nonummy dignissim suspendisse tincidunt diam sit ipsum.</p>
</div>
<div class="midarticlewrap2">
<h1 class="slidetitle2">Dolor interdum vestibulum</h1>
<h2 class="slidetitle3">Tincidunt interdum saggitis  
onare vivamus malesuada potenti</h2>
<p>Posuere ornare vulputate sit erat ad et quam in. Nonummy dignissim suspendisse tincidunt diam sit ipsum.</p>
<div class="nesta"></div>
</div>
<div class="midarticlewrap3">
<h1 class="slidetitle2">Duis sed arcu et nullam erat</h1>
<h2 class="slidetitle3">Tincidunt interdum saggitis onare vivamus malesuada potenti</h2>
<p>Dolor donec sagittis sapien. Ante aptent feugiat adipisicing. Duis interdum sed arcu et nullam.</p>
<div class="issadk"></div>
</div>

Editing the Scrolling Text Javascript files

For the scrolling pinned text we use the JQuery based superscrollorama.js (https://johnpolacek.github.com/superscrollorama/) to pin the text as change the text as you scroll down the website. To edit the effects of the Text you must edit the code in the xtcScripts.js found the in the templates js/ folder. For the TEXT POSITION from the top of the browser and the style you will need to edit the TOP and OPACITY settings. For more information on the Javascript please visit the SuperScrollorama home page [LINK].

    var controller = jQuery.superscrollorama();

    controller.pin(jQuery('.mawrap1'), 5000, {
        anim: (new TimelineLite())
		.append(TweenMax.fromTo(jQuery('.midarticlewrap1'), 8, 
			{css: {top: 100}, immediateRender: true},
			{css: {opacity: 1}},
			{css: {top: 100}}
			))
		.append(TweenMax.to(jQuery('.midarticlewrap1'), 1, 
			{css: {top: -450}},
			{css: {opacity: 0}}
			))
		.append(TweenMax.fromTo(jQuery('.midarticlewrap2'), 1, {
            css: {
                opacity: 0
            }
        }, {
            css: {
                top: 100
            },
            immediateRender: true
        }, {
            css: {
                top: 100
            }
        })).append(TweenMax.fromTo(jQuery('.midarticlewrap2'), 8, {
            css: {
                top: 100
            },
            immediateRender: true
        }, {
            css: {
                opacity: 1
            }
        }, {
            css: {
                top: 100
            }
        }))
		.append(TweenMax.to(jQuery('.midarticlewrap2'), 1, {
            css: {
                top: -450
            }
        }, {
            css: {
                opacity: 0
            }
        }))
		.append(TweenMax.fromTo(jQuery('.midarticlewrap3'), 1, {
            css: {
                opacity: 0
            }
        }, {
            css: {
                top: 100
            },
            immediateRender: true
        }, {
            css: {
                top: 100
            }
        })).append(TweenMax.fromTo(jQuery('.midarticlewrap3'), 8, {
            css: {
                top: 100
            },
            immediateRender: true
        }, {
            css: {
                opacity: 1
            }
        }, {
            css: {
                top: 100
            }
        }))
.append(TweenMax.to(jQuery('.midarticlewrap3'), 1, {
            css: {
                top: -450
            }
        }, {
            css: {
                opacity: 0
            }
        }))

        })

    });

RIGHT4 - Custom Html

In the second RIGHT4 position we create a duplicate version of the text used for mobile / responsive based website view and has non scrolling text. Create a new HTML Module and insert the following mark up in the text area. Assign the position ONLY to the home page. *Note: Use HTML mode to enter the code in the module. Do not use a WYSIWYG editor.

<div class="midarticlewrap4">
<h1 class="slidetitle2">Dolor interdum vestibulum</h1>
<h2 class="slidetitle3">Tincidunt interdum saggitis  
onare vivamus malesuada potenti</h2>
<p>Posuere ornare vulputate sit erat ad et quam in. Nonummy dignissim suspendisse tincidunt diam sit ipsum.</p>
<img src="https://www.joomlaxtc.com/images/nesta.png" style="margin-top:24px;" />
</div>