Author ShaneWelcher
2016
5
Premium
Rank 640

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

Join the Discussion
Write something…
Recent messages
MarionBlack Premium
The widget is so much easier, especially for beginners
Reply
ShaneWelcher Premium
Yes bit the widget is not full screen, it is a sidebar and not eye catching to the reader.

Unless you are trying to promote a sidebar which in this day and age does not work as well as main screen attention.

Either way, between you and me....we have put together a system that all users can be successful for or even do a split test for the experienced users.

Thanks,

Shane
Reply
ShaneWelcher Premium
Unless you are trying to say something else?

I am doing this to help others, anyone and not just beginners. I put forth solid training to help all in anyway that I can.

I do nothing wrong with what I show and teach or even talk about.
Reply
MarionBlack Premium
I have my scrolling text in a header widget so it's at the top of the page (above the content). It looks good and it is eye catching.
Reply
ShaneWelcher Premium
What I meant is that if you use a widget then you have limited areas you can place it. The top is odd in my opinion and the side is odd.

Again, this is my opinion so if you like it then roll with it.

With using the way I show, it can be placed anywhere the person wants to put it.

I don't quite understand where you are coming from, I said your way was great for beginners but what I show is cut and paste way which is very value added as well. This can be used by anyone to use anywhere they would like.

I think we can both agree that there are limits to the widget style....no harm done.

Thanks,

Shane
Reply
MarionBlack Premium
I don't see any conflicts here Shane. I just wanted to let beginners know that there is a very simple way to add scrolling text.
Reply
Tirolith Premium
Double dutch to me but will have a go at it.
Reply
Cindyda1 Premium
I like the scrolling text idea. I think it makes certain sites pop and more interesting. Always good to know how to do these things. Of course, I would have to do the copy and paste method! I have no knowledge of code but this helps. Thanks
Reply
MKearns Premium
I'm impressed that you use hard coding in your build outs Shane. That's a great thing!
Reply
Top