この作者がテキスト内でイコライザ効果をどのようにしたか？

Question

http://www.chris-wang.com/

このページのテキストナビゲーション単語にカーソルを合わせると、テキストの中で左から右に色が変わるのがわかります。私はこの男がどのようにそれをしたのか、あるいは彼がそれをやっていたどの技術さえも理解できません。

彼はキャンバスを使っていますか？誰も彼がこの効果をどのようにしたか知っていますか？テキストはイメージではなく、選択可能なテキストです。

Answer 1

それはjQueryを使ってJavaScriptのだ：

function onOver(){ 
     //var txtwidth = $(this).document.getElementsByClassName("nav_over").clientWidth; 
     //var txtwidth = $(this).children(".nav_over").offsetWidth; 
     var txtWidth = $(this).children(".project_header").children(".nav_btn").children(".nav_base").width(); 
     //var txtWidth = document.getElementByClass("nav_base").offsetWidth 
     //var txtWidth = $(document).width(); 
     $(this).children(".project_header").children(".nav_btn").children(".nav_overlay").stop(); 
     $(this).children(".project_header").children(".nav_btn").children(".nav_overlay").animate({ 
      width:txtWidth 
     }, speed,"easeOutExpo"); 
    }; 
function onOut(){ 
     $(this).children(".project_header").children(".nav_btn").children(".nav_overlay").stop(); 
     $(this).children(".project_header").children(".nav_btn").children(".nav_overlay").animate({ 
      width: "0px" 
     }, speed,"easeOutExpo"); 
}; 

基本的に同じテキストを持つだけで2 div要素が、2つの異なる色。マウスオーバーすると、オレンジ色のものがアニメーション化されて白いものを覆う。

Answer 2

彼はその効果を得るためにjQueryを使用しています。具体的に：

$(".nav_button").mouseover(onOver); 
$(".nav_button").mouseout(onOut); 

と：

function onOver(){ 
     //var txtwidth = $(this).document.getElementsByClassName("nav_over").clientWidth; 
     //var txtwidth = $(this).children(".nav_over").offsetWidth; 
     var txtWidth = $(this).children(".project_header").children(".nav_btn").children(".nav_base").width(); 
     //var txtWidth = document.getElementByClass("nav_base").offsetWidth 
     //var txtWidth = $(document).width(); 
     $(this).children(".project_header").children(".nav_btn").children(".nav_overlay").stop(); 
     $(this).children(".project_header").children(".nav_btn").children(".nav_overlay").animate({ 
      width:txtWidth 
     }, speed,"easeOutExpo"); 
    }; 
function onOut(){ 
     $(this).children(".project_header").children(".nav_btn").children(".nav_overlay").stop(); 
     $(this).children(".project_header").children(".nav_btn").children(".nav_overlay").animate({ 
      width: "0px" 
     }, speed,"easeOutExpo");