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

포트폴리오 III: 멋있게 나타내기

 

각 섹션의 내용은 'vertical-center'라는 클래스 이름의 'div'로 둘러싸여 있습니다. CSS 파일을 살펴보시면 'vertical-center'에는 이런 스타일이 적용되어 있는데요.

 

.vertical-center {
opacity: 0;
position: relative;
top: 100px;
}

 

'opacity'가 '0' 으로 되어 있기 때문에 현재는 내용이 보이지 않는 거죠. 그리고 'top'이 '100px'로 되어 있어서 살짝 아래쪽에 위치하고 있습니다.

스크롤을 해서 각 섹션에 다다르면 해당 섹션의 'vertical-center' 요소가 보이면서 정가운데로 1초 이내에 서서히 올라오도록 만들어주세요. ('opacity'가 '1'까지, 'top'이 '0px'까지)

---

function scrollHandler() {
    if ($(window).scrollTop() >= $('.about').position().top) {
        $('.menu-right button').css('color', '#4a4a4a');
    } 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' 강의를
참고하여 작성한 내용입니다.