ProgramingTip

jQuery 애니메이션 스크롤

bestdevel 2020. 11. 6. 18:58
반응형

jQuery 애니메이션 스크롤


효과를 호출하는 방법을 잘 모르겠지만 누군가가 웹 사이트와 동일한 효과를 내도록 도와 줄 라이브러리를 알려줄 수 있습니까?

http://www.makr.com

기본적으로 마우스 클릭시 페이지 상단으로 행을 이동합니다. 코드 스 니펫, 가급적 jQuery는 특수 효과 라이브러리가없는 경우 도움이 될 수 있습니다.

다른 주제를 시작해야하는 것이 잘 모르겠지만 Makr UI의 전체 효과를 위해 작은 jQuery 스 니펫으로 나를 도울 수 있습니까?


jQuery를 사용하여 페이지의 스크롤 톱에 애니메이션을 적용 할 수 있습니다.

$('html, body').animate({
    scrollTop: $(".middle").offset().top
 }, 2000);

이 사이트를 참조하십시오 : http://papermashup.com/jquery-page-scrolling/


저가 개발 한 간단한 JQuery와 플러그인 ( AnimateScroll )을 사용해 볼 수도 있습니다 .


나는 단지 사용한다 :

$('body').animate({ 'scrollTop': '-=-'+<yourValueScroll>+'px' }, 2000);


var page_url = windws.location.href;
var page_id = page_url.substring(page_url.lastIndexOf("#") + 1);
if (page_id == "") {
    $("html, body").animate({
        scrollTop: $("#scroll-" + page_id).offset().top
    }, 2000)
} else if (page_id == "") {
    $("html, body").animate({
        scrollTop: $("#scroll-" + page_id).offset().top
    }, 2000)
}

});


이를 위해 jquery가 있습니다. 문서를 특정 요소로 스크롤하여 뷰포트의 중앙에 완벽하게 배치됩니다. 또한 스크롤 효과가 매우 부드럽게 보이도록 애니메이션 이징을 지원합니다. AnimatedScroll.js를 확인하십시오 .

참고 URL : https://stackoverflow.com/questions/8047454/jquery-animate-scroll

반응형