ナビゲーションバーのアニメートタイトル

Question

ナビゲーションバーでタイトルをアニメートしようとしています。このウェブサイト内の1つのように：私はアニメーション手紙を適用すべきであることを知っている

<a>Contact</a> 
a { 
letter-spacing: 1px; 
    transition: all .1s ease-in; 
} 
a:hover { 
letter-spacing: 0.2em; 
} 

：私は穴の単語をアニメーション化されてみましたが、それは私が探しているものではありません何

http://www.danielspatzek.com/Home

手紙で私はそれらを広めることができますか？

は例を与える上のアニメーションが有名なアニメーションライブラリ Greensockによって実施されてきたあなたに

Answer 1

あなたはこの

var spread = document.getElementsByClassName('spread'); 
 
[].forEach.call(spread, function(el) { 
 
    // replace the content width divs 
 
    el.innerHTML = '<span>' + el.innerText.split('').join('</span><span>') + '</span>' 
 
    // custom :hover 
 
    el.onmouseenter = function(e) { 
 
    var childern = e.target.childNodes 
 
    var width = e.target.offsetWidth/childern.length 
 
    for (var i = 0, child; child = childern[i]; i++) child.style.minWidth = width + 'px' 
 
    } 
 
    // remove custom style again 
 
    el.onmouseleave = function(e) { 
 
    var childern = e.target.childNodes 
 
    for (var i = 0, child; child = childern[i]; i++) child.style.minWidth = '0' 
 
    } 
 
})

.spread { 
 
    text-align:center; 
 
} 
 
.spread span { 
 
    display: inline-block; 
 
    transition: all .5s ease; 
 
    text-align:center; 
 
    min-width: 0; 
 
}

<h1 class="spread"> 
 
    Title 
 
</h1>

Answer 2

ありがとうございます。

これらのアニメーションを実際に作成したい場合は、TimelineliteとTweenmaxクラスを使用して手を少し汚れてください。