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));
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.