Hello WA,

Here is another training that I decided to put together based on a scrolling text that I saw the other day for a widget. This is a full screen method and not just limited to a widget, no plugins were used in the making of this so no added loading times for yoour website.

I use the Divi theme so the example I show will be in relation to my OnlinePLCSupport.com website which is a Divi theme site.

I said I would breakdown the code so that you could see and have it is needed to use on your Divi themes or maybe other themes as well.

I use this style on several sites and yes, it catches the readers eye.

The part of the code in the Java that does the sentence writing and the color is

<script type="text/javascript">
// function([string1, string2],target id,[color1,color2])
consoleText(['Online PLC Support Offers The Very Best Training', 'Custom Video Training With Detailed Explanations', 'Up To Date Information That No One Else Provides'], 'text',['#fcbf00','#fcbf00','#fcbf00']);

to change it just:

<script type="text/javascript">
// function([string1, string2],target id,[color1,color2])
consoleText(['Sentence one', 'Sentence two','Sentence three'], 'text',['color 1','color 2','color 3']);

Here is the full code:

html portion:

<div class='console-container'><span id='text'></span><div class='console-underscore' id='console'>_</div></div>

Java Script portion:

<script type="text/javascript">
// function([string1, string2],target id,[color1,color2])
consoleText(['Online PLC Support Offers The Very Best Training', 'Custom Video Training With Detailed Explanations', 'Up To Date Information That No One Else Provides'], 'text',['#fcbf00','#fcbf00','#fcbf00']);

function consoleText(words, id, colors) {
if (colors === undefined) colors = ['#fff'];
var visible = true;
var con = document.getElementById('console');
var letterCount = 1;
var x = 1;
var waiting = false;
var target = document.getElementById(id)
target.setAttribute('style', 'color:' + colors[0])
window.setInterval(function() {

if (letterCount === 0 && waiting === false) {
waiting = true;
target.innerHTML = words[0].substring(0, letterCount)
window.setTimeout(function() {
var usedColor = colors.shift();
colors.push(usedColor);
var usedWord = words.shift();
words.push(usedWord);
x = 1;
target.setAttribute('style', 'color:' + colors[0])
letterCount += x;
waiting = false;
}, 1000)
} else if (letterCount === words[0].length + 1 && waiting === false) {
waiting = true;
window.setTimeout(function() {
x = -1;
letterCount += x;
waiting = false;
}, 1000)
} else if (waiting === false) {
target.innerHTML = words[0].substring(0, letterCount)
letterCount += x;
}
}, 120)
window.setInterval(function() {
if (visible === true) {
con.className = 'console-underscore hidden'
visible = false;

} else {
con.className = 'console-underscore'

visible = true;
}
}, 400)
}
</script>

The CSS portion:

<style>
@import url(https://fonts.googleapis.com/css?family=Khula:700);

.hidden {
opacity:0;
}
.console-container {
font-family:Khula;
font-size:3em;
text-align:center;
height:10px;
width:100px;
display:inline;
position:relative;
color:black;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
.console-underscore {
display:inline-block;
position:relative;
left:10px;
}

@media (max-width: px)750 {
.console-container { font-size:1em; }
}

</style>

I hope that you find this helpful and for those that are not code experts, it is copy paste just as the video shows....of course it is shown in a Divi theme.

Thanks,

Shane