css/jsタイプライターエフェクト、jsfiddleを統合

Question

タイプライター効果Thisを統合しようとしています。

私はここhttps://jsfiddle.net/74cq52az/

を、それを設定しようとしましたが、運と、誰もが見て、私は間違って何ヒントを与えることができますか？

私は説明に含まれている手順に従いました。

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を

あなたのスクリプトのsrcがhttpsプロトコル欠落していました

(function() { 
var typist; 
typist = document.querySelector('#typist-element'); 
new Typist(typist, { 
    letterInterval: 60, 
    textInterval: 3000. 
}); 
}.call(this)); 

Answer 1

：

がにスクリプトタグを変更する：

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

コンソールを見た場合には、次のエラーを参照します：私は見

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.