Как этот автор сделал эффект эквалайзера внутри текста? - PullRequest
Новая
       50

Как этот автор сделал эффект эквалайзера внутри текста?

1 голос
/ 22 января 2012

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

Если вы наведите курсор на текстовые навигационные слова на этой странице, вы увидите, что они изменяют цвет слева направо внутри текста. Я не могу понять, как этот парень сделал это, или даже какую технологию он использовал для этого.

Он использует холст, чтобы сделать это? Кто-нибудь знает, как он это сделал? Текст не изображение, это текст, который можно выбрать.

Ответы [ 2 ]

2 голосов
/ 22 января 2012

Это 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 деления с одинаковым текстом, но двумя разными цветами.При наведении мыши оранжевая анимация перекрывает белую.

0 голосов
/ 22 января 2012

Он использует 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");
...