[jQuery 활용하기] 04. 프로젝트: 나만의 포트폴리오

포트폴리오 IV: 막대기 애니메이션

 

'About' 섹션에 나의 스킬 여섯 개가 나열되어 있습니다. 'About' 섹션에 다다랐을 때 해당 스킬의 퍼센티지(%)만큼 파란 막대기가 서서히 색칠되도록 해주세요.

참고로 회색 막대기는 클래스 이름이 'bar'인 요소이고, 그 안에 클래스 이름이 'inner-bar'인 요소가 파란 막대기입니다.

 

---

 

 

function scrollHandler() {
    if ($(window).scrollTop() >= $('.about').position().top) {
        $('.menu-right button').css('color', '#4a4a4a');

        $('.skill').each(function () {
            var skill = $(this);
            var percentage = skill.find('.percentage').text();
            skill.find('.inner-bar').animate({width: percentage}, 1200);
        });

    } else {
        $('.menu-right button').css('color', 'white')
    }

    $('section').each(function () {
        if ($(window).scrollTop() >= $(this).position().top) {
            $(this).find('.vertical-center').animate({top: 0, opacity: 1}, 800);
        }
    });
}

$(window).on('scroll', scrollHandler);

scrollHandler();

$('.menu-right button').on('click', function() {
    var id = $(this).attr('id');
    if (id == "about-btn") {
        $('html, body').animate({scrollTop: $('.about').position().top}, 1000);
    } else if (id == "contact-btn") {
        $('html, body').animate({scrollTop: $('.contact').position().top}, 1000);
    }
});

---

본 내용은 Codeit의  'jQuery' 강의를
참고하여 작성한 내용입니다.