テキスト内で回転するUncodeテーマ

Question

私はコードペンで見つけたこのペンを試そうとしています。これは、テキストが入力されて削除されているように見えるようにします。

私はこれをサイトに入れようとしましたが、htmlとjavaが入っていて、私もCSSを入れましたが、どのアイデアも動作していないようです。

私はWordpress内のUncodeというテーマを使用しています。私は生のJavaとhtmlブロックを入れることができますが、CSSではなく、CSSをテーマオプションやページに入れることができます。

このページでは、進行中の作業ですが、こちらのページ上にあるものへのリンクです：http://preview.geomedia.co.uk/whitelight-venues/about-us/

Answer 1

また、あなたがjquery-呼び出す必要があり、ファイル の終わりにfooter.phpにCSSやJavaScriptを追加します。 mini.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
var TxtRotate = function(el, toRotate, period) { 
    this.toRotate = toRotate; 
    this.el = el; 
    this.loopNum = 0; 
    this.period = parseInt(period, 10) || 2000; 
    this.txt = ''; 
    this.tick(); 
    this.isDeleting = false; 
}; 

TxtRotate.prototype.tick = function() { 
    var i = this.loopNum % this.toRotate.length; 
    var fullTxt = this.toRotate[i]; 

    if (this.isDeleting) { 
    this.txt = fullTxt.substring(0, this.txt.length - 1); 
    } else { 
    this.txt = fullTxt.substring(0, this.txt.length + 1); 
    } 

    this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>'; 

    var that = this; 
    var delta = 300 - Math.random() * 100; 

    if (this.isDeleting) { delta /= 2; } 

    if (!this.isDeleting && this.txt === fullTxt) { 
    delta = this.period; 
    this.isDeleting = true; 
    } else if (this.isDeleting && this.txt === '') { 
    this.isDeleting = false; 
    this.loopNum++; 
    delta = 500; 
    } 

    setTimeout(function() { 
    that.tick(); 
    }, delta); 
}; 

window.onload = function() { 
    var elements = document.getElementsByClassName('txt-rotate'); 
    for (var i=0; i<elements.length; i++) { 
    var toRotate = elements[i].getAttribute('data-rotate'); 
    var period = elements[i].getAttribute('data-period'); 
    if (toRotate) { 
     new TxtRotate(elements[i], JSON.parse(toRotate), period); 
    } 
    } 
    // INJECT CSS 
    var css = document.createElement("style"); 
    css.type = "text/css"; 
    css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }"; 
    document.body.appendChild(css); 
}; 
</script> 
<style> 

h1,h2 { 
    font-weight: 200; 
    margin: 0.4em 0; 
} 
h1 { font-size: 3.5em; } 
h2 { 
    color: #888; 
    font-size: 2em; 
} 

</style> 

あなたのabout usページのテンプレートを作成したら、それは他のページとは異なるはずで、このページのみを使用します。

このテンプレートコードには、テキストを表示する場所にHTMLを貼り付けることができます。

終わり、結果はこのスクリーンショットのようになります。https://prnt.sc/hb69cf

それは私のlocalshotのウェブサイト上で私のために働いています。

ありがとう