CSS と JavaScript を使用して 3D リボンを作成しようとしています。
必要な主な機能は次のとおりです。
- リボンはスティッキー スクロール方式を使用する必要があります。つまり、ページ スクロールで下から上に移動し、上で固定されます。
- リボンの 3D 効果。スクロールすると視点が変わります
エフェクトを作成しました。デモ ページは次のとおりです: http://staging.xhtml-lab.com/ribbon/
ソースを表示してコードを確認できます.JSはページの下部にあります.
しかし、いくつかのバグがあり、修正できず、助けを求めています:
- スクロール時にコーナー (三角形) が正しく移動しない
- ゆっくりスクロールするとうまくいきますが、速くスクロールするとすべてが台無しになります
- 下にスクロールしてページを更新すると、リボンが下に移動し、計算がめちゃくちゃになります。
これらの問題を解決するためのヘルプを探しています。
以下はJSコードです。
$(document).ready(function() {
var docHeight = $(window).height();
var ribbonOffsetTop = 200;
var ribbonOffsetBottom = 50;
var initialPosition = parseInt($('#ribbon').css('top'));
var lastScrollTop = 0;
var ribbonHeight = 74;
var availableScroll = docHeight-ribbonOffsetTop-ribbonOffsetBottom;
var step = availableScroll/34;
var remainingScroll = availableScroll-step;
var stepsMoved = 0;
console.log(availableScroll);
$(window).scroll(function() {
var st = $(this).scrollTop();
if (st > lastScrollTop){
// downscroll code - Ribbon moving up
if (parseInt($('#ribbon').css('top')) > ribbonOffsetTop) {
$('#ribbon').css('top', initialPosition - parseInt(st));
var scrollingPosition = docHeight-st-ribbonOffsetTop-ribbonOffsetBottom;
if(remainingScroll > scrollingPosition) {
remainingScroll -= step;
$('.ribbon-front').css("top", $('.ribbon-front').position().top - 1);
if(stepsMoved < 17) {
$('.ribbon-edge-innerleft, .ribbon-edge-outerleft').css("border-width", (17 - stepsMoved)+"px 26px 0 0");
$('.ribbon-edge-innerright, .ribbon-edge-outerright').css("border-width", (17 - stepsMoved)+"px 0 0 26px");
$('.ribbon-edge-outerleft, .ribbon-edge-outerright').css("top", stepsMoved-34);
} else {
$('.ribbon-edge-innerleft, .ribbon-edge-innerright').css("top", stepsMoved -17);
$('.ribbon-edge-outerleft, .ribbon-edge-outerright').css("top", "23px");
$('.ribbon-edge-innerleft, .ribbon-edge-outerleft').css("border-width", "0px 26px "+(stepsMoved - 17)+"px 0");
$('.ribbon-edge-innerright, .ribbon-edge-outerright').css("border-width", "0px 0 "+(stepsMoved - 17)+"px 26px");
}
stepsMoved ++;
}
}
} else if (st < lastScrollTop ) {
// upscroll code - Ribbon moving down
if (parseInt($(this).scrollTop()) <= docHeight-ribbonOffsetTop-ribbonOffsetBottom) {
$('#ribbon').css('top', (docHeight-parseInt(st))-ribbonHeight);
var scrollingPosition = docHeight-st-ribbonOffsetTop-ribbonOffsetBottom;
if(remainingScroll < scrollingPosition) {
remainingScroll += step;
$('.ribbon-front').css("top", $('.ribbon-front').position().top + 1);
if(stepsMoved > 17) {
$('.ribbon-edge-innerleft, .ribbon-edge-outerleft').css("border-width", "0px 26px "+(stepsMoved - 17)+"px 0");
$('.ribbon-edge-innerright, .ribbon-edge-outerright').css("border-width", "0px 0 "+(stepsMoved - 17)+"px 26px");
} else {
$('.ribbon-edge-innerleft, .ribbon-edge-innerright').css("top", stepsMoved -17);
$('.ribbon-edge-outerleft, .ribbon-edge-outerright').css("top", "23px");
$('.ribbon-edge-innerleft, .ribbon-edge-outerleft').css("border-width", (17 - stepsMoved)+"px 26px 0 0");
$('.ribbon-edge-innerright, .ribbon-edge-outerright').css("border-width", (17 - stepsMoved)+"px 0 0 26px");
$('.ribbon-edge-outerleft, .ribbon-edge-outerright').css("top", stepsMoved-34);
}
stepsMoved --;
}
}
}
lastScrollTop = st;
});
});