3
현재 작업하고있는 Wordpress 사이트에서 클라이언트는 첫 페이지의 여러 섹션을 아래에서 위로 슬라이드하고 이전 섹션 (예 : 닦기 또는 슬라이드 전환)을 덮고 싶습니다. 여기에 발견 된 슈퍼 scrollorama를 사용하여 : http://johnpolacek.github.com/superscrollorama/, 나는 원하는 결과를 얻을 수 있었다.Javascript/Jquery Super Scrollorama 탐색 문제
다음으로 앞 페이지에만 탐색 메뉴를 만들어야했습니다. 나는 그렇게했고, 페이지의 여러 다른 지점에 앵커를 세웠다. 또한 nav 메뉴 링크를 클릭 할 때 scolling 애니메이션을 위해 scrollTo 라이브러리를 사용했습니다. 그러나, 나는 발생한 문제가 있습니다 :
- 상단에 내가 "쇼케이스"를 클릭, 그것은 쇼케이스 섹션으로 날을 제공하지만, 제품 섹션 (그 후 DIV 오른쪽)입니다 그것을 겹쳐서.
- 다른 div는 현재 div와 동일한 문제가있는 것 같습니다.
- 앞으로 만 탐색 할 수 있습니다. 뒤로 이동하려고 시도 할 때 (홈을 제외하고)
- div의 CSS "top"속성과 관련이 있다고 생각하여 클릭 할 때마다 다시 설정해 보았습니다. 쫓겨 났지만 작동하지 않았습니다. 그래서 당분간 제거했습니다.
- 현재 앵커로 스크롤하는 기본 동작을 방지하고 대신 실제 div로 스크롤하도록 자바 스크립트를 설정합니다. 그러나, 나는 여전히 같은 문제가 있습니다.
편집 : 나는이 모든 문제를 해결했지만 지금은 새로운 문제가 발생했다. 사이트를 스크롤 한 다음 브라우저 창 크기를 조정하고 위로 스크롤하면 밑 부분이 잘리는 것을 볼 수 있습니다. superscrollorama 페이지를 보았는데 같은 문제가 있습니다. 나는 누군가가 이것을 고치는 법을 알기를 바랬다.
$(document).ready(function() {
jQuery('.home-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo(0, 1000, {queue:true});
});
jQuery('.showcase-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo('#showcase_content', 1000, {queue:true});
});
jQuery('.products-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo('#products_content', 1000, {queue:true});
});
jQuery('.about-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo('#about_content', 1000, {queue:true});
});
jQuery('.locator-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo('#locator_content', 1000, {queue:true});
});
jQuery('.contact-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo('#contact_content', 1000, {queue:true});
}); });
scrollorama 코드 :
$(document).ready(function() {
$('#wrapper').css('display','block');
var controller = $.superscrollorama();
var pinDur = 4000; /* set duration of pin scroll in pixels */
// create animation timeline for pinned element
var pinAnimations = new TimelineLite();
pinAnimations
.append([
TweenMax.to($('#showcase'), .5, {css:{top:0}})
], .5)
.append([
TweenMax.to($('#products'), .5, {css:{top:0}})
], .5)
.append([
TweenMax.to($('#about'), .5, {css:{top:0}})
], .5)
.append([
TweenMax.to($('#locator'), .5, {css:{top:0}})
], .5)
.append([
TweenMax.to($('#contact'), .5, {css:{top:0}})
], .5)
.append(TweenMax.to($('#pin-frame-unpin'), .5, {css:{top:'100px'}}));
controller.pin($('#examples-pin'), pinDur, {
anim:pinAnimations,
onPin: function() {
$('#examples-pin').css('height','100%');
},
onUnpin: function() {
$('#examples-pin').css('height','2000px');
}
}); });
섹션 div의 모든 여기에
http://breathe.simalam.ca/가 스크롤을위한 자바 스크립트입니다 : 여기
내가 현재 작업하고있는 사이트입니다 상위 div 내부. 섹션 divs 모두 높이, 너비 및 상단이 100 %입니다.#examples-pin {
position: relative; /* relative positioning for transitions to work? */
width: 101%; /* max width */
height: 2000px; /* height of 2000px for now */
overflow: hidden; /* hide the overflow for transitions to work */
margin-bottom: -200px; /* negative bottom margin */
}