programing

jQuery애니메이션 스크롤

elecom 2023. 10. 15. 17:00
반응형

jQuery애니메이션 스크롤

효과를 어떻게 불러야 할지 잘 모르겠지만, 누가 이 웹사이트와 같은 효과를 낼 수 있도록 도와줄 수 있는 라이브러리를 알려줄 수 있나요?

http://www.makr.com

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

다른 주제를 시작해야 할지 잘 모르겠지만, 누가 마크루 UI의 전체 효과를 달성하기 위해 작은 jQuery 스니펫으로 나를 도와줄 수 있습니까?

jQuery로 페이지의 스크롤 상단을 애니메이션화할 수 있습니다.

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

이 사이트 참조: http://papermashup.com/jquery-page-scrolling/

이 간단한 jQuery 플러그인(AnimateScroll)을 돌려볼 수 있습니다.그것은 사용하기 아주 쉽습니다.

1. 페이지 상단으로 스크롤합니다.

$('body').animatescroll();

2. ID가 있는 요소로 스크롤section-1:

$('#section-1').animatescroll({easing:'easeInOutBack'});

면책 사항:저는 이 플러그인의 저자입니다.

저는 그냥 다음을 사용합니다.

$('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

반응형