這位作者如何在文字內部實現均衡效果？

Question

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

如果將鼠標懸停在此頁面上的文本導航詞語上，您會看到它在文本內部從左向右改變顏色。我無法弄清楚這個人是怎麼做到的，甚至不知道他用什麼技術做到這一點。

他用帆布做它嗎？有誰知道他是如何做到這一點的？文字不是圖像，而是可選文字。

Answer 1

它的JavaScript使用jQuery：

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相同的文字，但兩種不同的顏色。當被淹沒時，橙色動畫覆蓋白色。

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");