반응형
jQuery애니메이션 스크롤
효과를 어떻게 불러야 할지 잘 모르겠지만, 누가 이 웹사이트와 같은 효과를 낼 수 있도록 도와줄 수 있는 라이브러리를 알려줄 수 있나요?
기본적으로 마우스 클릭 시 행을 페이지 상단으로 이동합니다.코드 스니펫, 가급적이면 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
반응형
'programing' 카테고리의 다른 글
| Spring GenericFilter Bean의 예외 처리 (0) | 2023.10.15 |
|---|---|
| 플랫폼 간 일관된 의사 난수 (0) | 2023.10.15 |
| 앱의 배경 이미지를 반복하는 방법 (0) | 2023.10.15 |
| 매니페스트 병합 실패: uses-sdk:minSdkVersion 14 (0) | 2023.10.15 |
| 클라이언트 행세 및 스프링 재시도 (0) | 2023.10.15 |