0

I'm attempting to integrate This typewriter effect.

I've attempted setting it up here https://jsfiddle.net/74cq52az/

but with no luck, can anyone take a look and give me a hint what's wrong?

I followed the steps included in the description.

HTML

<script src="www.cognition-webdesign.dk/wp-content/themes/cognition/js/Typist-master/dist/typist.js"></script>
<strong id="typist-element" data-typist="sut,min,dut">great</strong>

CSS

@keyframes blink {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}

@-webkit-keyframes blink {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}

#typist-element {
&:after {
content: " ";
display: inline-block;
height: 47px;
position: relative;
top: 10px;
margin-left: 3px;
margin-right: 7px;
width: 4px;
background: #06a44d;
animation: blink 1s step-start 0s infinite;
-webkit-animation: blink 1s step-start 0s infinite;
}
}

.selectedText {

}

Javascript

(function () {
var typist;
typist = document.querySelector('#typist-element');
new Typist(typist, {
    letterInterval: 60,
    textInterval: 3000.
});
}.call(this));
wonea
  • 4,783
  • 17
  • 86
  • 139
Vegapunk
  • 99
  • 7

1 Answers1

0

Your script src was missing the https protocol:

Change your script tag to:

<script src="https://www.cognition-webdesign.dk/wp-content/themes/cognition/js/Typist-master/dist/typist.js"></script>

If you looked at the console you would see the following error:

Mixed Content: The page at 'https://jsfiddle.net/74cq52az' was loaded over HTTPS, but requested an insecure script 'http://www.cognition-webdesign.dk/wp-content/themes/cognition/js/Typist-master/dist/typist.js'. This request has been blocked; the content must be served over HTTPS.

pizzarob
  • 11,711
  • 6
  • 48
  • 69
  • I see, well i hoped i would be able resolve my actual issue by setting it up in this closed environment, but it doesnt help me at all. Doesnt work on my website at the start where it says "great" – Vegapunk Aug 01 '17 at 22:10